ng-configcat-publicapi-ui 5.3.6 → 5.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -114,10 +114,10 @@ class PublicApiService {
|
|
|
114
114
|
getDashboardBasePath() {
|
|
115
115
|
return this.configuration?.dashboardBasePath ?? defaultDashboardBasePath;
|
|
116
116
|
}
|
|
117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
118
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublicApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
118
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublicApiService }); }
|
|
119
119
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublicApiService, decorators: [{
|
|
121
121
|
type: Injectable
|
|
122
122
|
}] });
|
|
123
123
|
|
|
@@ -462,10 +462,10 @@ class AppDateAdapter extends NativeDateAdapter {
|
|
|
462
462
|
return DateHelper.formatDate(date, "yyyy. MM. dd HH:mm");
|
|
463
463
|
}
|
|
464
464
|
}
|
|
465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
466
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
466
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppDateAdapter }); }
|
|
467
467
|
}
|
|
468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppDateAdapter, decorators: [{
|
|
469
469
|
type: Injectable
|
|
470
470
|
}] });
|
|
471
471
|
|
|
@@ -480,10 +480,10 @@ class ConfirmationDialogComponent {
|
|
|
480
480
|
cancel() {
|
|
481
481
|
this.dialogRef.close("cancel");
|
|
482
482
|
}
|
|
483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
483
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n <button\n type=\"button\"\n mat-flat-button\n data-robot=\"dialogYes\"\n [color]=\"data.yesButtonColor ? data.yesButtonColor : 'primary'\"\n (click)=\"yes()\">\n {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n </button>\n @if (!data.hideCancelButton) {\n <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n {{ data.cancelButtonLabel ? data.cancelButtonLabel : \"Cancel\" }}\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
485
485
|
}
|
|
486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
487
487
|
type: Component,
|
|
488
488
|
args: [{ selector: "app-confirmation-dialog", imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n <button\n type=\"button\"\n mat-flat-button\n data-robot=\"dialogYes\"\n [color]=\"data.yesButtonColor ? data.yesButtonColor : 'primary'\"\n (click)=\"yes()\">\n {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n </button>\n @if (!data.hideCancelButton) {\n <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n {{ data.cancelButtonLabel ? data.cancelButtonLabel : \"Cancel\" }}\n </button>\n }\n</div>\n" }]
|
|
489
489
|
}] });
|
|
@@ -499,10 +499,10 @@ class RerouteDialogComponent {
|
|
|
499
499
|
cancel() {
|
|
500
500
|
this.dialogRef.close("cancel");
|
|
501
501
|
}
|
|
502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RerouteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RerouteDialogComponent, isStandalone: true, selector: "app-reroute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n <div [innerHTML]=\"data.body\"></div>\n</div>\n<br />\n<div mat-dialog-actions>\n <a class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"data.yesButtonLink\">\n <button\n type=\"button\"\n style=\"margin-right: 10px\"\n mat-flat-button\n data-robot=\"dialogYes\"\n [color]=\"data.buttonColor ? data.buttonColor : 'primary'\"\n (click)=\"yes()\">\n {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n </button>\n </a>\n @if (!data.hideNoButton) {\n <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n {{ data.noButtonLabel ? data.noButtonLabel : \"Cancel\" }}\n </button>\n }\n</div>\n", styles: [".hidden-link:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
504
504
|
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RerouteDialogComponent, decorators: [{
|
|
506
506
|
type: Component,
|
|
507
507
|
args: [{ selector: "app-reroute-dialog", imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n <div [innerHTML]=\"data.body\"></div>\n</div>\n<br />\n<div mat-dialog-actions>\n <a class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"data.yesButtonLink\">\n <button\n type=\"button\"\n style=\"margin-right: 10px\"\n mat-flat-button\n data-robot=\"dialogYes\"\n [color]=\"data.buttonColor ? data.buttonColor : 'primary'\"\n (click)=\"yes()\">\n {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n </button>\n </a>\n @if (!data.hideNoButton) {\n <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n {{ data.noButtonLabel ? data.noButtonLabel : \"Cancel\" }}\n </button>\n }\n</div>\n", styles: [".hidden-link:focus{outline:none}\n"] }]
|
|
508
508
|
}] });
|
|
@@ -523,10 +523,10 @@ class InfoDialogComponent {
|
|
|
523
523
|
this.data.secondaryButtonAction?.();
|
|
524
524
|
this.dialogRef.close("nok");
|
|
525
525
|
}
|
|
526
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
527
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InfoDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
527
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: InfoDialogComponent, isStandalone: true, selector: "app-info-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content [class.content-with-icon]=\"!!data.iconName\">\n @if (!!data.iconName) {\n <mat-icon class=\"icon\" [ngClass]=\"iconCssClass\" [style.color]=\"data.iconColor\">{{ data.iconName }}</mat-icon>\n }\n <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">{{ data.primaryButtonLabel ?? \"OK\" }}</button>\n @if (data.secondaryButtonLabel) {\n <button type=\"button\" mat-stroked-button (click)=\"secondaryButtonAction()\">{{ data.secondaryButtonLabel }}</button>\n }\n</div>\n", styles: [".content-with-icon{display:flex;align-items:center}.content-with-icon .icon{font-size:3rem;flex-shrink:0;margin-right:.5rem}.content-with-icon .icon.mat-icon{width:auto;height:auto}.content-with-icon .icon-error{color:#d24c41}.content-with-icon .icon-warning{color:orange}.content-with-icon .icon-info{color:#1c86f8}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
528
528
|
}
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InfoDialogComponent, decorators: [{
|
|
530
530
|
type: Component,
|
|
531
531
|
args: [{ selector: "app-info-dialog", imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatIcon, MatDialogActions, MatButton, NgClass], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content [class.content-with-icon]=\"!!data.iconName\">\n @if (!!data.iconName) {\n <mat-icon class=\"icon\" [ngClass]=\"iconCssClass\" [style.color]=\"data.iconColor\">{{ data.iconName }}</mat-icon>\n }\n <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">{{ data.primaryButtonLabel ?? \"OK\" }}</button>\n @if (data.secondaryButtonLabel) {\n <button type=\"button\" mat-stroked-button (click)=\"secondaryButtonAction()\">{{ data.secondaryButtonLabel }}</button>\n }\n</div>\n", styles: [".content-with-icon{display:flex;align-items:center}.content-with-icon .icon{font-size:3rem;flex-shrink:0;margin-right:.5rem}.content-with-icon .icon.mat-icon{width:auto;height:auto}.content-with-icon .icon-error{color:#d24c41}.content-with-icon .icon-warning{color:orange}.content-with-icon .icon-info{color:#1c86f8}\n"] }]
|
|
532
532
|
}], ctorParameters: () => [] });
|
|
@@ -602,10 +602,10 @@ class ComparisonValueListHelper {
|
|
|
602
602
|
.filter(v => !!v.value),
|
|
603
603
|
};
|
|
604
604
|
}
|
|
605
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
606
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComparisonValueListHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
606
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComparisonValueListHelper }); }
|
|
607
607
|
}
|
|
608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComparisonValueListHelper, decorators: [{
|
|
609
609
|
type: Injectable
|
|
610
610
|
}] });
|
|
611
611
|
|
|
@@ -642,10 +642,10 @@ class NotificationSnackComponent {
|
|
|
642
642
|
}
|
|
643
643
|
});
|
|
644
644
|
}
|
|
645
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.
|
|
645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationSnackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NotificationSnackComponent, isStandalone: true, selector: "app-notification-snack", viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"snack-container\"\n [class.green]=\"data.color === NotificationSnackColor.Green\"\n [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n [class.red]=\"data.color === NotificationSnackColor.Red\"\n [class.blue]=\"data.color === NotificationSnackColor.Blue\">\n <div\n class=\"content\"\n matSnackBarLabel\n [class.error]=\"data.color === NotificationSnackColor.Red\"\n [class.warn]=\"data.color === NotificationSnackColor.Yellow\"\n [class.success]=\"data.color === NotificationSnackColor.Green\"\n [class.info]=\"data.color === NotificationSnackColor.Blue\">\n <div [innerHTML]=\"data.message\"></div>\n </div>\n\n <span matSnackBarActions>\n <button\n type=\"button\"\n class=\"dismiss\"\n mat-icon-button\n matSnackBarAction\n [class.green]=\"data.color === NotificationSnackColor.Green\"\n [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n [class.red]=\"data.color === NotificationSnackColor.Red\"\n [class.blue]=\"data.color === NotificationSnackColor.Blue\"\n (click)=\"snackBarRef.dismissWithAction()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n\n <div class=\"progress-container\">\n <div\n #progressBar\n class=\"progress-bar\"\n [class.green]=\"data.color === NotificationSnackColor.Green\"\n [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n [class.red]=\"data.color === NotificationSnackColor.Red\"\n [class.blue]=\"data.color === NotificationSnackColor.Blue\"></div>\n </div>\n</div>\n", styles: [".snack-container{display:flex;border-radius:4px}.snack-container .content{display:flex;align-items:center;color:var(--notification-font-color)}.snack-container .content.error:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--error-icon-content);color:var(--notification-error-icon-color);margin-right:12px}.snack-container .content.warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--warn-icon-content);color:var(--notification-warn-icon-color);margin-right:12px}.snack-container .content.success:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--success-icon-content);color:var(--notification-success-icon-color);margin-right:12px}.snack-container .content.info:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--notification-info-icon-color);margin-right:12px}.snack-container.green{background-color:var(--notification-success-background-color)}.snack-container.red{background-color:var(--notification-error-background-color)}.snack-container.yellow{background-color:var(--notification-warn-background-color)}.snack-container.blue{background-color:var(--notification-info-background-color)}.snack-container .dismiss{margin-right:4px}.snack-container .dismiss.green{color:var(--notification-success-icon-color)}.snack-container .dismiss.red{color:var(--notification-error-icon-color)}.snack-container .dismiss.yellow{color:var(--notification-warn-icon-color)}.snack-container .dismiss.blue{color:var(--notification-info-icon-color)}.snack-container .dismiss mat-icon{font-size:20px;width:20px;height:20px}.snack-container .progress-container{width:100%;height:3px;position:absolute;left:0;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:hidden}.snack-container .progress-container .progress-bar{opacity:.6;width:100%;height:100%;transition:width .5s;transition-timing-function:linear}.snack-container .progress-container .progress-bar.green{background-color:var(--notification-success-icon-color)}.snack-container .progress-container .progress-bar.red{background-color:var(--notification-error-icon-color)}.snack-container .progress-container .progress-bar.yellow{background-color:var(--notification-warn-icon-color)}.snack-container .progress-container .progress-bar.blue{background-color:var(--notification-info-icon-color)}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
647
647
|
}
|
|
648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationSnackComponent, decorators: [{
|
|
649
649
|
type: Component,
|
|
650
650
|
args: [{ selector: "app-notification-snack", imports: [MatIconButton, MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel, MatIcon], template: "<div\n class=\"snack-container\"\n [class.green]=\"data.color === NotificationSnackColor.Green\"\n [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n [class.red]=\"data.color === NotificationSnackColor.Red\"\n [class.blue]=\"data.color === NotificationSnackColor.Blue\">\n <div\n class=\"content\"\n matSnackBarLabel\n [class.error]=\"data.color === NotificationSnackColor.Red\"\n [class.warn]=\"data.color === NotificationSnackColor.Yellow\"\n [class.success]=\"data.color === NotificationSnackColor.Green\"\n [class.info]=\"data.color === NotificationSnackColor.Blue\">\n <div [innerHTML]=\"data.message\"></div>\n </div>\n\n <span matSnackBarActions>\n <button\n type=\"button\"\n class=\"dismiss\"\n mat-icon-button\n matSnackBarAction\n [class.green]=\"data.color === NotificationSnackColor.Green\"\n [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n [class.red]=\"data.color === NotificationSnackColor.Red\"\n [class.blue]=\"data.color === NotificationSnackColor.Blue\"\n (click)=\"snackBarRef.dismissWithAction()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n\n <div class=\"progress-container\">\n <div\n #progressBar\n class=\"progress-bar\"\n [class.green]=\"data.color === NotificationSnackColor.Green\"\n [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n [class.red]=\"data.color === NotificationSnackColor.Red\"\n [class.blue]=\"data.color === NotificationSnackColor.Blue\"></div>\n </div>\n</div>\n", styles: [".snack-container{display:flex;border-radius:4px}.snack-container .content{display:flex;align-items:center;color:var(--notification-font-color)}.snack-container .content.error:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--error-icon-content);color:var(--notification-error-icon-color);margin-right:12px}.snack-container .content.warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--warn-icon-content);color:var(--notification-warn-icon-color);margin-right:12px}.snack-container .content.success:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--success-icon-content);color:var(--notification-success-icon-color);margin-right:12px}.snack-container .content.info:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--notification-info-icon-color);margin-right:12px}.snack-container.green{background-color:var(--notification-success-background-color)}.snack-container.red{background-color:var(--notification-error-background-color)}.snack-container.yellow{background-color:var(--notification-warn-background-color)}.snack-container.blue{background-color:var(--notification-info-background-color)}.snack-container .dismiss{margin-right:4px}.snack-container .dismiss.green{color:var(--notification-success-icon-color)}.snack-container .dismiss.red{color:var(--notification-error-icon-color)}.snack-container .dismiss.yellow{color:var(--notification-warn-icon-color)}.snack-container .dismiss.blue{color:var(--notification-info-icon-color)}.snack-container .dismiss mat-icon{font-size:20px;width:20px;height:20px}.snack-container .progress-container{width:100%;height:3px;position:absolute;left:0;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:hidden}.snack-container .progress-container .progress-bar{opacity:.6;width:100%;height:100%;transition:width .5s;transition-timing-function:linear}.snack-container .progress-container .progress-bar.green{background-color:var(--notification-success-icon-color)}.snack-container .progress-container .progress-bar.red{background-color:var(--notification-error-icon-color)}.snack-container .progress-container .progress-bar.yellow{background-color:var(--notification-warn-icon-color)}.snack-container .progress-container .progress-bar.blue{background-color:var(--notification-info-icon-color)}\n"] }]
|
|
651
651
|
}], ctorParameters: () => [], propDecorators: { progressBar: [{ type: i0.ViewChild, args: ["progressBar", { isSignal: true }] }] } });
|
|
@@ -684,10 +684,10 @@ class MessagingService {
|
|
|
684
684
|
dismissCurrentSnack() {
|
|
685
685
|
this.snackBar.dismiss();
|
|
686
686
|
}
|
|
687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
688
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
687
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessagingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
688
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessagingService }); }
|
|
689
689
|
}
|
|
690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessagingService, decorators: [{
|
|
691
691
|
type: Injectable
|
|
692
692
|
}] });
|
|
693
693
|
|
|
@@ -709,7 +709,7 @@ function validateSemVerList(c) {
|
|
|
709
709
|
},
|
|
710
710
|
};
|
|
711
711
|
}
|
|
712
|
-
const semvers =
|
|
712
|
+
const semvers = c.value.split(",").map(s => s.trim());
|
|
713
713
|
if (semvers.find(s => s && s !== "" && valid(s) === null)) {
|
|
714
714
|
return {
|
|
715
715
|
validateSemVerList: {
|
|
@@ -732,7 +732,7 @@ function validateNumberNan(c) {
|
|
|
732
732
|
}
|
|
733
733
|
function validateEmptyString(c) {
|
|
734
734
|
const stringControl = c;
|
|
735
|
-
if (stringControl
|
|
735
|
+
if (stringControl?.value === "") {
|
|
736
736
|
return {
|
|
737
737
|
required: true,
|
|
738
738
|
};
|
|
@@ -1200,10 +1200,10 @@ class FormGenerator {
|
|
|
1200
1200
|
listValueFormArray.markAsTouched();
|
|
1201
1201
|
listValueFormArray.markAsDirty();
|
|
1202
1202
|
}
|
|
1203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1204
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1204
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormGenerator }); }
|
|
1205
1205
|
}
|
|
1206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormGenerator, decorators: [{
|
|
1207
1207
|
type: Injectable
|
|
1208
1208
|
}] });
|
|
1209
1209
|
function validatePercentageSum(c) {
|
|
@@ -1320,10 +1320,10 @@ class ThemeService {
|
|
|
1320
1320
|
this.document.body.removeAttribute("data-theme");
|
|
1321
1321
|
}
|
|
1322
1322
|
}
|
|
1323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1324
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1324
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService }); }
|
|
1325
1325
|
}
|
|
1326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, decorators: [{
|
|
1327
1327
|
type: Injectable
|
|
1328
1328
|
}] });
|
|
1329
1329
|
|
|
@@ -1527,10 +1527,10 @@ class SettingListFormHelper {
|
|
|
1527
1527
|
})),
|
|
1528
1528
|
};
|
|
1529
1529
|
}
|
|
1530
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1531
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingListFormHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1531
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingListFormHelper }); }
|
|
1532
1532
|
}
|
|
1533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingListFormHelper, decorators: [{
|
|
1534
1534
|
type: Injectable
|
|
1535
1535
|
}] });
|
|
1536
1536
|
|
|
@@ -1602,10 +1602,10 @@ class InputDisplayNormalizerDirective {
|
|
|
1602
1602
|
}
|
|
1603
1603
|
}
|
|
1604
1604
|
}
|
|
1605
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1606
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
1605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputDisplayNormalizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1606
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: InputDisplayNormalizerDirective, isStandalone: true, selector: "input[inputDisplayNormalizer]", host: { listeners: { "blur": "onChange($event)" } }, ngImport: i0 }); }
|
|
1607
1607
|
}
|
|
1608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputDisplayNormalizerDirective, decorators: [{
|
|
1609
1609
|
type: Directive,
|
|
1610
1610
|
args: [{
|
|
1611
1611
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -1650,10 +1650,10 @@ class BaseComponent {
|
|
|
1650
1650
|
getDashboardBasePath() {
|
|
1651
1651
|
return this.publicApiService.getDashboardBasePath();
|
|
1652
1652
|
}
|
|
1653
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
1653
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1654
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BaseComponent, isStandalone: true, selector: "app-base", inputs: { basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, basicAuthUsername: { classPropertyName: "basicAuthUsername", publicName: "basicAuthUsername", isSignal: true, isRequired: false, transformFunction: null }, basicAuthPassword: { classPropertyName: "basicAuthPassword", publicName: "basicAuthPassword", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div></div>", isInline: true }); }
|
|
1655
1655
|
}
|
|
1656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseComponent, decorators: [{
|
|
1657
1657
|
type: Component,
|
|
1658
1658
|
args: [{
|
|
1659
1659
|
selector: "app-base",
|
|
@@ -1694,10 +1694,10 @@ class ConcurrentDeleteDialogComponent {
|
|
|
1694
1694
|
}
|
|
1695
1695
|
return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
|
|
1696
1696
|
}
|
|
1697
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1697
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConcurrentDeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1698
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ConcurrentDeleteDialogComponent, isStandalone: true, selector: "app-concurrent-delete-dialog", ngImport: i0, template: "<h1 mat-dialog-title>There was a conflict while trying to save your feature flag</h1>\n<div mat-dialog-content>\n <p>Seems like the feature flag or setting was deleted by someone else while you were editing it.</p>\n <p>Here's what happened:</p>\n <ul>\n <li>The deleted feature flag was not updated, those edits are lost.</li>\n </ul>\n <p>\n See the\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"openHistory()\" [mat-dialog-close]>audit log</a>\n for more details.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"close()\">OK</button>\n</div>\n", styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
|
|
1699
1699
|
}
|
|
1700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1700
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConcurrentDeleteDialogComponent, decorators: [{
|
|
1701
1701
|
type: Component,
|
|
1702
1702
|
args: [{ selector: "app-concurrent-delete-dialog", imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose], template: "<h1 mat-dialog-title>There was a conflict while trying to save your feature flag</h1>\n<div mat-dialog-content>\n <p>Seems like the feature flag or setting was deleted by someone else while you were editing it.</p>\n <p>Here's what happened:</p>\n <ul>\n <li>The deleted feature flag was not updated, those edits are lost.</li>\n </ul>\n <p>\n See the\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"openHistory()\" [mat-dialog-close]>audit log</a>\n for more details.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"close()\">OK</button>\n</div>\n", styles: ["a{cursor:pointer}\n"] }]
|
|
1703
1703
|
}] });
|
|
@@ -1725,10 +1725,10 @@ class ReasonDialogComponent {
|
|
|
1725
1725
|
cancel() {
|
|
1726
1726
|
this.dialogRef.close({ button: "cancel" });
|
|
1727
1727
|
}
|
|
1728
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1728
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReasonDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1729
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ReasonDialogComponent, isStandalone: true, selector: "app-reason-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Add notes</h1>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n <div mat-dialog-content class=\"container\">\n <p>This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).</p>\n <mat-form-field appearance=\"outline\">\n <mat-label>Note</mat-label>\n <textarea\n matInput\n formControlName=\"reason\"\n name=\"reason\"\n placeholder=\"I'm changing the values because...\"\n rows=\"3\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"></textarea>\n @if (formGroup.controls.reason.invalid) {\n <mat-error>The field is required.</mat-error>\n }\n </mat-form-field>\n </div>\n <div mat-dialog-actions>\n <button type=\"submit\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">Add notes & Save</button>\n <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n </div>\n</form>\n", styles: [".container>*{width:100%}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
1730
1730
|
}
|
|
1731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReasonDialogComponent, decorators: [{
|
|
1732
1732
|
type: Component,
|
|
1733
1733
|
args: [{ selector: "app-reason-dialog", imports: [
|
|
1734
1734
|
MatDialogTitle,
|
|
@@ -1966,10 +1966,10 @@ class DigitOnlyDirective {
|
|
|
1966
1966
|
const oldValue = this.inputElement.value;
|
|
1967
1967
|
return oldValue.substring(0, selectionStart) + key + oldValue.substring(selectionEnd);
|
|
1968
1968
|
}
|
|
1969
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1970
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
1969
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DigitOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1970
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: DigitOnlyDirective, isStandalone: true, selector: "[appDigitOnly]", inputs: { digitOnlyDecimal: { classPropertyName: "digitOnlyDecimal", publicName: "digitOnlyDecimal", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyDecimalSeparator: { classPropertyName: "digitOnlyDecimalSeparator", publicName: "digitOnlyDecimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyAllowNegatives: { classPropertyName: "digitOnlyAllowNegatives", publicName: "digitOnlyAllowNegatives", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyAllowPaste: { classPropertyName: "digitOnlyAllowPaste", publicName: "digitOnlyAllowPaste", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyNegativeSign: { classPropertyName: "digitOnlyNegativeSign", publicName: "digitOnlyNegativeSign", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "beforeinput": "onBeforeInput($event)", "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
|
|
1971
1971
|
}
|
|
1972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1972
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DigitOnlyDirective, decorators: [{
|
|
1973
1973
|
type: Directive,
|
|
1974
1974
|
args: [{ selector: "[appDigitOnly]" }]
|
|
1975
1975
|
}], ctorParameters: () => [], propDecorators: { digitOnlyDecimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyDecimal", required: false }] }], digitOnlyDecimalSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyDecimalSeparator", required: false }] }], digitOnlyAllowNegatives: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyAllowNegatives", required: false }] }], digitOnlyAllowPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyAllowPaste", required: false }] }], digitOnlyNegativeSign: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyNegativeSign", required: false }] }], onBeforeInput: [{
|
|
@@ -1998,10 +1998,10 @@ class AutofocusDirective {
|
|
|
1998
1998
|
}, 200);
|
|
1999
1999
|
}
|
|
2000
2000
|
}
|
|
2001
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2002
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
2001
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2002
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: AutofocusDirective, isStandalone: true, selector: "[focus]", inputs: { isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2003
2003
|
}
|
|
2004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2004
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutofocusDirective, decorators: [{
|
|
2005
2005
|
type: Directive,
|
|
2006
2006
|
args: [{
|
|
2007
2007
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2117,8 +2117,8 @@ class AceEditorComponent {
|
|
|
2117
2117
|
registerOnTouched() {
|
|
2118
2118
|
/* unused */
|
|
2119
2119
|
}
|
|
2120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.
|
|
2120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: AceEditorComponent, isStandalone: true, selector: "app-ace-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", onChange: "onChange" }, providers: [
|
|
2122
2122
|
{
|
|
2123
2123
|
provide: NG_VALUE_ACCESSOR,
|
|
2124
2124
|
useExisting: forwardRef(() => AceEditorComponent),
|
|
@@ -2126,7 +2126,7 @@ class AceEditorComponent {
|
|
|
2126
2126
|
},
|
|
2127
2127
|
], viewQueries: [{ propertyName: "editor", first: true, predicate: ["aceEditor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #aceEditor class=\"ace-editor-container\"></div>\n", styles: [".ace-editor-container{width:100%;height:100%;border:thin solid var(--input-border-color);box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2128
2128
|
}
|
|
2129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AceEditorComponent, decorators: [{
|
|
2130
2130
|
type: Component,
|
|
2131
2131
|
args: [{ selector: "app-ace-editor", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2132
2132
|
{
|
|
@@ -2168,7 +2168,7 @@ class PopOutEditorComponent {
|
|
|
2168
2168
|
this.data.control.markAsTouched();
|
|
2169
2169
|
}
|
|
2170
2170
|
buildFormGroup() {
|
|
2171
|
-
const value = this.data.control.value ? this.data.control.value
|
|
2171
|
+
const value = this.data.control.value ? this.data.control.value : "";
|
|
2172
2172
|
const list = value
|
|
2173
2173
|
.split(",")
|
|
2174
2174
|
.filter(v => !!v);
|
|
@@ -2194,10 +2194,10 @@ class PopOutEditorComponent {
|
|
|
2194
2194
|
remove(index) {
|
|
2195
2195
|
this.formGroup.controls.values.removeAt(index);
|
|
2196
2196
|
}
|
|
2197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopOutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PopOutEditorComponent, isStandalone: true, selector: "app-popout-editor", ngImport: i0, template: "<div mat-dialog-content class=\"container\">\n @if (!data.multiline) {\n <div>\n <mat-button-toggle-group [(ngModel)]=\"format\">\n <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n </mat-button-toggle-group>\n @if (format === \"text\") {\n <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n <textarea\n matInput\n autofocus\n focus\n rows=\"17\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"17\"\n cdkAutosizeMaxRows=\"26\"\n [formControl]=\"data.control\"></textarea>\n @if (data.control.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(data.control) }}\n </mat-error>\n }\n @if (data.maxValueLength && data.maxValueLength - (data.control.value?.length ?? 0) > -1) {\n <mat-hint>\n Remaining characters:\n {{ data.maxValueLength - (data.control.value?.length ?? 0) }}\n </mat-hint>\n }\n </mat-form-field>\n } @else if (format === \"json\") {\n <div class=\"editor-container\">\n <app-ace-editor [readOnly]=\"readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n @if (data.control.invalid) {\n <span class=\"error mat-mdc-form-field-error\">\n {{ formHelper.getErrorMessage(data.control) }}\n </span>\n }\n </div>\n }\n </div>\n } @else {\n <div [formGroup]=\"formGroup\">\n @for (valueControl of formGroup.controls.values.controls; track $index; let i = $index) {\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\">\n <textarea\n matInput\n autofocus\n focus\n cdkTextareaAutosize\n cdkAutosizeMaxRows=\"6\"\n rows=\"1\"\n [formControl]=\"valueControl\"></textarea>\n </mat-form-field>\n @if (!readOnly) {\n <button\n class=\"action-icon-button no-density-mat-icon-button\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove item\"\n (click)=\"remove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n }\n @if (!readOnly) {\n <button mat-stroked-button type=\"button\" (click)=\"add()\">\n <mat-icon>add</mat-icon>\n Add item\n </button>\n }\n </div>\n }\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" [mat-dialog-close]>Done</button>\n</div>\n", styles: [".container{width:100%}.container .value-field{display:flex;flex-wrap:nowrap}.container .value-field mat-form-field{flex-grow:1}.container .no-density-mat-icon-button{width:48px;height:48px;padding:12px}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
|
|
2199
2199
|
}
|
|
2200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopOutEditorComponent, decorators: [{
|
|
2201
2201
|
type: Component,
|
|
2202
2202
|
args: [{ selector: "app-popout-editor", imports: [
|
|
2203
2203
|
CdkScrollable,
|
|
@@ -2240,10 +2240,10 @@ class ValueComponent {
|
|
|
2240
2240
|
},
|
|
2241
2241
|
});
|
|
2242
2242
|
}
|
|
2243
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2244
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2243
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueComponent, isStandalone: true, selector: "app-value", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n <div class=\"container\">\n @switch (setting().settingType) {\n @case (SettingType.String) {\n <div class=\"with-validation\">\n @if (valueFormControl().invalid) {\n <span class=\"error\">*</span>\n }\n <input\n type=\"text\"\n placeholder=\"my value\"\n name=\"value\"\n [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n [formControl]=\"valueFormControl()\" />\n <div class=\"expand\" matTooltip=\"Pop-out editor\" (click)=\"popOut()\">\n <mat-icon>height</mat-icon>\n </div>\n </div>\n }\n @case (SettingType.Int) {\n <div class=\"with-validation\">\n @if (valueFormControl().invalid) {\n <span class=\"error\">*</span>\n }\n <input\n type=\"number\"\n placeholder=\"42\"\n name=\"value\"\n appDigitOnly\n [digitOnlyAllowNegatives]=\"true\"\n [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n [formControl]=\"valueFormControl()\" />\n </div>\n }\n @case (SettingType.Double) {\n <div class=\"with-validation\">\n @if (valueFormControl().invalid) {\n <span class=\"error\">*</span>\n }\n <input\n type=\"number\"\n placeholder=\"3.14\"\n name=\"value\"\n inputDisplayNormalizer\n [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n [formControl]=\"valueFormControl()\" />\n </div>\n }\n @case (SettingType.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"value\" [formControl]=\"valueFormControl()\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n </div>\n @if (setting().settingType === SettingType.Boolean) {\n <div class=\"spacer\"></div>\n }\n</div>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:11px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;padding:0 30px 0 5px;min-width:150px;margin:0 3px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.flex .container .invalid{border:1px solid var(--flag-validation-error)}.flex .container .error{color:var(--flag-validation-error);margin-right:5px}.flex .variationId{margin:0 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex;align-items:center}.flex .variationId.bool{margin-left:4px}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.flex .expand mat-icon{transform:rotate(45deg)}.flex .toggle{margin-left:4px}@media(max-width:920px){.flex{margin-right:0!important}.flex .spacer{min-width:1px}}@media(max-width:510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
|
|
2245
2245
|
}
|
|
2246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueComponent, decorators: [{
|
|
2247
2247
|
type: Component,
|
|
2248
2248
|
args: [{ selector: "app-value", imports: [FormsModule, NgClass, ReactiveFormsModule, RxReactiveFormsModule, MatTooltip, MatIcon, DigitOnlyDirective, InputDisplayNormalizerDirective], template: "<div class=\"flex\">\n <div class=\"container\">\n @switch (setting().settingType) {\n @case (SettingType.String) {\n <div class=\"with-validation\">\n @if (valueFormControl().invalid) {\n <span class=\"error\">*</span>\n }\n <input\n type=\"text\"\n placeholder=\"my value\"\n name=\"value\"\n [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n [formControl]=\"valueFormControl()\" />\n <div class=\"expand\" matTooltip=\"Pop-out editor\" (click)=\"popOut()\">\n <mat-icon>height</mat-icon>\n </div>\n </div>\n }\n @case (SettingType.Int) {\n <div class=\"with-validation\">\n @if (valueFormControl().invalid) {\n <span class=\"error\">*</span>\n }\n <input\n type=\"number\"\n placeholder=\"42\"\n name=\"value\"\n appDigitOnly\n [digitOnlyAllowNegatives]=\"true\"\n [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n [formControl]=\"valueFormControl()\" />\n </div>\n }\n @case (SettingType.Double) {\n <div class=\"with-validation\">\n @if (valueFormControl().invalid) {\n <span class=\"error\">*</span>\n }\n <input\n type=\"number\"\n placeholder=\"3.14\"\n name=\"value\"\n inputDisplayNormalizer\n [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n [formControl]=\"valueFormControl()\" />\n </div>\n }\n @case (SettingType.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"value\" [formControl]=\"valueFormControl()\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n </div>\n @if (setting().settingType === SettingType.Boolean) {\n <div class=\"spacer\"></div>\n }\n</div>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:11px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;padding:0 30px 0 5px;min-width:150px;margin:0 3px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.flex .container .invalid{border:1px solid var(--flag-validation-error)}.flex .container .error{color:var(--flag-validation-error);margin-right:5px}.flex .variationId{margin:0 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex;align-items:center}.flex .variationId.bool{margin-left:4px}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.flex .expand mat-icon{transform:rotate(45deg)}.flex .toggle{margin-left:4px}@media(max-width:920px){.flex{margin-right:0!important}.flex .spacer{min-width:1px}}@media(max-width:510px){.flex .container .error{display:none}}\n"] }]
|
|
2249
2249
|
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }] } });
|
|
@@ -2293,10 +2293,10 @@ class RolloutPercentageItemsComponent {
|
|
|
2293
2293
|
this.formGroup().controls.rolloutPercentageItems.markAsDirty();
|
|
2294
2294
|
this.updateSum();
|
|
2295
2295
|
}
|
|
2296
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2296
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2297
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RolloutPercentageItemsComponent, isStandalone: true, selector: "app-rollout-percentage-items", inputs: { settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup()\">\n @if (formGroup().controls.rolloutRules.controls.length > 0) {\n <div class=\"if\">\n <mat-chip-set>\n <mat-chip class=\"chip\">ELSE IF</mat-chip>\n </mat-chip-set>\n </div>\n }\n <div class=\"grow\">\n @for (rolloutPercentageItem of formGroup().controls.rolloutPercentageItems.controls; track $index; let i = $index) {\n <div class=\"percentage-row flex\">\n <div class=\"flex\">\n @if (rolloutPercentageItem.controls.percentage.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <input\n type=\"number\"\n appDigitOnly\n [ngClass]=\"{ invalid: rolloutPercentageItem.controls.percentage.invalid }\"\n [formControl]=\"rolloutPercentageItem.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n %\n <span class=\"users\">\n of\n <a href=\"https://configcat.com/docs/V1/advanced/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </span>\n </div>\n @if (!readOnly() && formGroup().controls.rolloutPercentageItems.controls.length > 2) {\n <div class=\"delete-option\" matTooltip=\"Remove this % option\" (click)=\"removeRolloutPercentageItem(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n @if (\n i === formGroup().controls.rolloutPercentageItems.controls.length - 1 &&\n formGroup().controls.rolloutPercentageItemsSum.invalid\n ) {\n <span matTooltipPosition=\"above\" matTooltip=\"The sum of percentages must be equal to 100.\">\n <mat-icon color=\"warn\">error_outline</mat-icon>\n </span>\n }\n <div class=\"value flex\">\n @if (settingModel().settingType !== SettingType.Boolean) {\n <span class=\"value-name\">Served value:</span>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"value(rolloutPercentageItem)\"\n [setting]=\"settingModel()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".percentage-wrapper{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:var(--flag-delete);cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:var(--flag-v1-chip-background)}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.percentage-row .invalid{border:1px solid var(--flag-validation-error)}.attribute-error{color:var(--flag-validation-error);margin:0 5px}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.users{margin-left:20px}@media(max-width:920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media(max-width:650px){.users{margin-left:5px}}@media(max-width:540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }] }); }
|
|
2298
2298
|
}
|
|
2299
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
|
|
2300
2300
|
type: Component,
|
|
2301
2301
|
args: [{ selector: "app-rollout-percentage-items", imports: [
|
|
2302
2302
|
FormsModule,
|
|
@@ -2322,10 +2322,10 @@ class DeselectDirective {
|
|
|
2322
2322
|
this.host.nativeElement.selectedIndex = -1;
|
|
2323
2323
|
}
|
|
2324
2324
|
}
|
|
2325
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2326
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
2325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DeselectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2326
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: DeselectDirective, isStandalone: true, selector: "[appDeselect]", inputs: { selectedItem: { classPropertyName: "selectedItem", publicName: "appDeselect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2327
2327
|
}
|
|
2328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DeselectDirective, decorators: [{
|
|
2329
2329
|
type: Directive,
|
|
2330
2330
|
args: [{
|
|
2331
2331
|
selector: "[appDeselect]",
|
|
@@ -2510,10 +2510,10 @@ class RolloutRulesComponent {
|
|
|
2510
2510
|
},
|
|
2511
2511
|
});
|
|
2512
2512
|
}
|
|
2513
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RolloutRulesComponent, isStandalone: true, selector: "app-rollout-rules", inputs: { featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"formGroup()\">\n <div\n cdkDropList\n [cdkDropListDisabled]=\"readOnly()\"\n [cdkDropListData]=\"formGroup().controls.rolloutRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (rolloutRule of formGroup().controls.rolloutRules.controls; track $index; let i = $index) {\n <div cdkDrag>\n <div class=\"targeting-row\">\n @if (rolloutRule.controls.type.value === 0) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n <select\n class=\"targeting-select attribute-select\"\n matTooltip=\"Comparison attribute\"\n matTooltipPosition=\"above\"\n [disabled]=\"readOnly()\"\n (change)=\"attributeChanged($event.target, rolloutRule.controls.comparisonAttribute!)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <option [selected]=\"comparisonAttribute === rolloutRule.controls.comparisonAttribute!.value\">\n {{ comparisonAttribute }}\n </option>\n }\n <option\n [selected]=\"\n defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) === -1\n \">\n Custom\n </option>\n </select>\n <span\n class=\"attribute-span\"\n matTooltipPosition=\"above\"\n matTooltip=\"Custom user attribute\"\n [hidden]=\"defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) !== -1\">\n @if (rolloutRule.controls.comparisonAttribute!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <input\n type=\"text\"\n matInput\n class=\"attribute\"\n placeholder=\"e.g. Role, SubscriptionType\"\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonAttribute!.invalid }\"\n [matAutocomplete]=\"auto\"\n [formControl]=\"rolloutRule.controls.comparisonAttribute!\" />\n </span>\n <mat-autocomplete #auto=\"matAutocomplete\">\n @for (option of comparisonAttributes(); track $index) {\n <mat-option [value]=\"option\">\n {{ option }}\n </mat-option>\n }\n </mat-autocomplete>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select\"\n matTooltip=\"Comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.comparator!\"\n (change)=\"comparatorChanged(rolloutRule)\">\n <optgroup label=\"CONFIDENTIAL TEXT\">\n @for (comparator of rolloutRuleComparators.slice(16, 18); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"TEXT\">\n @for (comparator of rolloutRuleComparators.slice(0, 4); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"SEMANTIC VERSION\">\n @for (comparator of rolloutRuleComparators.slice(4, 10); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"NUMBER\">\n @for (comparator of rolloutRuleComparators.slice(10, 16); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n </select>\n <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n <a\n href=\"https://configcat.com/docs/V1/advanced/targeting/#comparator\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n <mat-icon class=\"icon-transform-rotate\">info</mat-icon>\n </a>\n </div>\n </div>\n <div class=\"comparison-value\">\n @if (rolloutRule.controls.comparisonValue!.invalid) {\n <span class=\"error\">*</span>\n }\n <input\n matTooltip=\"Comparison value\"\n matTooltipPosition=\"above\"\n inputDisplayNormalizer\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonValue!.invalid }\"\n [formControl]=\"rolloutRule.controls.comparisonValue!\"\n [type]=\"getComparisonValueType(rolloutRule)\"\n [placeholder]=\"getPlaceHolder(rolloutRule)\" />\n @if (getComparisonValueType(rolloutRule) === \"text\") {\n <div\n class=\"expand\"\n matTooltip=\"Pop-out editor\"\n matTooltipPosition=\"above\"\n (click)=\"popOut(rolloutRule)\">\n <mat-icon>height</mat-icon>\n </div>\n }\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n @if (rolloutRule.controls.type.value === 1) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltipPosition=\"above\" matTooltip=\"Drag here to reorder\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select segment-comparator\"\n matTooltip=\"Segment comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.segmentComparator!\">\n @for (comparator of segmentComparators; track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"select-wrapper\">\n <div class=\"segment-select-more\">\n @if (rolloutRule.controls.segmentId!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <select\n class=\"targeting-select segment-select invalid\"\n matTooltip=\"Segment\"\n matTooltipPosition=\"above\"\n [appDeselect]=\"rolloutRule.controls.segmentId!.value\"\n [formControl]=\"rolloutRule.controls.segmentId!\"\n [ngClass]=\"{ invalid: rolloutRule.controls.segmentId!.invalid }\">\n @for (segment of segments(); track $index) {\n <option [ngValue]=\"segment.segmentId\" [title]=\"segment.description\">\n {{ segment.name }}\n </option>\n } @empty {\n <option disabled>no segments available</option>\n }\n </select>\n </div>\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n <div class=\"value flex\">\n @if (settingModel().settingType !== SettingType.Boolean) {\n <div class=\"serve\">\n <mat-chip-set>\n <mat-chip class=\"chip\">Serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"rolloutRule.controls.value\"\n [setting]=\"settingModel()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:var(--flag-v1-rule-hover-background)}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:var(--input-background);height:18px;width:18px}.targeting-row .info a{color:var(--info-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:var(--input-background)}.targeting-row .warn a{color:var(--warn-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .warn a:hover{opacity:1}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .segment-select-more{display:flex;flex-wrap:nowrap;align-items:center}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{background-color:var(--flag-v1-chip-background)}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:170px;flex-grow:100;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid var(--flag-validation-error)}.fields .attribute-error{color:var(--flag-validation-error);margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{cursor:pointer;font-size:16px;height:16px;width:16px;color:var(--action-icon-button-color);margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:var(--flag-validation-error);margin:0 5px}.fields .comparison-value input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.fields .comparison-value .invalid{border:1px solid var(--flag-validation-error)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{background-color:var(--flag-v1-chip-background)}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}.expand{position:relative;right:2px;font-size:8px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.expand mat-icon{transform:rotate(45deg)}.targeting-select{margin-left:.5em;width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);height:30px;min-height:30px;line-height:30px;min-width:170px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-size:12px}@media(max-width:1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}.targeting-row .segment-select-more{margin:7px 0 0 7px}}@media(max-width:920px){.value .served-value{margin:3px 7px 3px 0}}@media(max-width:410px){.value .served-value{margin:7px 7px 3px 4px}}@media(max-width:510px){.fields .comparison-value .error{display:none}}@media(max-width:650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .targeting-select{margin:7px 7px 0}.targeting-row .fields .segment-more{margin-top:6px}.targeting-row .fields .segment-select-more{margin:0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DeselectDirective, selector: "[appDeselect]", inputs: ["appDeselect"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }] }); }
|
|
2513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RolloutRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RolloutRulesComponent, isStandalone: true, selector: "app-rollout-rules", inputs: { featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"formGroup()\">\n <div\n cdkDropList\n [cdkDropListDisabled]=\"readOnly()\"\n [cdkDropListData]=\"formGroup().controls.rolloutRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (rolloutRule of formGroup().controls.rolloutRules.controls; track $index; let i = $index) {\n <div cdkDrag>\n <div class=\"targeting-row\">\n @if (rolloutRule.controls.type.value === 0) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n <select\n class=\"targeting-select attribute-select\"\n matTooltip=\"Comparison attribute\"\n matTooltipPosition=\"above\"\n [disabled]=\"readOnly()\"\n (change)=\"attributeChanged($event.target, rolloutRule.controls.comparisonAttribute!)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <option [selected]=\"comparisonAttribute === rolloutRule.controls.comparisonAttribute!.value\">\n {{ comparisonAttribute }}\n </option>\n }\n <option\n [selected]=\"\n defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) === -1\n \">\n Custom\n </option>\n </select>\n <span\n class=\"attribute-span\"\n matTooltipPosition=\"above\"\n matTooltip=\"Custom user attribute\"\n [hidden]=\"defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) !== -1\">\n @if (rolloutRule.controls.comparisonAttribute!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <input\n type=\"text\"\n matInput\n class=\"attribute\"\n placeholder=\"e.g. Role, SubscriptionType\"\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonAttribute!.invalid }\"\n [matAutocomplete]=\"auto\"\n [formControl]=\"rolloutRule.controls.comparisonAttribute!\" />\n </span>\n <mat-autocomplete #auto=\"matAutocomplete\">\n @for (option of comparisonAttributes(); track $index) {\n <mat-option [value]=\"option\">\n {{ option }}\n </mat-option>\n }\n </mat-autocomplete>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select\"\n matTooltip=\"Comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.comparator!\"\n (change)=\"comparatorChanged(rolloutRule)\">\n <optgroup label=\"CONFIDENTIAL TEXT\">\n @for (comparator of rolloutRuleComparators.slice(16, 18); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"TEXT\">\n @for (comparator of rolloutRuleComparators.slice(0, 4); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"SEMANTIC VERSION\">\n @for (comparator of rolloutRuleComparators.slice(4, 10); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"NUMBER\">\n @for (comparator of rolloutRuleComparators.slice(10, 16); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n </select>\n <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n <a\n href=\"https://configcat.com/docs/V1/advanced/targeting/#comparator\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n <mat-icon class=\"icon-transform-rotate\">info</mat-icon>\n </a>\n </div>\n </div>\n <div class=\"comparison-value\">\n @if (rolloutRule.controls.comparisonValue!.invalid) {\n <span class=\"error\">*</span>\n }\n <input\n matTooltip=\"Comparison value\"\n matTooltipPosition=\"above\"\n inputDisplayNormalizer\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonValue!.invalid }\"\n [formControl]=\"rolloutRule.controls.comparisonValue!\"\n [type]=\"getComparisonValueType(rolloutRule)\"\n [placeholder]=\"getPlaceHolder(rolloutRule)\" />\n @if (getComparisonValueType(rolloutRule) === \"text\") {\n <div\n class=\"expand\"\n matTooltip=\"Pop-out editor\"\n matTooltipPosition=\"above\"\n (click)=\"popOut(rolloutRule)\">\n <mat-icon>height</mat-icon>\n </div>\n }\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n @if (rolloutRule.controls.type.value === 1) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltipPosition=\"above\" matTooltip=\"Drag here to reorder\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select segment-comparator\"\n matTooltip=\"Segment comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.segmentComparator!\">\n @for (comparator of segmentComparators; track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"select-wrapper\">\n <div class=\"segment-select-more\">\n @if (rolloutRule.controls.segmentId!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <select\n class=\"targeting-select segment-select invalid\"\n matTooltip=\"Segment\"\n matTooltipPosition=\"above\"\n [appDeselect]=\"rolloutRule.controls.segmentId!.value\"\n [formControl]=\"rolloutRule.controls.segmentId!\"\n [ngClass]=\"{ invalid: rolloutRule.controls.segmentId!.invalid }\">\n @for (segment of segments(); track $index) {\n <option [ngValue]=\"segment.segmentId\" [title]=\"segment.description\">\n {{ segment.name }}\n </option>\n } @empty {\n <option disabled>no segments available</option>\n }\n </select>\n </div>\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n <div class=\"value flex\">\n @if (settingModel().settingType !== SettingType.Boolean) {\n <div class=\"serve\">\n <mat-chip-set>\n <mat-chip class=\"chip\">Serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"rolloutRule.controls.value\"\n [setting]=\"settingModel()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:var(--flag-v1-rule-hover-background)}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:var(--input-background);height:18px;width:18px}.targeting-row .info a{color:var(--info-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:var(--input-background)}.targeting-row .warn a{color:var(--warn-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .warn a:hover{opacity:1}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .segment-select-more{display:flex;flex-wrap:nowrap;align-items:center}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{background-color:var(--flag-v1-chip-background)}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:170px;flex-grow:100;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid var(--flag-validation-error)}.fields .attribute-error{color:var(--flag-validation-error);margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{cursor:pointer;font-size:16px;height:16px;width:16px;color:var(--action-icon-button-color);margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:var(--flag-validation-error);margin:0 5px}.fields .comparison-value input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.fields .comparison-value .invalid{border:1px solid var(--flag-validation-error)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{background-color:var(--flag-v1-chip-background)}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}.expand{position:relative;right:2px;font-size:8px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.expand mat-icon{transform:rotate(45deg)}.targeting-select{margin-left:.5em;width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);height:30px;min-height:30px;line-height:30px;min-width:170px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-size:12px}@media(max-width:1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}.targeting-row .segment-select-more{margin:7px 0 0 7px}}@media(max-width:920px){.value .served-value{margin:3px 7px 3px 0}}@media(max-width:410px){.value .served-value{margin:7px 7px 3px 4px}}@media(max-width:510px){.fields .comparison-value .error{display:none}}@media(max-width:650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .targeting-select{margin:7px 7px 0}.targeting-row .fields .segment-more{margin-top:6px}.targeting-row .fields .segment-select-more{margin:0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DeselectDirective, selector: "[appDeselect]", inputs: ["appDeselect"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }] }); }
|
|
2515
2515
|
}
|
|
2516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RolloutRulesComponent, decorators: [{
|
|
2517
2517
|
type: Component,
|
|
2518
2518
|
args: [{ selector: "app-rollout-rules", imports: [
|
|
2519
2519
|
FormsModule,
|
|
@@ -2638,10 +2638,10 @@ class SettingComponent {
|
|
|
2638
2638
|
+ "?settingId="
|
|
2639
2639
|
+ this.model().setting.settingId);
|
|
2640
2640
|
}
|
|
2641
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SettingComponent, isStandalone: true, selector: "app-setting", inputs: { dashboardBasePath: { classPropertyName: "dashboardBasePath", publicName: "dashboardBasePath", isSignal: true, isRequired: false, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached" }, ngImport: i0, template: "@let settingModel = model();\n\n<div class=\"setting-container\">\n <div class=\"setting-full\" [formGroup]=\"formGroup()\">\n <div class=\"berries\">\n @if (canDeleteSetting()) {\n <div class=\"berry delete\" matTooltip=\"Delete feature flag\" data-robot=\"deleteSetting\" (click)=\"deleteSetting()\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n <div class=\"setting-header flex\">\n <div class=\"setting-name flex\">\n <div class=\"name\" data-robot=\"settingName\">\n {{ settingModel.setting.name }}\n @if (showEnvironmentName()) {\n <span class=\"environment-name\">({{ settingModel.environment.name }})</span>\n }\n </div>\n </div>\n </div>\n <div class=\"setting-content\">\n <div class=\"setting-details\">\n <div class=\"setting-key\">\n <code data-robot=\"settingKey\">{{ settingModel.setting.key }}</code>\n </div>\n @if (settingModel.setting.hint) {\n <span class=\"description\">{{ settingModel.setting.hint }}</span>\n }\n <div class=\"integrations\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">Open in ConfigCat</a>\n </div>\n </div>\n\n <div class=\"rules-list\">\n <div class=\"rollout-rules\">\n @if (formGroup().controls.rolloutRules.controls.length !== 0) {\n <app-rollout-rules\n [formGroup]=\"formGroup()\"\n [segments]=\"segments()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n </div>\n\n @if (formGroup().controls.rolloutPercentageItems.controls.length !== 0) {\n <app-rollout-percentage-items\n [formGroup]=\"formGroup()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n\n <div class=\"all-other flex\">\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length !== 0\n ) {\n <div\n matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (formGroup().controls.rolloutPercentageItems.length !== 0) {\n <div\n matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length === 0\n ) {\n <div>\n <mat-chip-set>\n <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"formGroup().controls.value\"\n [setting]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n <div class=\"buttons\">\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target specific users\" : \"Add new targeting rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addSegmentRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target segment\" : \"Add new segment rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button\n type=\"button\"\n class=\"targeting-button\"\n [disabled]=\"\n settingModel.setting.settingType === SettingType.Boolean &&\n formGroup().controls.rolloutPercentageItems.length !== 0\n \"\n (click)=\"addRolloutPercentageItem()\">\n {{ formGroup().controls.rolloutPercentageItems.length === 0 ? \"Target % of users\" : \"Add % option\" }}\n </button>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".setting-container{display:flex;flex-wrap:nowrap}.colorbar{min-width:10px;opacity:var(--environment-color-opacity)}.setting-full{width:calc(100% - 10px);position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;border:1px solid var(--flag-v1-box-border);background-color:var(--flag-v1-box-background)}.setting-full .berries{position:absolute;right:-10px;top:-10px;display:flex}.setting-full .berry{margin-left:3px;cursor:pointer;background-color:var(--page-background-color);height:20px;width:20px;border-radius:50%}.setting-full .berry mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .berry:hover mat-icon{opacity:1}.setting-full .delete{color:var(--flag-delete)}.setting-full .edit mat-icon{padding-left:1px}.setting-full .code mat-icon{padding-left:1px}.setting-full .reverse-berry{display:flex;align-items:center;justify-content:center;color:var(--flag-v1-colored-berry)}.setting-full .reverse-berry .berry-container{display:flex;align-items:center;justify-content:center;height:17px;width:17px;border-radius:50%;background-color:var(--flag-v1-colored-berry-background);opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .reverse-berry .berry-container:hover{opacity:1}.setting-full .reverse-berry .berry-container mat-icon{font-size:15px;height:15px;width:15px;opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;margin-right:4px;max-width:100%;font-size:14px}.setting-full .setting-header .setting-name .environment-name{font-weight:400;font-size:14px;padding-top:4px;margin-right:12px;overflow:hidden;text-overflow:ellipsis}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:10px;color:var(--flag-meta)}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word;background-color:var(--flag-v1-key-background);color:var(--text-color);padding:3px 6px;font-size:14px}.setting-full .setting-content .setting-details .setting-key>code{background-color:var(--flag-v1-key-background)}.setting-full .setting-content .setting-details .description{font-size:11px;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;height:26px!important}.setting-full .all-other{min-height:40px;justify-content:flex-start;border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;padding:4px 0 4px .5em}.setting-full .all-other .chip{background-color:var(--flag-v1-chip-background)}.setting-full .all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:10px;margin-left:auto;margin-right:12px;color:var(--flag-meta);display:flex;align-items:center}.buttons .updated-date .history{margin-left:8px}.buttons .updated-date .history mat-icon{font-size:1.8em}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}.watch-wrapper .status{font-size:.7rem}.watch-wrapper .watch{position:relative;display:inline-block;padding:2px 4px;border:1px solid var(--flag-v1-box-border);font-size:.8rem;cursor:pointer;margin-left:3px}.watch-wrapper .watch:hover{background-color:var(--flag-v1-key-background);cursor:pointer}.watch-wrapper .watch:hover .stale-settings{display:inline-block}.watch-wrapper .watch .mat-icon{font-size:15px;height:15px;width:15px;vertical-align:middle}.tags{font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.tags .tag-container{position:relative;max-width:100%;min-width:0}.tags .tag-container:hover .delete-tag{display:block}.tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-v1-box-background);display:none;height:14px;width:14px;border-radius:50%;right:-6px;top:-7px;z-index:1}.tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:.7}.tags .delete-tag:hover mat-icon{opacity:1}.tags .add-tag{border:1px dashed var(--input-border-color);color:var(--flag-meta);padding:2px 4px}.tags .add-tag:hover{background-color:var(--flag-v1-key-background);cursor:pointer}@media(max-width:1200px){.setting-details{width:300px!important}}@media(max-width:920px){.setting-full{width:calc(100% - 5px)}.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}.targeting-button{background-color:var(--flag-v1-targeting-button-background);color:var(--flag-v1-targeting-button);cursor:pointer;text-transform:uppercase;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;border-radius:2px;font-size:.75rem;border:1px solid var(--flag-v1-box-border);box-shadow:none;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;margin:0 .2rem}.targeting-button:hover{background-color:var(--flag-v1-targeting-button-hover-background)}.targeting-button:disabled{background-color:var(--flag-v1-targeting-button-disabled-background);color:var(--flag-v1-targeting-button-disabled);cursor:auto}@media(max-width:380px){.targeting-button{font-size:.65rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RolloutRulesComponent, selector: "app-rollout-rules", inputs: ["featureFlagLimitations", "formGroup", "settingModel", "readOnly", "segments"] }, { kind: "component", type: RolloutPercentageItemsComponent, selector: "app-rollout-percentage-items", inputs: ["settingModel", "formGroup", "featureFlagLimitations", "readOnly"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }] }); }
|
|
2641
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SettingComponent, isStandalone: true, selector: "app-setting", inputs: { dashboardBasePath: { classPropertyName: "dashboardBasePath", publicName: "dashboardBasePath", isSignal: true, isRequired: false, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached" }, ngImport: i0, template: "@let settingModel = model();\n\n<div class=\"setting-container\">\n <div class=\"setting-full\" [formGroup]=\"formGroup()\">\n <div class=\"berries\">\n @if (canDeleteSetting()) {\n <div class=\"berry delete\" matTooltip=\"Delete feature flag\" data-robot=\"deleteSetting\" (click)=\"deleteSetting()\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n <div class=\"setting-header flex\">\n <div class=\"setting-name flex\">\n <div class=\"name\" data-robot=\"settingName\">\n {{ settingModel.setting.name }}\n @if (showEnvironmentName()) {\n <span class=\"environment-name\">({{ settingModel.environment.name }})</span>\n }\n </div>\n </div>\n </div>\n <div class=\"setting-content\">\n <div class=\"setting-details\">\n <div class=\"setting-key\">\n <code data-robot=\"settingKey\">{{ settingModel.setting.key }}</code>\n </div>\n @if (settingModel.setting.hint) {\n <span class=\"description\">{{ settingModel.setting.hint }}</span>\n }\n <div class=\"integrations\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">Open in ConfigCat</a>\n </div>\n </div>\n\n <div class=\"rules-list\">\n <div class=\"rollout-rules\">\n @if (formGroup().controls.rolloutRules.controls.length !== 0) {\n <app-rollout-rules\n [formGroup]=\"formGroup()\"\n [segments]=\"segments()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n </div>\n\n @if (formGroup().controls.rolloutPercentageItems.controls.length !== 0) {\n <app-rollout-percentage-items\n [formGroup]=\"formGroup()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n\n <div class=\"all-other flex\">\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length !== 0\n ) {\n <div\n matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (formGroup().controls.rolloutPercentageItems.length !== 0) {\n <div\n matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length === 0\n ) {\n <div>\n <mat-chip-set>\n <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"formGroup().controls.value\"\n [setting]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n <div class=\"buttons\">\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target specific users\" : \"Add new targeting rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addSegmentRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target segment\" : \"Add new segment rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button\n type=\"button\"\n class=\"targeting-button\"\n [disabled]=\"\n settingModel.setting.settingType === SettingType.Boolean &&\n formGroup().controls.rolloutPercentageItems.length !== 0\n \"\n (click)=\"addRolloutPercentageItem()\">\n {{ formGroup().controls.rolloutPercentageItems.length === 0 ? \"Target % of users\" : \"Add % option\" }}\n </button>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".setting-container{display:flex;flex-wrap:nowrap}.colorbar{min-width:10px;opacity:var(--environment-color-opacity)}.setting-full{width:calc(100% - 10px);position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;border:1px solid var(--flag-v1-box-border);background-color:var(--flag-v1-box-background)}.setting-full .berries{position:absolute;right:-10px;top:-10px;display:flex}.setting-full .berry{margin-left:3px;cursor:pointer;background-color:var(--page-background-color);height:20px;width:20px;border-radius:50%}.setting-full .berry mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .berry:hover mat-icon{opacity:1}.setting-full .delete{color:var(--flag-delete)}.setting-full .edit mat-icon{padding-left:1px}.setting-full .code mat-icon{padding-left:1px}.setting-full .reverse-berry{display:flex;align-items:center;justify-content:center;color:var(--flag-v1-colored-berry)}.setting-full .reverse-berry .berry-container{display:flex;align-items:center;justify-content:center;height:17px;width:17px;border-radius:50%;background-color:var(--flag-v1-colored-berry-background);opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .reverse-berry .berry-container:hover{opacity:1}.setting-full .reverse-berry .berry-container mat-icon{font-size:15px;height:15px;width:15px;opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;margin-right:4px;max-width:100%;font-size:14px}.setting-full .setting-header .setting-name .environment-name{font-weight:400;font-size:14px;padding-top:4px;margin-right:12px;overflow:hidden;text-overflow:ellipsis}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:10px;color:var(--flag-meta)}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word;background-color:var(--flag-v1-key-background);color:var(--text-color);padding:3px 6px;font-size:14px}.setting-full .setting-content .setting-details .setting-key>code{background-color:var(--flag-v1-key-background)}.setting-full .setting-content .setting-details .description{font-size:11px;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;height:26px!important}.setting-full .all-other{min-height:40px;justify-content:flex-start;border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;padding:4px 0 4px .5em}.setting-full .all-other .chip{background-color:var(--flag-v1-chip-background)}.setting-full .all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:10px;margin-left:auto;margin-right:12px;color:var(--flag-meta);display:flex;align-items:center}.buttons .updated-date .history{margin-left:8px}.buttons .updated-date .history mat-icon{font-size:1.8em}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}.watch-wrapper .status{font-size:.7rem}.watch-wrapper .watch{position:relative;display:inline-block;padding:2px 4px;border:1px solid var(--flag-v1-box-border);font-size:.8rem;cursor:pointer;margin-left:3px}.watch-wrapper .watch:hover{background-color:var(--flag-v1-key-background);cursor:pointer}.watch-wrapper .watch:hover .stale-settings{display:inline-block}.watch-wrapper .watch .mat-icon{font-size:15px;height:15px;width:15px;vertical-align:middle}.tags{font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.tags .tag-container{position:relative;max-width:100%;min-width:0}.tags .tag-container:hover .delete-tag{display:block}.tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-v1-box-background);display:none;height:14px;width:14px;border-radius:50%;right:-6px;top:-7px;z-index:1}.tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:.7}.tags .delete-tag:hover mat-icon{opacity:1}.tags .add-tag{border:1px dashed var(--input-border-color);color:var(--flag-meta);padding:2px 4px}.tags .add-tag:hover{background-color:var(--flag-v1-key-background);cursor:pointer}@media(max-width:1200px){.setting-details{width:300px!important}}@media(max-width:920px){.setting-full{width:calc(100% - 5px)}.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}.targeting-button{background-color:var(--flag-v1-targeting-button-background);color:var(--flag-v1-targeting-button);cursor:pointer;text-transform:uppercase;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;border-radius:2px;font-size:.75rem;border:1px solid var(--flag-v1-box-border);box-shadow:none;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;margin:0 .2rem}.targeting-button:hover{background-color:var(--flag-v1-targeting-button-hover-background)}.targeting-button:disabled{background-color:var(--flag-v1-targeting-button-disabled-background);color:var(--flag-v1-targeting-button-disabled);cursor:auto}@media(max-width:380px){.targeting-button{font-size:.65rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RolloutRulesComponent, selector: "app-rollout-rules", inputs: ["featureFlagLimitations", "formGroup", "settingModel", "readOnly", "segments"] }, { kind: "component", type: RolloutPercentageItemsComponent, selector: "app-rollout-percentage-items", inputs: ["settingModel", "formGroup", "featureFlagLimitations", "readOnly"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }] }); }
|
|
2643
2643
|
}
|
|
2644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2644
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingComponent, decorators: [{
|
|
2645
2645
|
type: Component,
|
|
2646
2646
|
args: [{ selector: "app-setting", imports: [
|
|
2647
2647
|
FormsModule,
|
|
@@ -2856,12 +2856,12 @@ class SettingListComponent {
|
|
|
2856
2856
|
this.saveFailed.emit(new Error("Concurent Delete Error."));
|
|
2857
2857
|
});
|
|
2858
2858
|
}
|
|
2859
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2860
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2859
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2860
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SettingListComponent, isStandalone: true, selector: "app-setting-list", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, dashboardBasePath: { classPropertyName: "dashboardBasePath", publicName: "dashboardBasePath", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, onSave: { classPropertyName: "onSave", publicName: "onSave", isSignal: true, isRequired: true, transformFunction: null }, loadSettingValues: { classPropertyName: "loadSettingValues", publicName: "loadSettingValues", isSignal: true, isRequired: true, transformFunction: null }, loadSegments: { classPropertyName: "loadSegments", publicName: "loadSegments", isSignal: true, isRequired: true, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadSucceeded: "loadSucceeded", deleteSettingRequested: "deleteSettingRequested", formValuesChanged: "formValuesChanged", saveFailed: "saveFailed" }, usesOnChanges: true, ngImport: i0, template: "@if (!loading) {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n @for (settingValueFromGroup of formGroup!.controls.settingValues.controls; track $index; let i = $index) {\n <div class=\"wrapper\">\n <div class=\"size-obs\" [style.display]=\"'block'\">\n <div>\n <app-setting\n [formGroup]=\"settingValueFromGroup\"\n [readOnly]=\"readOnly\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [deleteSettingText]=\"deleteSettingText()\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [model]=\"settingValues!.settingValues[i]\"\n [segments]=\"segments\"\n [productId]=\"productId()\"\n [configId]=\"configId()\"\n [environmentId]=\"environmentId()\"\n [dashboardBasePath]=\"dashboardBasePath()\"\n [featureFlagLimitations]=\"settingValues!.featureFlagLimitations\"\n (subscriptionLimitReached)=\"onSubscriptionLimitReached()\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" />\n </div>\n </div>\n </div>\n }\n @if (!readOnly && formGroup.dirty) {\n <div class=\"save\">\n <button\n class=\"save-button\"\n mat-flat-button\n color=\"warn\"\n type=\"submit\"\n [disabled]=\"submitting || !formGroup.valid\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button\n type=\"button\"\n class=\"revert-button\"\n mat-stroked-button\n [disabled]=\"submitting || !formGroup.valid\"\n (click)=\"revert()\">\n <span>Revert</span>\n </button>\n @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n <div class=\"feedback\">\n @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>\n Something went wrong and we could not save your settings. You can try again or\n <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n </span>\n </div>\n }\n @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>Oh no! A feature flag has invalid or missing data.</span>\n </div>\n }\n </div>\n }\n </div>\n }\n </form>\n}\n", styles: [".wrapper{margin:1rem 0;padding:0 .5rem}.size-obs .hidden{display:none}.size-obs .visible{display:block}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem 0 .5rem 12px;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999}.save .save-button{animation:shadow-pulse 1s 3}.save .save-button:disabled{animation:none}.save>*{margin:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.error a{color:var(--flag-validation-error);text-decoration:underline}@media(max-width:700px){.save{padding:.5rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: SettingComponent, selector: "app-setting", inputs: ["dashboardBasePath", "productId", "environmentId", "configId", "featureFlagLimitations", "formGroup", "readOnly", "canDeleteSetting", "deleteSettingText", "showEnvironmentName", "segments", "model"], outputs: ["deleteSettingRequested", "subscriptionLimitReached"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
2861
2861
|
}
|
|
2862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingListComponent, decorators: [{
|
|
2863
2863
|
type: Component,
|
|
2864
|
-
args: [{ selector: "app-setting-list", imports: [FormsModule, ReactiveFormsModule, RxReactiveFormsModule, SettingComponent, MatButton, MatIcon], template: "@if (!loading) {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n @for (settingValueFromGroup of formGroup!.controls.settingValues.controls; track $index; let i = $index) {\n <div class=\"wrapper\">\n <div class=\"size-obs\" [style.display]=\"'block'\">\n <div>\n <app-setting\n [formGroup]=\"settingValueFromGroup\"\n [readOnly]=\"readOnly\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [deleteSettingText]=\"deleteSettingText()\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [model]=\"settingValues!.settingValues[i]\"\n [segments]=\"segments\"\n [productId]=\"productId()\"\n [configId]=\"configId()\"\n [environmentId]=\"environmentId()\"\n [dashboardBasePath]=\"dashboardBasePath()\"\n [featureFlagLimitations]=\"settingValues!.featureFlagLimitations\"\n (subscriptionLimitReached)=\"onSubscriptionLimitReached()\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" />\n </div>\n </div>\n </div>\n }\n @if (!readOnly &&
|
|
2864
|
+
args: [{ selector: "app-setting-list", imports: [FormsModule, ReactiveFormsModule, RxReactiveFormsModule, SettingComponent, MatButton, MatIcon], template: "@if (!loading) {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n @for (settingValueFromGroup of formGroup!.controls.settingValues.controls; track $index; let i = $index) {\n <div class=\"wrapper\">\n <div class=\"size-obs\" [style.display]=\"'block'\">\n <div>\n <app-setting\n [formGroup]=\"settingValueFromGroup\"\n [readOnly]=\"readOnly\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [deleteSettingText]=\"deleteSettingText()\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [model]=\"settingValues!.settingValues[i]\"\n [segments]=\"segments\"\n [productId]=\"productId()\"\n [configId]=\"configId()\"\n [environmentId]=\"environmentId()\"\n [dashboardBasePath]=\"dashboardBasePath()\"\n [featureFlagLimitations]=\"settingValues!.featureFlagLimitations\"\n (subscriptionLimitReached)=\"onSubscriptionLimitReached()\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" />\n </div>\n </div>\n </div>\n }\n @if (!readOnly && formGroup.dirty) {\n <div class=\"save\">\n <button\n class=\"save-button\"\n mat-flat-button\n color=\"warn\"\n type=\"submit\"\n [disabled]=\"submitting || !formGroup.valid\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button\n type=\"button\"\n class=\"revert-button\"\n mat-stroked-button\n [disabled]=\"submitting || !formGroup.valid\"\n (click)=\"revert()\">\n <span>Revert</span>\n </button>\n @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n <div class=\"feedback\">\n @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>\n Something went wrong and we could not save your settings. You can try again or\n <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n </span>\n </div>\n }\n @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>Oh no! A feature flag has invalid or missing data.</span>\n </div>\n }\n </div>\n }\n </div>\n }\n </form>\n}\n", styles: [".wrapper{margin:1rem 0;padding:0 .5rem}.size-obs .hidden{display:none}.size-obs .visible{display:block}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem 0 .5rem 12px;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999}.save .save-button{animation:shadow-pulse 1s 3}.save .save-button:disabled{animation:none}.save>*{margin:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.error a{color:var(--flag-validation-error);text-decoration:underline}@media(max-width:700px){.save{padding:.5rem 0}}\n"] }]
|
|
2865
2865
|
}], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], dashboardBasePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardBasePath", required: false }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], onSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSave", required: true }] }], loadSettingValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadSettingValues", required: true }] }], loadSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadSegments", required: true }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }], saveFailed: [{ type: i0.Output, args: ["saveFailed"] }] } });
|
|
2866
2866
|
|
|
2867
2867
|
class SettingItemComponent extends BaseComponent {
|
|
@@ -2945,10 +2945,10 @@ class SettingItemComponent extends BaseComponent {
|
|
|
2945
2945
|
onFormValuesChanged() {
|
|
2946
2946
|
this.formValuesChanged.emit();
|
|
2947
2947
|
}
|
|
2948
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
2948
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SettingItemComponent, isStandalone: true, selector: "app-setting-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<app-setting-list\n [canDeleteSetting]=\"canDeleteSetting()\"\n [onSave]=\"handleSave\"\n [loadSettingValues]=\"loadSettingValues\"\n [loadSegments]=\"loadSegments\"\n [deleteSettingText]=\"deleteSettingText()\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [productId]=\"productId()\"\n [configId]=\"configId()\"\n [environmentId]=\"environmentId()\"\n [dashboardBasePath]=\"dashboardBasePath\"\n (loadSucceeded)=\"itemLoadSucceeded()\"\n (saveFailed)=\"itenSaveFailed($event)\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "app-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged", "saveFailed"] }] }); }
|
|
2950
2950
|
}
|
|
2951
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingItemComponent, decorators: [{
|
|
2952
2952
|
type: Component,
|
|
2953
2953
|
args: [{ selector: "app-setting-item", imports: [SettingListComponent], template: "<app-setting-list\n [canDeleteSetting]=\"canDeleteSetting()\"\n [onSave]=\"handleSave\"\n [loadSettingValues]=\"loadSettingValues\"\n [loadSegments]=\"loadSegments\"\n [deleteSettingText]=\"deleteSettingText()\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [productId]=\"productId()\"\n [configId]=\"configId()\"\n [environmentId]=\"environmentId()\"\n [dashboardBasePath]=\"dashboardBasePath\"\n (loadSucceeded)=\"itemLoadSucceeded()\"\n (saveFailed)=\"itenSaveFailed($event)\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"] }]
|
|
2954
2954
|
}], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], saveFailed: [{ type: i0.Output, args: ["saveFailed"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
|
|
@@ -2990,10 +2990,10 @@ class AuthorizationComponent {
|
|
|
2990
2990
|
getPublicApiUrl() {
|
|
2991
2991
|
return this.publicApiService.getDashboardBasePath() + "/my-account/public-api-credentials";
|
|
2992
2992
|
}
|
|
2993
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2993
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthorizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2994
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AuthorizationComponent, isStandalone: true, selector: "app-authorization", inputs: { basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, integrationName: { classPropertyName: "integrationName", publicName: "integrationName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { authorized: "authorized", authorizationError: "authorizationError" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <div class=\"container\">\n <div class=\"form\">\n <p>\n In order to use {{ integrationName() }} you have to authorize first with your ConfigCat Public API credentials.\n </p>\n <ul>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getPublicApiUrl()\">\n Get your Basic Auth user name and password\n </a>\n to access ConfigCat Public API.\n <br />\n <b>Note!</b>\n Your ConfigCat account's email address and password will not work here.\n </li>\n <li>Type your credentials here and click the Authorize button.</li>\n </ul>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Basic auth user name</mat-label>\n <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\" />\n @if (formGroup.controls.basicAuthUsername.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Basic auth password</mat-label>\n <input\n matInput\n placeholder=\"Basic auth password\"\n formControlName=\"basicAuthPassword\"\n type=\"password\"\n autocomplete=\"current-password\" />\n @if (formGroup.controls.basicAuthPassword.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword) }}\n </mat-error>\n }\n </mat-form-field>\n <div>\n <button mat-flat-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n @if (formGroup.invalid && formGroup.errors && formGroup.errors[\"invalidAuthorization\"]) {\n <mat-error>\n {{ formGroup.errors[\"invalidAuthorization\"] }}\n </mat-error>\n }\n </div>\n </div>\n </div>\n</form>\n", styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
2995
2995
|
}
|
|
2996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2996
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthorizationComponent, decorators: [{
|
|
2997
2997
|
type: Component,
|
|
2998
2998
|
args: [{ selector: "app-authorization", imports: [FormsModule, ReactiveFormsModule, RxReactiveFormsModule, MatFormField, MatLabel, MatInput, MatError, MatButton], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <div class=\"container\">\n <div class=\"form\">\n <p>\n In order to use {{ integrationName() }} you have to authorize first with your ConfigCat Public API credentials.\n </p>\n <ul>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getPublicApiUrl()\">\n Get your Basic Auth user name and password\n </a>\n to access ConfigCat Public API.\n <br />\n <b>Note!</b>\n Your ConfigCat account's email address and password will not work here.\n </li>\n <li>Type your credentials here and click the Authorize button.</li>\n </ul>\n\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Basic auth user name</mat-label>\n <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\" />\n @if (formGroup.controls.basicAuthUsername.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Basic auth password</mat-label>\n <input\n matInput\n placeholder=\"Basic auth password\"\n formControlName=\"basicAuthPassword\"\n type=\"password\"\n autocomplete=\"current-password\" />\n @if (formGroup.controls.basicAuthPassword.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword) }}\n </mat-error>\n }\n </mat-form-field>\n <div>\n <button mat-flat-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n @if (formGroup.invalid && formGroup.errors && formGroup.errors[\"invalidAuthorization\"]) {\n <mat-error>\n {{ formGroup.errors[\"invalidAuthorization\"] }}\n </mat-error>\n }\n </div>\n </div>\n </div>\n</form>\n", styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"] }]
|
|
2999
2999
|
}], propDecorators: { basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], integrationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "integrationName", required: false }] }], authorized: [{ type: i0.Output, args: ["authorized"] }], authorizationError: [{ type: i0.Output, args: ["authorizationError"] }] } });
|
|
@@ -3007,10 +3007,10 @@ class BaseSelectComponent extends BaseComponent {
|
|
|
3007
3007
|
openChanged(event) {
|
|
3008
3008
|
this.dropdownOpened.emit(event);
|
|
3009
3009
|
}
|
|
3010
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3011
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
3010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BaseSelectComponent, isStandalone: true, selector: "app-base-select", inputs: { customDropdown: { classPropertyName: "customDropdown", publicName: "customDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownOpened: "dropdownOpened" }, usesInheritance: true, ngImport: i0, template: "<div></div>", isInline: true }); }
|
|
3012
3012
|
}
|
|
3013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseSelectComponent, decorators: [{
|
|
3014
3014
|
type: Component,
|
|
3015
3015
|
args: [{
|
|
3016
3016
|
selector: "app-base-select",
|
|
@@ -3023,48 +3023,52 @@ class ProductSelectComponent extends BaseSelectComponent {
|
|
|
3023
3023
|
super(...arguments);
|
|
3024
3024
|
this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : []));
|
|
3025
3025
|
this.preSelectedProductId = input(...(ngDevMode ? [undefined, { debugName: "preSelectedProductId" }] : []));
|
|
3026
|
-
this.products = signal([], ...(ngDevMode ? [{ debugName: "products" }] : []));
|
|
3027
3026
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : []));
|
|
3028
3027
|
this.filteredProducts = linkedSignal(() => {
|
|
3029
3028
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3030
|
-
|
|
3029
|
+
if (this.products.isLoading() || !this.products.hasValue()) {
|
|
3030
|
+
return [];
|
|
3031
|
+
}
|
|
3032
|
+
return this.products.value().map(s => ({
|
|
3031
3033
|
...s,
|
|
3032
3034
|
hidden: !!filterText && !s.name.toLocaleLowerCase().includes(filterText) && !s.description?.toLocaleLowerCase().includes(filterText)
|
|
3033
3035
|
}));
|
|
3034
3036
|
}, ...(ngDevMode ? [{ debugName: "filteredProducts" }] : []));
|
|
3035
3037
|
this.hasFilteredProduct = computed(() => !!this.filteredProducts().find(f => !f.hidden), ...(ngDevMode ? [{ debugName: "hasFilteredProduct" }] : []));
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3038
|
+
this.products = rxResource({
|
|
3039
|
+
params: () => ({}),
|
|
3040
|
+
stream: () => {
|
|
3041
|
+
return this.createProductsService()
|
|
3042
|
+
.getProducts().pipe(tap((products) => {
|
|
3043
|
+
this.valueFormControl().markAsPending();
|
|
3044
|
+
if (products.length > 0) {
|
|
3045
|
+
let selectedProductId;
|
|
3046
|
+
if (this.preSelectedProductId() && products.find(product => product.productId === this.preSelectedProductId())) {
|
|
3047
|
+
selectedProductId = this.preSelectedProductId();
|
|
3048
|
+
}
|
|
3049
|
+
else {
|
|
3050
|
+
selectedProductId = products[0].productId;
|
|
3051
|
+
}
|
|
3052
|
+
this.valueFormControl().setValue(selectedProductId, {
|
|
3053
|
+
emitEvent: true,
|
|
3054
|
+
emitModelToViewChange: true,
|
|
3055
|
+
emitViewToModelChange: true,
|
|
3056
|
+
});
|
|
3057
|
+
}
|
|
3058
|
+
else {
|
|
3059
|
+
this.valueFormControl().setValue("");
|
|
3060
|
+
}
|
|
3061
|
+
}));
|
|
3062
|
+
},
|
|
3059
3063
|
});
|
|
3060
3064
|
}
|
|
3061
3065
|
clearFilter() {
|
|
3062
3066
|
this.filterText.set("");
|
|
3063
3067
|
}
|
|
3064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3068
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3069
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProductSelectComponent, isStandalone: true, selector: "app-product-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, preSelectedProductId: { classPropertyName: "preSelectedProductId", publicName: "preSelectedProductId", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Product</mat-label>\n <mat-select\n placeholder=\"Product\"\n name=\"productValue\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter products\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (product of filteredProducts(); track product.productId) {\n <mat-option\n [value]=\"product.productId\"\n [ngClass]=\"{ hidden: product.hidden }\"\n [matTooltip]=\"\n product.description ? `Name: ${product.name}\\nDescription: ${product.description}` : `Name: ${product.name}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ product.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No product available.</mat-option>\n }\n @if (!hasFilteredProduct()) {\n <mat-option disabled>No product found.</mat-option>\n }\n </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
3066
3070
|
}
|
|
3067
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductSelectComponent, decorators: [{
|
|
3068
3072
|
type: Component,
|
|
3069
3073
|
args: [{ selector: "app-product-select", imports: [
|
|
3070
3074
|
MatFormField,
|
|
@@ -3090,57 +3094,52 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
3090
3094
|
this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : []));
|
|
3091
3095
|
this.productId = input.required(...(ngDevMode ? [{ debugName: "productId" }] : []));
|
|
3092
3096
|
this.preSelectedConfigId = input(...(ngDevMode ? [undefined, { debugName: "preSelectedConfigId" }] : []));
|
|
3093
|
-
this.configs = signal([], ...(ngDevMode ? [{ debugName: "configs" }] : []));
|
|
3094
3097
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : []));
|
|
3095
3098
|
this.filteredConfigs = linkedSignal(() => {
|
|
3096
3099
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3097
|
-
|
|
3100
|
+
if (this.configs.isLoading() || !this.configs.hasValue()) {
|
|
3101
|
+
return [];
|
|
3102
|
+
}
|
|
3103
|
+
return this.configs.value().map(s => ({
|
|
3098
3104
|
...s,
|
|
3099
3105
|
hidden: !!filterText && !s.name.toLocaleLowerCase().includes(filterText) && !s.description?.toLocaleLowerCase().includes(filterText)
|
|
3100
3106
|
}));
|
|
3101
3107
|
}, ...(ngDevMode ? [{ debugName: "filteredConfigs" }] : []));
|
|
3102
3108
|
this.hasFilteredConfig = computed(() => !!this.filteredConfigs().find(f => !f.hidden), ...(ngDevMode ? [{ debugName: "hasFilteredConfig" }] : []));
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
this.configs.set(configs);
|
|
3117
|
-
if (this.configs().length > 0) {
|
|
3118
|
-
if (this.preSelectedConfigId() && this.configs().find(config => config.configId === this.preSelectedConfigId())) {
|
|
3119
|
-
this.valueFormControl().setValue(this.preSelectedConfigId());
|
|
3109
|
+
this.configs = rxResource({
|
|
3110
|
+
params: () => ({ productId: this.productId() }),
|
|
3111
|
+
stream: ({ params }) => {
|
|
3112
|
+
this.valueFormControl().markAsPending();
|
|
3113
|
+
return this.createConfigsService()
|
|
3114
|
+
.getConfigs(params.productId).pipe(tap((configs) => {
|
|
3115
|
+
if (configs.length > 0) {
|
|
3116
|
+
if (this.preSelectedConfigId() && configs.find(config => config.configId === this.preSelectedConfigId())) {
|
|
3117
|
+
this.valueFormControl().setValue(this.preSelectedConfigId());
|
|
3118
|
+
}
|
|
3119
|
+
else {
|
|
3120
|
+
this.valueFormControl().setValue(configs[0].configId);
|
|
3121
|
+
}
|
|
3120
3122
|
}
|
|
3121
3123
|
else {
|
|
3122
|
-
this.valueFormControl().setValue(
|
|
3124
|
+
this.valueFormControl().setValue("");
|
|
3123
3125
|
}
|
|
3124
|
-
}
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
}
|
|
3128
|
-
});
|
|
3129
|
-
}
|
|
3126
|
+
}));
|
|
3127
|
+
},
|
|
3128
|
+
});
|
|
3130
3129
|
}
|
|
3131
3130
|
clearFilter() {
|
|
3132
3131
|
this.filterText.set("");
|
|
3133
3132
|
}
|
|
3134
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfigSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ConfigSelectComponent, isStandalone: true, selector: "app-config-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, preSelectedConfigId: { classPropertyName: "preSelectedConfigId", publicName: "preSelectedConfigId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
3136
3135
|
{
|
|
3137
3136
|
provide: NG_VALUE_ACCESSOR,
|
|
3138
3137
|
useExisting: forwardRef(() => ConfigSelectComponent),
|
|
3139
3138
|
multi: true,
|
|
3140
3139
|
},
|
|
3141
|
-
], usesInheritance: true,
|
|
3140
|
+
], usesInheritance: true, ngImport: i0, template: "@if (configs.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (config of filteredConfigs(); track config.configId) {\n <mat-option\n [value]=\"config.configId\"\n [ngClass]=\"{ hidden: config.hidden }\"\n [matTooltip]=\"\n config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ config.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No config available.</mat-option>\n }\n @if (!hasFilteredConfig()) {\n <mat-option disabled>No config found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
3142
3141
|
}
|
|
3143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfigSelectComponent, decorators: [{
|
|
3144
3143
|
type: Component,
|
|
3145
3144
|
args: [{ selector: "app-config-select", providers: [
|
|
3146
3145
|
{
|
|
@@ -3163,7 +3162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3163
3162
|
MatInput,
|
|
3164
3163
|
MatSuffix,
|
|
3165
3164
|
MatIconButton,
|
|
3166
|
-
], template: "@if (configs()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (config of filteredConfigs(); track config.configId) {\n <mat-option\n [value]=\"config.configId\"\n [ngClass]=\"{ hidden: config.hidden }\"\n [matTooltip]=\"\n config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ config.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No config available.</mat-option>\n }\n @if (!hasFilteredConfig()) {\n <mat-option disabled>No config found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
|
|
3165
|
+
], template: "@if (configs.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (config of filteredConfigs(); track config.configId) {\n <mat-option\n [value]=\"config.configId\"\n [ngClass]=\"{ hidden: config.hidden }\"\n [matTooltip]=\"\n config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ config.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No config available.</mat-option>\n }\n @if (!hasFilteredConfig()) {\n <mat-option disabled>No config found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
|
|
3167
3166
|
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], preSelectedConfigId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedConfigId", required: false }] }] } });
|
|
3168
3167
|
|
|
3169
3168
|
class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
@@ -3171,46 +3170,41 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
|
3171
3170
|
super(...arguments);
|
|
3172
3171
|
this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : []));
|
|
3173
3172
|
this.productId = input.required(...(ngDevMode ? [{ debugName: "productId" }] : []));
|
|
3174
|
-
this.environments = signal([], ...(ngDevMode ? [{ debugName: "environments" }] : []));
|
|
3175
3173
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : []));
|
|
3176
3174
|
this.filteredEnvironments = linkedSignal(() => {
|
|
3177
3175
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3178
|
-
|
|
3176
|
+
if (this.environments.isLoading() || !this.environments.hasValue()) {
|
|
3177
|
+
return [];
|
|
3178
|
+
}
|
|
3179
|
+
return this.environments.value().map(s => ({
|
|
3179
3180
|
...s,
|
|
3180
3181
|
hidden: !!filterText && !s.name.toLocaleLowerCase().includes(filterText) && !s.description?.toLocaleLowerCase().includes(filterText)
|
|
3181
3182
|
}));
|
|
3182
3183
|
}, ...(ngDevMode ? [{ debugName: "filteredEnvironments" }] : []));
|
|
3183
3184
|
this.hasFilteredEnvironment = computed(() => !!this.filteredEnvironments().find(f => !f.hidden), ...(ngDevMode ? [{ debugName: "hasFilteredEnvironment" }] : []));
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
this.valueFormControl().setValue(this.environments()[0].environmentId);
|
|
3200
|
-
}
|
|
3201
|
-
else {
|
|
3202
|
-
this.valueFormControl().setValue("");
|
|
3203
|
-
}
|
|
3204
|
-
});
|
|
3205
|
-
}
|
|
3185
|
+
this.environments = rxResource({
|
|
3186
|
+
params: () => ({ productId: this.productId() }),
|
|
3187
|
+
stream: ({ params }) => {
|
|
3188
|
+
this.valueFormControl().markAsPending();
|
|
3189
|
+
return this.createEnvironmentsService()
|
|
3190
|
+
.getEnvironments(params.productId).pipe(tap((environments) => {
|
|
3191
|
+
if (environments.length > 0) {
|
|
3192
|
+
this.valueFormControl().setValue(environments[0].environmentId);
|
|
3193
|
+
}
|
|
3194
|
+
else {
|
|
3195
|
+
this.valueFormControl().setValue("");
|
|
3196
|
+
}
|
|
3197
|
+
}));
|
|
3198
|
+
},
|
|
3199
|
+
});
|
|
3206
3200
|
}
|
|
3207
3201
|
clearFilter() {
|
|
3208
3202
|
this.filterText.set("");
|
|
3209
3203
|
}
|
|
3210
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EnvironmentSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EnvironmentSelectComponent, isStandalone: true, selector: "app-environment-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (environments.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (environment of filteredEnvironments(); track environment.environmentId) {\n <mat-option\n [value]=\"environment.environmentId\"\n [ngClass]=\"{ hidden: environment.hidden }\"\n [matTooltip]=\"\n environment.description\n ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n : `Name: ${environment.name}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ environment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No environment available.</mat-option>\n }\n @if (!hasFilteredEnvironment()) {\n <mat-option disabled>No environment found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
3212
3206
|
}
|
|
3213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
|
|
3214
3208
|
type: Component,
|
|
3215
3209
|
args: [{ selector: "app-environment-select", imports: [
|
|
3216
3210
|
MatFormField,
|
|
@@ -3227,7 +3221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3227
3221
|
MatInput,
|
|
3228
3222
|
MatSuffix,
|
|
3229
3223
|
MatIconButton,
|
|
3230
|
-
], template: "@if (environments()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (environment of filteredEnvironments(); track environment.environmentId) {\n <mat-option\n [value]=\"environment.environmentId\"\n [ngClass]=\"{ hidden: environment.hidden }\"\n [matTooltip]=\"\n
|
|
3224
|
+
], template: "@if (environments.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (environment of filteredEnvironments(); track environment.environmentId) {\n <mat-option\n [value]=\"environment.environmentId\"\n [ngClass]=\"{ hidden: environment.hidden }\"\n [matTooltip]=\"\n environment.description\n ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n : `Name: ${environment.name}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ environment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No environment available.</mat-option>\n }\n @if (!hasFilteredEnvironment()) {\n <mat-option disabled>No environment found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
|
|
3231
3225
|
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }] } });
|
|
3232
3226
|
|
|
3233
3227
|
class SettingSelectComponent extends BaseSelectComponent {
|
|
@@ -3236,54 +3230,49 @@ class SettingSelectComponent extends BaseSelectComponent {
|
|
|
3236
3230
|
this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : []));
|
|
3237
3231
|
this.configId = input.required(...(ngDevMode ? [{ debugName: "configId" }] : []));
|
|
3238
3232
|
this.SettingTypeEnum = SettingType;
|
|
3239
|
-
this.settings = signal([], ...(ngDevMode ? [{ debugName: "settings" }] : []));
|
|
3240
3233
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : []));
|
|
3241
3234
|
this.filteredSettings = linkedSignal(() => {
|
|
3242
3235
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3243
|
-
|
|
3236
|
+
if (this.settings.isLoading() || !this.settings.hasValue()) {
|
|
3237
|
+
return [];
|
|
3238
|
+
}
|
|
3239
|
+
return this.settings.value().map(s => ({
|
|
3244
3240
|
...s,
|
|
3245
3241
|
hidden: !!filterText && !s.name.toLocaleLowerCase().includes(filterText)
|
|
3246
3242
|
&& !s.key?.toLocaleLowerCase().includes(filterText) && !s.hint?.toLocaleLowerCase().includes(filterText)
|
|
3247
3243
|
}));
|
|
3248
3244
|
}, ...(ngDevMode ? [{ debugName: "filteredSettings" }] : []));
|
|
3249
3245
|
this.hasFilteredSetting = computed(() => !!this.filteredSettings().find(f => !f.hidden), ...(ngDevMode ? [{ debugName: "hasFilteredSetting" }] : []));
|
|
3246
|
+
this.settings = rxResource({
|
|
3247
|
+
params: () => ({ configId: this.configId() }),
|
|
3248
|
+
stream: ({ params }) => {
|
|
3249
|
+
this.valueFormControl().markAsPending();
|
|
3250
|
+
return this.createSettingsService()
|
|
3251
|
+
.getSettings(params.configId).pipe(tap((settings) => {
|
|
3252
|
+
if (settings.length > 0) {
|
|
3253
|
+
this.valueFormControl().setValue(settings[0].settingId);
|
|
3254
|
+
}
|
|
3255
|
+
else {
|
|
3256
|
+
this.valueFormControl().setValue("");
|
|
3257
|
+
}
|
|
3258
|
+
}));
|
|
3259
|
+
},
|
|
3260
|
+
});
|
|
3250
3261
|
}
|
|
3251
|
-
|
|
3252
|
-
this.
|
|
3253
|
-
|
|
3254
|
-
ngOnChanges() {
|
|
3255
|
-
this.reloadSettings();
|
|
3256
|
-
}
|
|
3257
|
-
selectedSettingTiggetText() {
|
|
3258
|
-
if (this.valueFormControl().value) {
|
|
3259
|
-
const selectedSetting = this.settings().find(setting => setting.settingId === this.valueFormControl().value);
|
|
3262
|
+
selectedSettingTriggerText() {
|
|
3263
|
+
if (this.valueFormControl().value && this.settings.hasValue()) {
|
|
3264
|
+
const selectedSetting = this.settings.value().find(setting => setting.settingId === this.valueFormControl().value);
|
|
3260
3265
|
return selectedSetting?.name + " (" + selectedSetting?.key + ")";
|
|
3261
3266
|
}
|
|
3262
3267
|
return "";
|
|
3263
3268
|
}
|
|
3264
|
-
reloadSettings() {
|
|
3265
|
-
const configId = this.configId();
|
|
3266
|
-
if (configId) {
|
|
3267
|
-
this.createSettingsService()
|
|
3268
|
-
.getSettings(configId)
|
|
3269
|
-
.subscribe(settings => {
|
|
3270
|
-
this.settings.set(settings);
|
|
3271
|
-
if (this.settings().length > 0) {
|
|
3272
|
-
this.valueFormControl().setValue(this.settings()[0].settingId);
|
|
3273
|
-
}
|
|
3274
|
-
else {
|
|
3275
|
-
this.valueFormControl().setValue("");
|
|
3276
|
-
}
|
|
3277
|
-
});
|
|
3278
|
-
}
|
|
3279
|
-
}
|
|
3280
3269
|
clearFilter() {
|
|
3281
3270
|
this.filterText.set("");
|
|
3282
3271
|
}
|
|
3283
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3272
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SettingSelectComponent, isStandalone: true, selector: "app-setting-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (settings.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTriggerText() }}\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter settings\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (setting of filteredSettings(); track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (setting.settingType) {\n @case (SettingTypeEnum.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingTypeEnum.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingTypeEnum.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingTypeEnum.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"setting.name\">{{ setting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"setting.key\">\n {{ setting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n } @empty {\n <mat-option disabled>No setting available.</mat-option>\n }\n @if (!hasFilteredSetting()) {\n <mat-option disabled>No setting found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
|
|
3285
3274
|
}
|
|
3286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingSelectComponent, decorators: [{
|
|
3287
3276
|
type: Component,
|
|
3288
3277
|
args: [{ selector: "app-setting-select", imports: [
|
|
3289
3278
|
MatFormField,
|
|
@@ -3301,7 +3290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3301
3290
|
MatSuffix,
|
|
3302
3291
|
MatIconButton,
|
|
3303
3292
|
MatSelectTrigger,
|
|
3304
|
-
], template: "@if (settings()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.
|
|
3293
|
+
], template: "@if (settings.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTriggerText() }}\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter settings\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (setting of filteredSettings(); track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (setting.settingType) {\n @case (SettingTypeEnum.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingTypeEnum.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingTypeEnum.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingTypeEnum.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"setting.name\">{{ setting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"setting.key\">\n {{ setting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n } @empty {\n <mat-option disabled>No setting available.</mat-option>\n }\n @if (!hasFilteredSetting()) {\n <mat-option disabled>No setting found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\n"] }]
|
|
3305
3294
|
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }] } });
|
|
3306
3295
|
|
|
3307
3296
|
class DeleteSettingDialogComponent {
|
|
@@ -3315,10 +3304,10 @@ class DeleteSettingDialogComponent {
|
|
|
3315
3304
|
cancel() {
|
|
3316
3305
|
this.dialogRef.close({ button: "cancel" });
|
|
3317
3306
|
}
|
|
3318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
3307
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DeleteSettingDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3308
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DeleteSettingDialogComponent, isStandalone: true, selector: "app-delete-setting-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{ data.system }}</h1>\n<div mat-dialog-actions class=\"container\">\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"remove()\">Remove from {{ data.ticketType }}</button>\n <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
3320
3309
|
}
|
|
3321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DeleteSettingDialogComponent, decorators: [{
|
|
3322
3311
|
type: Component,
|
|
3323
3312
|
args: [{ selector: "app-delete-setting-dialog", imports: [MatDialogTitle, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{ data.system }}</h1>\n<div mat-dialog-actions class=\"container\">\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"remove()\">Remove from {{ data.ticketType }}</button>\n <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n</div>\n" }]
|
|
3324
3313
|
}] });
|
|
@@ -3327,10 +3316,10 @@ class TrackingDirective {
|
|
|
3327
3316
|
constructor() {
|
|
3328
3317
|
this.track = input(...(ngDevMode ? [undefined, { debugName: "track" }] : []));
|
|
3329
3318
|
}
|
|
3330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3331
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
3319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrackingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3320
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TrackingDirective, isStandalone: true, selector: "[track]", inputs: { track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3332
3321
|
}
|
|
3333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TrackingDirective, decorators: [{
|
|
3334
3323
|
type: Directive,
|
|
3335
3324
|
args: [{
|
|
3336
3325
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3436,10 +3425,10 @@ class LoaderComponent {
|
|
|
3436
3425
|
setTimeout(() => this.showLoader = true, 300);
|
|
3437
3426
|
}
|
|
3438
3427
|
}
|
|
3439
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3440
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3428
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3429
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoaderComponent, isStandalone: true, selector: "app-loader", inputs: { skipTimeOut: { classPropertyName: "skipTimeOut", publicName: "skipTimeOut", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showLoader) {\n <div class=\"container\">\n <div class=\"bounceball\"></div>\n <div class=\"cat\"></div>\n </div>\n}\n", styles: [".container{display:flex;justify-content:center;align-items:baseline;margin-top:32px;margin-bottom:32px}.container .cat{height:50px;width:60px;margin-left:7px;background-image:url('data:image/svg+xml,<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 244.77 210.07\"><defs><style>.cls-1{fill:%23ed1c24;}.cls-2{fill:%23fff;}.cls-3{fill:%23000000;}<\\/style></defs><title>cat</title><path class=\"cls-1\" d=\"M201.57,100V40l-60,60H91.72l-40-40V190a60,60,0,0,0,60,60h90V100Z\" transform=\"translate(-35.62 -40)\"/><rect class=\"cls-2\" x=\"34.22\" y=\"80.48\" width=\"113.76\" height=\"51.71\" rx=\"25.85\" ry=\"25.85\"/><circle class=\"cls-3\" cx=\"119.95\" cy=\"106.33\" r=\"20\"/><path class=\"cls-1\" d=\"M97.52,130.63a16,16,0,1,1-16,16,16,16,0,0,1,16-16m0-4a20,20,0,1,0,20,20,20,20,0,0,0-20-20Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M135.68,187.4a2,2,0,0,0-2.83,0l-6.13,6.13-6.13-6.13a2,2,0,0,0-2.83,2.83l7,7v13.6a2,2,0,0,0,4,0v-13.6l7-7A2,2,0,0,0,135.68,187.4Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M44.76,195.06H85.29a1.5,1.5,0,1,0,0-3H44.76a1.5,1.5,0,1,0,0,3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M92.94,199.3H37.12a1.5,1.5,0,0,0,0,3H92.94a1.5,1.5,0,0,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M85.29,206.54H44.76a1.5,1.5,0,1,0,0,3H85.29a1.5,1.5,0,0,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M168.5,193.57H209a1.5,1.5,0,1,0,0-3H168.5a1.5,1.5,0,0,0,0,3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M216.67,197.8H160.85a1.5,1.5,0,1,0,0,3h55.82a1.5,1.5,0,1,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M209,205H168.5a1.5,1.5,0,0,0,0,3H209a1.5,1.5,0,0,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-1\" d=\"M275.34,139.62l0,0a20.17,20.17,0,1,0-37.5,14.83,65.67,65.67,0,0,1-79.17,85.36A82.1,82.1,0,0,0,275.34,139.62Z\" transform=\"translate(-35.62 -40)\"/></svg>');background-repeat:no-repeat}.container .bounceball{position:relative;display:inline-block;height:37px;width:15px}.container .bounceball:before{position:absolute;content:\"\";display:block;bottom:0;width:15px;height:15px;border-radius:50%;background-color:#fbae17;transform-origin:50%;animation:bounce .5s alternate infinite ease}@keyframes bounce{0%{transform:scale(1.5,.7)}35%{transform:scaleX(1)}to{transform:translateY(-25px)}}\n"] }); }
|
|
3441
3430
|
}
|
|
3442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
3443
3432
|
type: Component,
|
|
3444
3433
|
args: [{ selector: "app-loader", imports: [], template: "@if (showLoader) {\n <div class=\"container\">\n <div class=\"bounceball\"></div>\n <div class=\"cat\"></div>\n </div>\n}\n", styles: [".container{display:flex;justify-content:center;align-items:baseline;margin-top:32px;margin-bottom:32px}.container .cat{height:50px;width:60px;margin-left:7px;background-image:url('data:image/svg+xml,<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 244.77 210.07\"><defs><style>.cls-1{fill:%23ed1c24;}.cls-2{fill:%23fff;}.cls-3{fill:%23000000;}<\\/style></defs><title>cat</title><path class=\"cls-1\" d=\"M201.57,100V40l-60,60H91.72l-40-40V190a60,60,0,0,0,60,60h90V100Z\" transform=\"translate(-35.62 -40)\"/><rect class=\"cls-2\" x=\"34.22\" y=\"80.48\" width=\"113.76\" height=\"51.71\" rx=\"25.85\" ry=\"25.85\"/><circle class=\"cls-3\" cx=\"119.95\" cy=\"106.33\" r=\"20\"/><path class=\"cls-1\" d=\"M97.52,130.63a16,16,0,1,1-16,16,16,16,0,0,1,16-16m0-4a20,20,0,1,0,20,20,20,20,0,0,0-20-20Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M135.68,187.4a2,2,0,0,0-2.83,0l-6.13,6.13-6.13-6.13a2,2,0,0,0-2.83,2.83l7,7v13.6a2,2,0,0,0,4,0v-13.6l7-7A2,2,0,0,0,135.68,187.4Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M44.76,195.06H85.29a1.5,1.5,0,1,0,0-3H44.76a1.5,1.5,0,1,0,0,3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M92.94,199.3H37.12a1.5,1.5,0,0,0,0,3H92.94a1.5,1.5,0,0,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M85.29,206.54H44.76a1.5,1.5,0,1,0,0,3H85.29a1.5,1.5,0,0,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M168.5,193.57H209a1.5,1.5,0,1,0,0-3H168.5a1.5,1.5,0,0,0,0,3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M216.67,197.8H160.85a1.5,1.5,0,1,0,0,3h55.82a1.5,1.5,0,1,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-2\" d=\"M209,205H168.5a1.5,1.5,0,0,0,0,3H209a1.5,1.5,0,0,0,0-3Z\" transform=\"translate(-35.62 -40)\"/><path class=\"cls-1\" d=\"M275.34,139.62l0,0a20.17,20.17,0,1,0-37.5,14.83,65.67,65.67,0,0,1-79.17,85.36A82.1,82.1,0,0,0,275.34,139.62Z\" transform=\"translate(-35.62 -40)\"/></svg>');background-repeat:no-repeat}.container .bounceball{position:relative;display:inline-block;height:37px;width:15px}.container .bounceball:before{position:absolute;content:\"\";display:block;bottom:0;width:15px;height:15px;border-radius:50%;background-color:#fbae17;transform-origin:50%;animation:bounce .5s alternate infinite ease}@keyframes bounce{0%{transform:scale(1.5,.7)}35%{transform:scaleX(1)}to{transform:translateY(-25px)}}\n"] }]
|
|
3445
3434
|
}], propDecorators: { skipTimeOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipTimeOut", required: false }] }] } });
|
|
@@ -3469,10 +3458,10 @@ class CopyableValueComponent {
|
|
|
3469
3458
|
this.inputControl().nativeElement.style.width = this.value().length + 1 + "ch";
|
|
3470
3459
|
}
|
|
3471
3460
|
}
|
|
3472
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3473
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3461
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CopyableValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CopyableValueComponent, isStandalone: true, selector: "app-copyable-value", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, warnHint: { classPropertyName: "warnHint", publicName: "warnHint", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, smallest: { classPropertyName: "smallest", publicName: "smallest", isSignal: true, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, wholeControlCopyable: { classPropertyName: "wholeControlCopyable", publicName: "wholeControlCopyable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container themed\" [class.dark]=\"dark()\">\n @if (!!name()) {\n <div class=\"name\">{{ name() }}</div>\n }\n <div\n class=\"control\"\n [matTooltip]=\"tooltip() ?? 'Copy to clipboard'\"\n [matTooltipClass]=\"tooltipClass() ?? []\"\n [class.small]=\"small()\"\n [class.smallest]=\"smallest()\"\n [class.borderless]=\"borderless()\"\n [class.whole-copyable]=\"wholeControlCopyable()\"\n [matTooltipDisabled]=\"!wholeControlCopyable()\">\n @if (!wholeControlCopyable()) {\n <input\n #content\n class=\"value\"\n readonly\n [value]=\"value()\"\n [class.bold]=\"bold()\"\n [class.borderless]=\"borderless()\" />\n } @else {\n <div class=\"value\" [cdkCopyToClipboard]=\"value()\" (cdkCopyToClipboardCopied)=\"copied()\">\n {{ value() }}\n </div>\n }\n <div\n class=\"icon-container\"\n matRipple\n matTooltip=\"Copy to clipboard\"\n [class.borderless]=\"borderless()\"\n [class.dark]=\"dark()\"\n [cdkCopyToClipboard]=\"value()\"\n [matRippleUnbounded]=\"borderless()\"\n [matRippleCentered]=\"borderless()\"\n [matTooltipDisabled]=\"wholeControlCopyable()\"\n (cdkCopyToClipboardCopied)=\"copied()\">\n <mat-icon>file_copy</mat-icon>\n </div>\n </div>\n @if (!!hint()) {\n <div class=\"hint\" [class.hint-warn]=\"warnHint()\">{{ hint() }}</div>\n }\n</div>\n", styles: [".themed{--text-color: var(--copyable-text-color);--border-color: var(--copyable-border-color);--background-color: var(--copyable-background-color)}.themed.dark{--border-color: var(--copyable-border-color-darker);--background-color: var(--copyable-background-color-darker)}.container{line-height:normal}.container .control,.container .small,.container .smallest{display:flex;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;flex-wrap:nowrap}.container .control .value,.container .small .value,.container .smallest .value{width:100%;border:none;background-color:transparent;outline:none;padding:0 0 0 10px;min-width:0;overflow:hidden;font-size:13px;font-family:monospace;color:var(--text-color)}.container .control .icon-container,.container .small .icon-container,.container .smallest .icon-container{display:flex;border-left:1px solid var(--border-color);border-top-right-radius:3px;border-bottom-right-radius:3px;align-items:center;flex-shrink:0;margin-left:auto;padding:10px;cursor:pointer}.container .control .icon-container mat-icon,.container .small .icon-container mat-icon,.container .smallest .icon-container mat-icon{opacity:var(--copyable-icon-opacity);width:16px;height:16px;font-size:16px}.container .control .dark.icon-container mat-icon,.container .small .dark.icon-container mat-icon,.container .smallest .dark.icon-container mat-icon{opacity:calc(var(--copyable-icon-opacity) - .1)}.container .control .icon-container:hover mat-icon,.container .small .icon-container:hover mat-icon,.container .smallest .icon-container:hover mat-icon{opacity:calc(var(--copyable-icon-opacity) + .1)}.container .control .dark.icon-container:hover mat-icon,.container .small .dark.icon-container:hover mat-icon,.container .smallest .dark.icon-container:hover mat-icon{opacity:var(--copyable-icon-opacity)}.container .control.whole-copyable,.container .whole-copyable.small,.container .whole-copyable.smallest{cursor:pointer}.container .control.whole-copyable .value,.container .whole-copyable.small .value,.container .whole-copyable.smallest .value{padding:0 10px;text-overflow:ellipsis}.container .small .value,.container .smallest .value{padding:0 0 0 4px}.container .small.whole-copyable .value,.container .whole-copyable.smallest .value{padding:0 5px 0 4px}.container .small .value.borderless,.container .smallest .value.borderless{padding:0}.container .small .icon-container,.container .smallest .icon-container{padding:4px}.container .smallest .value{font-size:12px}.container .smallest .icon-container{padding:3px}.container .smallest .icon-container mat-icon{width:14px;height:14px;font-size:14px}.container .bold{font-weight:700}.container .name{font-weight:700;margin-bottom:5px}.container .hint,.container .hint-warn{display:flex;align-items:center;font-size:11px;color:var(--text-color);margin-top:5px}.container .hint:before,.container .hint-warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);font-size:18px;margin-right:4px;transform:rotate(.03deg)}.container .hint-warn:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.container .borderless{border:none!important;background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
3474
3463
|
}
|
|
3475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CopyableValueComponent, decorators: [{
|
|
3476
3465
|
type: Component,
|
|
3477
3466
|
args: [{ selector: "app-copyable-value", imports: [MatTooltip, CdkCopyToClipboard, MatRipple, MatIcon], template: "<div class=\"container themed\" [class.dark]=\"dark()\">\n @if (!!name()) {\n <div class=\"name\">{{ name() }}</div>\n }\n <div\n class=\"control\"\n [matTooltip]=\"tooltip() ?? 'Copy to clipboard'\"\n [matTooltipClass]=\"tooltipClass() ?? []\"\n [class.small]=\"small()\"\n [class.smallest]=\"smallest()\"\n [class.borderless]=\"borderless()\"\n [class.whole-copyable]=\"wholeControlCopyable()\"\n [matTooltipDisabled]=\"!wholeControlCopyable()\">\n @if (!wholeControlCopyable()) {\n <input\n #content\n class=\"value\"\n readonly\n [value]=\"value()\"\n [class.bold]=\"bold()\"\n [class.borderless]=\"borderless()\" />\n } @else {\n <div class=\"value\" [cdkCopyToClipboard]=\"value()\" (cdkCopyToClipboardCopied)=\"copied()\">\n {{ value() }}\n </div>\n }\n <div\n class=\"icon-container\"\n matRipple\n matTooltip=\"Copy to clipboard\"\n [class.borderless]=\"borderless()\"\n [class.dark]=\"dark()\"\n [cdkCopyToClipboard]=\"value()\"\n [matRippleUnbounded]=\"borderless()\"\n [matRippleCentered]=\"borderless()\"\n [matTooltipDisabled]=\"wholeControlCopyable()\"\n (cdkCopyToClipboardCopied)=\"copied()\">\n <mat-icon>file_copy</mat-icon>\n </div>\n </div>\n @if (!!hint()) {\n <div class=\"hint\" [class.hint-warn]=\"warnHint()\">{{ hint() }}</div>\n }\n</div>\n", styles: [".themed{--text-color: var(--copyable-text-color);--border-color: var(--copyable-border-color);--background-color: var(--copyable-background-color)}.themed.dark{--border-color: var(--copyable-border-color-darker);--background-color: var(--copyable-background-color-darker)}.container{line-height:normal}.container .control,.container .small,.container .smallest{display:flex;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;flex-wrap:nowrap}.container .control .value,.container .small .value,.container .smallest .value{width:100%;border:none;background-color:transparent;outline:none;padding:0 0 0 10px;min-width:0;overflow:hidden;font-size:13px;font-family:monospace;color:var(--text-color)}.container .control .icon-container,.container .small .icon-container,.container .smallest .icon-container{display:flex;border-left:1px solid var(--border-color);border-top-right-radius:3px;border-bottom-right-radius:3px;align-items:center;flex-shrink:0;margin-left:auto;padding:10px;cursor:pointer}.container .control .icon-container mat-icon,.container .small .icon-container mat-icon,.container .smallest .icon-container mat-icon{opacity:var(--copyable-icon-opacity);width:16px;height:16px;font-size:16px}.container .control .dark.icon-container mat-icon,.container .small .dark.icon-container mat-icon,.container .smallest .dark.icon-container mat-icon{opacity:calc(var(--copyable-icon-opacity) - .1)}.container .control .icon-container:hover mat-icon,.container .small .icon-container:hover mat-icon,.container .smallest .icon-container:hover mat-icon{opacity:calc(var(--copyable-icon-opacity) + .1)}.container .control .dark.icon-container:hover mat-icon,.container .small .dark.icon-container:hover mat-icon,.container .smallest .dark.icon-container:hover mat-icon{opacity:var(--copyable-icon-opacity)}.container .control.whole-copyable,.container .whole-copyable.small,.container .whole-copyable.smallest{cursor:pointer}.container .control.whole-copyable .value,.container .whole-copyable.small .value,.container .whole-copyable.smallest .value{padding:0 10px;text-overflow:ellipsis}.container .small .value,.container .smallest .value{padding:0 0 0 4px}.container .small.whole-copyable .value,.container .whole-copyable.smallest .value{padding:0 5px 0 4px}.container .small .value.borderless,.container .smallest .value.borderless{padding:0}.container .small .icon-container,.container .smallest .icon-container{padding:4px}.container .smallest .value{font-size:12px}.container .smallest .icon-container{padding:3px}.container .smallest .icon-container mat-icon{width:14px;height:14px;font-size:14px}.container .bold{font-weight:700}.container .name{font-weight:700;margin-bottom:5px}.container .hint,.container .hint-warn{display:flex;align-items:center;font-size:11px;color:var(--text-color);margin-top:5px}.container .hint:before,.container .hint-warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);font-size:18px;margin-right:4px;transform:rotate(.03deg)}.container .hint-warn:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.container .borderless{border:none!important;background-color:transparent!important}\n"] }]
|
|
3478
3467
|
}], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], warnHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "warnHint", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], bold: [{ type: i0.Input, args: [{ isSignal: true, alias: "bold", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], smallest: [{ type: i0.Input, args: [{ isSignal: true, alias: "smallest", required: false }] }], dark: [{ type: i0.Input, args: [{ isSignal: true, alias: "dark", required: false }] }], wholeControlCopyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "wholeControlCopyable", required: false }] }], inputControl: [{ type: i0.ViewChild, args: ["content", { isSignal: true }] }] } });
|
|
@@ -3516,10 +3505,10 @@ class PastedDataTrimmerDirective {
|
|
|
3516
3505
|
});
|
|
3517
3506
|
}
|
|
3518
3507
|
}
|
|
3519
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3520
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
3508
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PastedDataTrimmerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3509
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: PastedDataTrimmerDirective, isStandalone: true, selector: "[appPastedDataTrimmer]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 }); }
|
|
3521
3510
|
}
|
|
3522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3511
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PastedDataTrimmerDirective, decorators: [{
|
|
3523
3512
|
type: Directive,
|
|
3524
3513
|
args: [{
|
|
3525
3514
|
selector: "[appPastedDataTrimmer]",
|
|
@@ -3572,10 +3561,10 @@ class PopoutTextEditorDialogComponent {
|
|
|
3572
3561
|
}
|
|
3573
3562
|
this.dialogRef.close({ value: this.control.value });
|
|
3574
3563
|
}
|
|
3575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3564
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PopoutTextEditorDialogComponent, isStandalone: true, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n <p class=\"description\">\n {{ data.description }}\n </p>\n @if (!data.disableJsonEditor) {\n <mat-button-toggle-group [(ngModel)]=\"format\">\n <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n </mat-button-toggle-group>\n }\n\n @if (format === \"text\") {\n <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n <textarea\n matInput\n autofocus\n focus\n rows=\"17\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"17\"\n cdkAutosizeMaxRows=\"26\"\n appPastedDataTrimmer\n [formControl]=\"control\"></textarea>\n @if (control.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(control) }}\n </mat-error>\n }\n @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n <mat-hint>\n Remaining characters:\n {{ data.maxValueLength - (control.value?.length ?? 0) }}\n </mat-hint>\n }\n </mat-form-field>\n } @else if (format === \"json\") {\n <div class=\"editor-container\">\n <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n @if (control.invalid) {\n <span class=\"error mat-mdc-form-field-error\">\n {{ formHelper.getErrorMessage(control) }}\n </span>\n }\n </div>\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button\n type=\"button\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"!control.touched || !control.valid\"\n (click)=\"set()\">\n Set\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
|
|
3577
3566
|
}
|
|
3578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3567
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
|
|
3579
3568
|
type: Component,
|
|
3580
3569
|
args: [{ selector: "app-popout-text-editor-dialog", imports: [
|
|
3581
3570
|
MatDialogTitle,
|
|
@@ -3858,10 +3847,10 @@ class VariationsDialogComponent {
|
|
|
3858
3847
|
getColorIndex(row, index) {
|
|
3859
3848
|
return getPredefinedVariationColorIndex(this.settingType, getRawPredefinedVariationValue(row.controls.value), index);
|
|
3860
3849
|
}
|
|
3861
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3862
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations of the\n <strong>{{ data.settingName }}</strong>\n setting.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }] }); }
|
|
3850
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VariationsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations of the\n <strong>{{ data.settingName }}</strong>\n setting.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <div\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }] }); }
|
|
3863
3852
|
}
|
|
3864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VariationsDialogComponent, decorators: [{
|
|
3865
3854
|
type: Component,
|
|
3866
3855
|
args: [{ selector: "app-variations-dialog", imports: [
|
|
3867
3856
|
LoaderComponent,
|
|
@@ -3898,7 +3887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3898
3887
|
CdkDragHandle,
|
|
3899
3888
|
CopyableValueComponent,
|
|
3900
3889
|
AutofocusDirective
|
|
3901
|
-
], template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations of the\n <strong>{{ data.settingName }}</strong>\n setting.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"] }]
|
|
3890
|
+
], template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations of the\n <strong>{{ data.settingName }}</strong>\n setting.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <div\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"] }]
|
|
3902
3891
|
}] });
|
|
3903
3892
|
|
|
3904
3893
|
class DependeesDialogComponent {
|
|
@@ -3918,10 +3907,10 @@ class DependeesDialogComponent {
|
|
|
3918
3907
|
]);
|
|
3919
3908
|
return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
|
|
3920
3909
|
}
|
|
3921
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3922
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DependeesDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DependeesDialogComponent, isStandalone: true, selector: "app-dependees-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n <p>\n <strong>{{ data.name }}</strong>\n is the prerequisite of the following feature flags:\n </p>\n @for (dependee of data.dependees; track dependee) {\n <ul>\n <li>\n <a rel=\"noopener noreferrer\" target=\"_blank\" [href]=\"getDashboardUrl(dependee.settingId)\">\n {{ dependee.name }} ({{ dependee.key }})\n </a>\n </li>\n </ul>\n }\n</div>\n\n<div mat-dialog-actions>\n <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
|
|
3923
3912
|
}
|
|
3924
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DependeesDialogComponent, decorators: [{
|
|
3925
3914
|
type: Component,
|
|
3926
3915
|
args: [{ selector: "app-dependees-dialog", imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose], template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n <p>\n <strong>{{ data.name }}</strong>\n is the prerequisite of the following feature flags:\n </p>\n @for (dependee of data.dependees; track dependee) {\n <ul>\n <li>\n <a rel=\"noopener noreferrer\" target=\"_blank\" [href]=\"getDashboardUrl(dependee.settingId)\">\n {{ dependee.name }} ({{ dependee.key }})\n </a>\n </li>\n </ul>\n }\n</div>\n\n<div mat-dialog-actions>\n <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>\n" }]
|
|
3927
3916
|
}] });
|
|
@@ -3996,7 +3985,7 @@ class FeatureFlagValueComponent {
|
|
|
3996
3985
|
if (stringValue.length > 50) {
|
|
3997
3986
|
stringValue = stringValue.substring(0, 23) + "[...]" + stringValue.substring(stringValue.length - 22);
|
|
3998
3987
|
}
|
|
3999
|
-
return "
|
|
3988
|
+
return "'" + stringValue.replace(/[\\']/g, "\\$&") + "'";
|
|
4000
3989
|
}
|
|
4001
3990
|
}
|
|
4002
3991
|
}
|
|
@@ -4012,10 +4001,10 @@ class FeatureFlagValueComponent {
|
|
|
4012
4001
|
return model?.stringValue ?? "";
|
|
4013
4002
|
}
|
|
4014
4003
|
}
|
|
4015
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @if (formGroupValue.controls.predefinedVariationId) {\n <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-select\n disableOptionCentering\n [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n [matTooltip]=\"\n `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <mat-select-trigger>\n @if (selectedPredefinedVariation) {\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n @if (selectedPredefinedVariation.name) {\n <em class=\"variation-name\">\n {{ selectedPredefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{\n getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n }}\n </span>\n }\n </div>\n }\n </mat-select-trigger>\n\n @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n <span\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [matTooltip]=\"\n !predefinedVariation.isAvailable\n ? 'The predefined variation is already selected in another percentage option.'\n : (predefinedVariation.hint ?? '')\n \">\n <mat-option\n [value]=\"predefinedVariation.predefinedVariationId\"\n [disabled]=\"!predefinedVariation.isAvailable\">\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n @if (predefinedVariation.name) {\n <em class=\"variation-name\">\n {{ predefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n </span>\n }\n </div>\n </mat-option>\n </span>\n }\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n (click)=\"\n $event.stopPropagation();\n viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n \">\n <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n </button>\n @if (formGroupValue.controls.predefinedVariationId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else if (formGroupValue.controls.stringValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroupValue.controls.stringValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroupValue.controls.stringValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.intValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n appDigitOnly\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.intValue\"\n [digitOnlyAllowNegatives]=\"true\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.intValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.doubleValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.doubleValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.doubleValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.boolValue) {\n <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n <label\n class=\"switch\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
|
|
4004
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4005
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @if (formGroupValue.controls.predefinedVariationId) {\n <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-select\n disableOptionCentering\n [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n [matTooltip]=\"\n `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <mat-select-trigger>\n @if (selectedPredefinedVariation) {\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n @if (selectedPredefinedVariation.name) {\n <em class=\"variation-name\">\n {{ selectedPredefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{\n getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n }}\n </span>\n }\n </div>\n }\n </mat-select-trigger>\n\n @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n <span\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [matTooltip]=\"\n !predefinedVariation.isAvailable\n ? 'The predefined variation is already selected in another percentage option.'\n : (predefinedVariation.hint ?? '')\n \">\n <mat-option\n [value]=\"predefinedVariation.predefinedVariationId\"\n [disabled]=\"!predefinedVariation.isAvailable\">\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n @if (predefinedVariation.name) {\n <em class=\"variation-name\">\n {{ predefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n </span>\n }\n </div>\n </mat-option>\n </span>\n }\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n (click)=\"\n $event.stopPropagation();\n viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n \">\n <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n </button>\n @if (formGroupValue.controls.predefinedVariationId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else if (formGroupValue.controls.stringValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroupValue.controls.stringValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroupValue.controls.stringValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.intValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n appDigitOnly\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.intValue\"\n [digitOnlyAllowNegatives]=\"true\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.intValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.doubleValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.doubleValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.doubleValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.boolValue) {\n <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n <label\n class=\"switch\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
|
|
4017
4006
|
}
|
|
4018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4007
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
|
|
4019
4008
|
type: Component,
|
|
4020
4009
|
args: [{ selector: "app-feature-flag-value", imports: [
|
|
4021
4010
|
MatFormField,
|
|
@@ -4047,10 +4036,10 @@ class ConditionChipComponent {
|
|
|
4047
4036
|
ngOnChanges() {
|
|
4048
4037
|
this.chipText = this.conditionIndex() > 0 ? "AND" : this.targetingRuleIndex() === 0 ? "IF" : "ELSE IF";
|
|
4049
4038
|
}
|
|
4050
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4051
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
4039
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConditionChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ConditionChipComponent, isStandalone: true, selector: "app-condition-chip", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip-container fixed-width\">\n @if (conditionIndex() > 0) {\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n }\n <mat-chip-set>\n <mat-chip disabled>{{ chipText }}</mat-chip>\n </mat-chip-set>\n</div>\n", styles: [".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }] }); }
|
|
4052
4041
|
}
|
|
4053
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConditionChipComponent, decorators: [{
|
|
4054
4043
|
type: Component,
|
|
4055
4044
|
args: [{ selector: "app-condition-chip", imports: [MatIcon, MatChipSet, MatChip], template: "<div class=\"chip-container fixed-width\">\n @if (conditionIndex() > 0) {\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n }\n <mat-chip-set>\n <mat-chip disabled>{{ chipText }}</mat-chip>\n </mat-chip-set>\n</div>\n", styles: [".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n"] }]
|
|
4056
4045
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }] } });
|
|
@@ -4107,10 +4096,10 @@ class PrerequisiteFlagConditionComponent {
|
|
|
4107
4096
|
clearFilter() {
|
|
4108
4097
|
this.filterText.set("");
|
|
4109
4098
|
}
|
|
4110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n flag\n </a>\n </div>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (settingValue) {\n {{ settingValue.name }} ({{ settingValue.key }})\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (prerequisiteSetting.settingType) {\n @case (SettingType.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingType.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingType.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingType.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n {{ prerequisiteSetting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n }\n @if (!hasFilteredSettings()) {\n <mat-option disabled>No feature flags found.</mat-option>\n }\n </mat-select>\n @if (formGroup().controls.prerequisiteSettingId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (\n !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n ) {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n [matTooltip]=\"\n `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n </div>\n @if (\n !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n ) {\n <app-feature-flag-value\n class=\"wrapper-group grow\"\n tooltip=\"Comparison value\"\n [setting]=\"settingValue\"\n [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n [isPrerequisite]=\"true\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
|
|
4099
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n flag\n </a>\n </div>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (settingValue) {\n {{ settingValue.name }} ({{ settingValue.key }})\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (prerequisiteSetting.settingType) {\n @case (SettingType.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingType.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingType.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingType.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n {{ prerequisiteSetting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n }\n @if (!hasFilteredSettings()) {\n <mat-option disabled>No feature flags found.</mat-option>\n }\n </mat-select>\n @if (formGroup().controls.prerequisiteSettingId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (\n !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n ) {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n [matTooltip]=\"\n `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n </div>\n @if (\n !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n ) {\n <app-feature-flag-value\n class=\"wrapper-group grow\"\n tooltip=\"Comparison value\"\n [setting]=\"settingValue\"\n [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n [isPrerequisite]=\"true\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
|
|
4112
4101
|
}
|
|
4113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
|
|
4114
4103
|
type: Component,
|
|
4115
4104
|
args: [{ selector: "app-prerequisite-flag-condition", imports: [
|
|
4116
4105
|
ConditionChipComponent,
|
|
@@ -4163,10 +4152,10 @@ class SegmentConditionComponent {
|
|
|
4163
4152
|
clearFilter() {
|
|
4164
4153
|
this.filterText.set("");
|
|
4165
4154
|
}
|
|
4166
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4167
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (comparator of segmentComparators; track $index) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component suffixed\">\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n [class.select-suffixed]=\"canManageSegments()\">\n <mat-select\n matTooltip=\"Segment\"\n placeholder=\"Select segment ...\"\n [formControl]=\"formGroup().controls.segmentId\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (segment of filteredSegments(); track $index) {\n <mat-option\n [value]=\"segment.segmentId\"\n [matTooltip]=\"segment.description\"\n [ngClass]=\"{ hidden: segment.hidden }\">\n {{ segment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No segments available.</mat-option>\n }\n @if (segments().length && !hasFilteredSegments()) {\n <mat-option disabled>No segments found.</mat-option>\n }\n </mat-select>\n @if (canManageSegments()) {\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Create and manage segments\"\n [matMenuTriggerFor]=\"segmentMenu\"\n [track]=\"['segment menu click', 'feature flags and settings']\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n @if (formGroup().controls.segmentId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n <ng-template matMenuContent>\n <a\n mat-menu-item\n [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n (click)=\"createSegmentRequested.emit()\">\n <mat-icon>add</mat-icon>\n <span>Create new segment</span>\n </a>\n <a\n mat-menu-item\n [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n (click)=\"manageSegmentsRequested.emit()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n <span>Manage segments</span>\n </a>\n </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
|
|
4155
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4156
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (comparator of segmentComparators; track $index) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component suffixed\">\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n [class.select-suffixed]=\"canManageSegments()\">\n <mat-select\n matTooltip=\"Segment\"\n placeholder=\"Select segment ...\"\n [formControl]=\"formGroup().controls.segmentId\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (segment of filteredSegments(); track $index) {\n <mat-option\n [value]=\"segment.segmentId\"\n [matTooltip]=\"segment.description\"\n [ngClass]=\"{ hidden: segment.hidden }\">\n {{ segment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No segments available.</mat-option>\n }\n @if (segments().length && !hasFilteredSegments()) {\n <mat-option disabled>No segments found.</mat-option>\n }\n </mat-select>\n @if (canManageSegments()) {\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Create and manage segments\"\n [matMenuTriggerFor]=\"segmentMenu\"\n [track]=\"['segment menu click', 'feature flags and settings']\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n @if (formGroup().controls.segmentId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n <ng-template matMenuContent>\n <a\n mat-menu-item\n [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n (click)=\"createSegmentRequested.emit()\">\n <mat-icon>add</mat-icon>\n <span>Create new segment</span>\n </a>\n <a\n mat-menu-item\n [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n (click)=\"manageSegmentsRequested.emit()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n <span>Manage segments</span>\n </a>\n </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
|
|
4168
4157
|
}
|
|
4169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentConditionComponent, decorators: [{
|
|
4170
4159
|
type: Component,
|
|
4171
4160
|
args: [{ selector: "app-segment-condition", imports: [
|
|
4172
4161
|
ConditionChipComponent,
|
|
@@ -4249,8 +4238,8 @@ class DateTimePickerComponent {
|
|
|
4249
4238
|
validate() {
|
|
4250
4239
|
return this.formGroup.errors;
|
|
4251
4240
|
}
|
|
4252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
4241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DateTimePickerComponent, isStandalone: true, selector: "app-date-time-picker", inputs: { dateTooltip: { classPropertyName: "dateTooltip", publicName: "dateTooltip", isSignal: true, isRequired: false, transformFunction: null }, timeTooltip: { classPropertyName: "timeTooltip", publicName: "timeTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
4254
4243
|
{
|
|
4255
4244
|
provide: NG_VALUE_ACCESSOR,
|
|
4256
4245
|
useExisting: forwardRef(() => DateTimePickerComponent),
|
|
@@ -4264,7 +4253,7 @@ class DateTimePickerComponent {
|
|
|
4264
4253
|
{ provide: DateAdapter, useClass: AppDateAdapter },
|
|
4265
4254
|
], ngImport: i0, template: "<div class=\"outer\">\n <div class=\"component date\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed small-icon-button\">\n <input\n matInput\n [formControl]=\"formGroup.controls.dateValue\"\n [matDatepicker]=\"datepicker\"\n [matTooltip]=\"dateTooltip()\" />\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker />\n @if (formGroup.controls.dateValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.dateValue) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n <div class=\"component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed small-icon-button\">\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [formControl]=\"formGroup.controls.timeValue\"\n [matTooltip]=\"timeTooltip()\" />\n <mat-timepicker #timepicker />\n\n <div matSuffix class=\"suffix\">\n <div>UTC</div>\n <mat-timepicker-toggle [for]=\"timepicker\" />\n </div>\n @if (formGroup.controls.timeValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.timeValue) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n</div>\n", styles: [".outer{display:flex;flex-wrap:wrap}.outer .component{width:140px;margin:2px 0}.outer .component.date{margin-right:8px}.outer .component mat-form-field{width:100%;font-size:12px}.outer .suffix{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
|
|
4266
4255
|
}
|
|
4267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
4268
4257
|
type: Component,
|
|
4269
4258
|
args: [{ selector: "app-date-time-picker", providers: [
|
|
4270
4259
|
{
|
|
@@ -4525,10 +4514,10 @@ class ComparatorDialogComponent {
|
|
|
4525
4514
|
const result = this.isConfidential && selected.sensitiveValue ? selected.sensitiveValue : selected.value;
|
|
4526
4515
|
this.dialogRef.close(result);
|
|
4527
4516
|
}
|
|
4528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ComparatorDialogComponent, isStandalone: true, selector: "app-comparator-dialog", ngImport: i0, template: "<h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n Comparator selector\n</h1>\n<div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\">\n @switch (selectedGroup) {\n @case (ComparatorGroup.Text) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain string/text. The comparison performed by these comparators is\n case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Text }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n @case (ComparatorGroup.Number) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain numbers.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Number }\" />\n </div>\n }\n @case (ComparatorGroup.Semver) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain semantic versions.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Semver }\" />\n </div>\n }\n @case (ComparatorGroup.DateTime) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain datetimes.\n </p>\n <ng-container\n [ngTemplateOutlet]=\"comparators\"\n [ngTemplateOutletContext]=\"{ group: ComparatorGroup.DateTime }\" />\n </div>\n }\n @case (ComparatorGroup.Array) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain items of a string/text list. The comparison performed by these\n comparators is case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Array }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n }\n</div>\n\n<ng-template #comparators let-group=\"group\">\n <div>\n <mat-radio-group color=\"primary\" (change)=\"comparatorChange($event.value)\">\n <div class=\"comparator-container\">\n @for (comparator of listComparators(group); track $index; let i = $index) {\n <div\n class=\"item\"\n [ngClass]=\"'col-' + (i % 2)\"\n [class.selected]=\"comparator.value === selectedComparator\"\n (click)=\"comparatorChange(comparator.value)\">\n <mat-radio-button\n [value]=\"comparator.value\"\n [disabled]=\"data.readOnly\"\n [checked]=\"comparator.value === selectedComparator\"\n [matTooltip]=\"comparator.description\">\n <div class=\"title\">\n {{ comparator.label }}\n </div>\n </mat-radio-button>\n <div class=\"description\">\n <div class=\"example\">\n @switch (comparator.value) {\n <!-- TEXT -->\n @case (UserComparator.TextEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n EQUALS\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT EQUALS\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [ Android, macOS,\n <span class=\"match-val\">iOS</span>\n ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">bob</span>\n , jane ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">@foo.com</span>\n , @bar.com ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@example.com</span>\n NOT ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ @foo.com, @bar.com ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span>\n CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">test</span>\n , localhost ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span>\n NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- NUMBER -->\n @case (UserComparator.NumberEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n =\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n !=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- SEMVER -->\n @case (UserComparator.SemVerIsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">1.0.0</span>\n , 4.3.5 ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerIsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- DATETIME -->\n @case (UserComparator.DateTimeBefore) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span>\n BEFORE\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DateTimeAfter) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span>\n AFTER\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- ARRAY -->\n @case (UserComparator.ArrayContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span>\n ARRAY CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">Writer</span>\n , Admin ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ArrayDoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span>\n ARRAY NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n\n<ng-template #confidential>\n <p>\n Select how the\n <i>comparison values</i>\n should be persisted:\n </p>\n <div\n matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n [matTooltipDisabled]=\"confidentialEnabled\">\n <mat-radio-group class=\"confidential-container\" color=\"primary\" (change)=\"confidentialChange($event.value)\">\n <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n <mat-radio-button [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Hashed</div>\n <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n We recommend using this option in case of frontend applications targeting users based on sensitive data (like\n email addresses, names, etc).\n </div>\n </div>\n <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n <mat-radio-button\n [value]=\"false\"\n [checked]=\"!isConfidential\"\n [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Cleartext</div>\n <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n You can use this option when you target users based on non-sensitive data. Comparison values will be presented\n as plain text in the\n <i>config JSON</i>\n .\n </div>\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:var(--flag-box-rule-list-chip);opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:var(--flag-description)}.container .comparator-container .selected{border-color:var(--input-outline-focused-color)}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media(max-width:500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4517
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComparatorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4518
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComparatorDialogComponent, isStandalone: true, selector: "app-comparator-dialog", ngImport: i0, template: "<h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n Comparator selector\n</h1>\n<div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\">\n @switch (selectedGroup) {\n @case (ComparatorGroup.Text) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain string/text. The comparison performed by these comparators is\n case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Text }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n @case (ComparatorGroup.Number) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain numbers.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Number }\" />\n </div>\n }\n @case (ComparatorGroup.Semver) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain semantic versions.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Semver }\" />\n </div>\n }\n @case (ComparatorGroup.DateTime) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain datetimes.\n </p>\n <ng-container\n [ngTemplateOutlet]=\"comparators\"\n [ngTemplateOutletContext]=\"{ group: ComparatorGroup.DateTime }\" />\n </div>\n }\n @case (ComparatorGroup.Array) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain items of a string/text list. The comparison performed by these\n comparators is case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Array }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n }\n</div>\n\n<ng-template #comparators let-group=\"group\">\n <div>\n <mat-radio-group color=\"primary\" (change)=\"comparatorChange($event.value)\">\n <div class=\"comparator-container\">\n @for (comparator of listComparators(group); track $index; let i = $index) {\n <div\n class=\"item\"\n [ngClass]=\"'col-' + (i % 2)\"\n [class.selected]=\"comparator.value === selectedComparator\"\n (click)=\"comparatorChange(comparator.value)\">\n <mat-radio-button\n [value]=\"comparator.value\"\n [disabled]=\"data.readOnly\"\n [checked]=\"comparator.value === selectedComparator\"\n [matTooltip]=\"comparator.description\">\n <div class=\"title\">\n {{ comparator.label }}\n </div>\n </mat-radio-button>\n <div class=\"description\">\n <div class=\"example\">\n @switch (comparator.value) {\n <!-- TEXT -->\n @case (UserComparator.TextEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n EQUALS\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT EQUALS\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [ Android, macOS,\n <span class=\"match-val\">iOS</span>\n ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">bob</span>\n , jane ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">@foo.com</span>\n , @bar.com ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@example.com</span>\n NOT ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ @foo.com, @bar.com ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span>\n CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">test</span>\n , localhost ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span>\n NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- NUMBER -->\n @case (UserComparator.NumberEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n =\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n !=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- SEMVER -->\n @case (UserComparator.SemVerIsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">1.0.0</span>\n , 4.3.5 ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerIsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- DATETIME -->\n @case (UserComparator.DateTimeBefore) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span>\n BEFORE\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DateTimeAfter) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span>\n AFTER\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- ARRAY -->\n @case (UserComparator.ArrayContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span>\n ARRAY CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">Writer</span>\n , Admin ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ArrayDoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span>\n ARRAY NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n\n<ng-template #confidential>\n <p>\n Select how the\n <i>comparison values</i>\n should be persisted:\n </p>\n <div\n matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n [matTooltipDisabled]=\"confidentialEnabled\">\n <mat-radio-group class=\"confidential-container\" color=\"primary\" (change)=\"confidentialChange($event.value)\">\n <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n <mat-radio-button [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Hashed</div>\n <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n We recommend using this option in case of frontend applications targeting users based on sensitive data (like\n email addresses, names, etc).\n </div>\n </div>\n <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n <mat-radio-button\n [value]=\"false\"\n [checked]=\"!isConfidential\"\n [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Cleartext</div>\n <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n You can use this option when you target users based on non-sensitive data. Comparison values will be presented\n as plain text in the\n <i>config JSON</i>\n .\n </div>\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:var(--flag-box-rule-list-chip);opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:var(--flag-description)}.container .comparator-container .selected{border-color:var(--input-outline-focused-color)}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media(max-width:500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4530
4519
|
}
|
|
4531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
|
|
4532
4521
|
type: Component,
|
|
4533
4522
|
args: [{ selector: "app-comparator-dialog", imports: [
|
|
4534
4523
|
MatDialogTitle,
|
|
@@ -4775,10 +4764,10 @@ class PopoutListEditorDialogComponent {
|
|
|
4775
4764
|
};
|
|
4776
4765
|
fileReader.readAsText(file);
|
|
4777
4766
|
}
|
|
4778
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4779
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PopoutListEditorDialogComponent, isStandalone: true, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n <div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Table\"\n [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n Table\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Json\"\n [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n JSON\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Csv\"\n [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n CSV with hints\n </mat-button-toggle>\n <mat-button-toggle\n [value]=\"VisualizationType.Csl\"\n [disabled]=\"\n (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n \"\n [matTooltip]=\"\n currentlyHasHints\n ? 'There are hints set to your values so the CSV without hints view is not available'\n : 'Can not switch between views while there are errors in the current view.'\n \"\n [matTooltipDisabled]=\"\n (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n \">\n CSV without hints\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n <p class=\"description\">\n Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n </p>\n <div class=\"controls\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n <mat-label>Filter</mat-label>\n <input\n matInput\n placeholder=\"Filter values and hints.\"\n [(ngModel)]=\"filterValue\"\n (ngModelChange)=\"applyFilter()\" />\n </mat-form-field>\n </div>\n <div class=\"control-button-container\">\n <div\n class=\"add-btn-container\"\n matTooltip=\"Add item\"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \">\n <div\n [matTooltip]=\"\n 'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n \"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n \">\n @if (!data.readOnly) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"add-btn\"\n [disabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \"\n (click)=\"add()\">\n <mat-icon>add_circle</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data.readOnly) {\n <button\n type=\"button\"\n class=\"action-icon-button\"\n mat-icon-button\n matTooltip=\"Remove all\"\n (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </div>\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n <input matInput focus appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n } @else {\n <input matInput appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n }\n @if (row.controls.value.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.value) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header>Hint</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header></th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n @if (!data.readOnly) {\n <button mat-icon-button type=\"button\" matTooltip=\"Remove item\" (click)=\"remove(row)\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\" />\n </div>\n\n @if (visualizationType === VisualizationType.Json) {\n <div class=\"json-format\">\n <div class=\"actions\">\n <div>Modify the items via a JSON text.</div>\n @if (!data.readOnly) {\n <div>\n <input\n #fileInput\n hidden=\"true\"\n type=\"file\"\n accept=\".txt,.json\"\n (click)=\"fileInput.value = ''\"\n (change)=\"loadFile($event)\" />\n <button\n type=\"button\"\n class=\"action-icon-button\"\n mat-icon-button\n matTooltip=\"Load from file (your values will be overwritten)\"\n (click)=\"fileInput.click()\">\n <mat-icon>upload_file</mat-icon>\n </button>\n </div>\n }\n </div>\n <div class=\"json-editor\">\n <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\" />\n </div>\n </div>\n } @else if (visualizationType === VisualizationType.Csv) {\n <div class=\"csv-format\">\n <div class=\"actions\">\n <div>Modify the items via a CSV (values and hints) text.</div>\n @if (!data.readOnly) {\n <div>\n <input\n #fileInput\n hidden=\"true\"\n type=\"file\"\n accept=\".txt,.csv\"\n (click)=\"fileInput.value = ''\"\n (change)=\"loadFile($event)\" />\n <button\n type=\"button\"\n mat-icon-button\n class=\"action-icon-button\"\n matTooltip=\"Load from file (your values will be overwritten)\"\n (click)=\"fileInput.click()\">\n <mat-icon>upload_file</mat-icon>\n </button>\n </div>\n }\n </div>\n <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n <textarea\n matInput\n autofocus\n focus\n rows=\"17\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"17\"\n cdkAutosizeMaxRows=\"17\"\n spellcheck=\"false\"\n [readonly]=\"data.readOnly\"\n [(ngModel)]=\"plainText\"\n (ngModelChange)=\"textValueChanged()\"></textarea>\n </mat-form-field>\n </div>\n } @else if (visualizationType === VisualizationType.Csl) {\n <div class=\"csv-format\">\n <div class=\"actions\">\n <div>Modify the items via a CSV (values only) text.</div>\n @if (!data.readOnly) {\n <div>\n <input\n #fileInput\n hidden=\"true\"\n type=\"file\"\n accept=\".txt,.csv\"\n (click)=\"fileInput.value = ''\"\n (change)=\"loadFile($event)\" />\n <button\n type=\"button\"\n mat-icon-button\n class=\"action-icon-button\"\n matTooltip=\"Load from file (your values will be overwritten)\"\n (click)=\"fileInput.click()\">\n <mat-icon>upload_file</mat-icon>\n </button>\n </div>\n }\n </div>\n <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n <textarea\n matInput\n autofocus\n focus\n rows=\"17\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"17\"\n cdkAutosizeMaxRows=\"17\"\n spellcheck=\"false\"\n [readonly]=\"data.readOnly\"\n [(ngModel)]=\"plainText\"\n (ngModelChange)=\"textValueChanged()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n @if (visualizationType !== VisualizationType.Table && comparisonValueListParseResult) {\n <div>\n @if (!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length) {\n <p class=\"small-chip-input\">\n Preview ({{ comparisonValueListParseResult.comparisonValueList.length }} items)\n <mat-chip-set>\n @for (listValueItem of comparisonValueListParseResult.comparisonValueList | slice: 0 : 10; track $index) {\n <span class=\"chip-container\" [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\">\n <mat-chip-row>\n {{ listValueItem.value }}\n </mat-chip-row>\n </span>\n }\n @if (comparisonValueListParseResult.comparisonValueList.length > 10) {\n <mat-chip-row>\n {{ comparisonValueListParseResult.comparisonValueList.length - 10 }} remaining items...\n </mat-chip-row>\n }\n </mat-chip-set>\n </p>\n }\n @if (comparisonValueListParseResult.error) {\n <mat-error class=\"error\">\n <mat-icon>warning</mat-icon>\n <span>Couldn't parse your values. Please check the format.</span>\n </mat-error>\n }\n </div>\n }\n @if (listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n <mat-error class=\"error\">\n <mat-icon>warning</mat-icon>\n <span>{{ FormHelper.getErrorMessage(listValueFormArray) }}</span>\n </mat-error>\n }\n @if (!valueChanged && listValueFormArray.touched && listValueFormArray.invalid) {\n <mat-error class=\"error\">\n <mat-icon>warning</mat-icon>\n <span>Invalid items. </span>\n <div>\n @if (visualizationType !== VisualizationType.Table || (paginator?.getNumberOfPages() ?? 0) > 1) {\n <button type=\"button\" mat-stroked-button color=\"primary\" class=\"jump\" (click)=\"focusInvalid()\">\n Jump to fix\n </button>\n }\n </div>\n </mat-error>\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n }\n</div>\n", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-bottom:10px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:var(--input-outline-focused-color)}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:var(--diabled-button-color)}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .actions{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.container .error{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .error{margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i2.FileControlDirective, selector: "input[type=file]", inputs: ["writeFile", "extension", "fileSize", "file"] }, { kind: "directive", type: i2.ImageFileControlDirective, selector: "input[type=file]", inputs: ["image"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
|
|
4767
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PopoutListEditorDialogComponent, isStandalone: true, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n <div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Table\"\n [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n Table\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Json\"\n [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n JSON\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Csv\"\n [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n CSV with hints\n </mat-button-toggle>\n <mat-button-toggle\n [value]=\"VisualizationType.Csl\"\n [disabled]=\"\n (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n \"\n [matTooltip]=\"\n currentlyHasHints\n ? 'There are hints set to your values so the CSV without hints view is not available'\n : 'Can not switch between views while there are errors in the current view.'\n \"\n [matTooltipDisabled]=\"\n (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n \">\n CSV without hints\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n <p class=\"description\">\n Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n </p>\n <div class=\"controls\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n <mat-label>Filter</mat-label>\n <input\n matInput\n placeholder=\"Filter values and hints.\"\n [(ngModel)]=\"filterValue\"\n (ngModelChange)=\"applyFilter()\" />\n </mat-form-field>\n </div>\n <div class=\"control-button-container\">\n <div\n class=\"add-btn-container\"\n matTooltip=\"Add item\"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \">\n <div\n [matTooltip]=\"\n 'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n \"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n \">\n @if (!data.readOnly) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"add-btn\"\n [disabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \"\n (click)=\"add()\">\n <mat-icon>add_circle</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data.readOnly) {\n <button\n type=\"button\"\n class=\"action-icon-button\"\n mat-icon-button\n matTooltip=\"Remove all\"\n (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </div>\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n <input matInput focus appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n } @else {\n <input matInput appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n }\n @if (row.controls.value.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.value) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header>Hint</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header></th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n @if (!data.readOnly) {\n <button mat-icon-button type=\"button\" matTooltip=\"Remove item\" (click)=\"remove(row)\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\" />\n </div>\n\n @if (visualizationType === VisualizationType.Json) {\n <div class=\"json-format\">\n <div class=\"actions\">\n <div>Modify the items via a JSON text.</div>\n @if (!data.readOnly) {\n <div>\n <input\n #fileInput\n hidden=\"true\"\n type=\"file\"\n accept=\".txt,.json\"\n (click)=\"fileInput.value = ''\"\n (change)=\"loadFile($event)\" />\n <button\n type=\"button\"\n class=\"action-icon-button\"\n mat-icon-button\n matTooltip=\"Load from file (your values will be overwritten)\"\n (click)=\"fileInput.click()\">\n <mat-icon>upload_file</mat-icon>\n </button>\n </div>\n }\n </div>\n <div class=\"json-editor\">\n <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\" />\n </div>\n </div>\n } @else if (visualizationType === VisualizationType.Csv) {\n <div class=\"csv-format\">\n <div class=\"actions\">\n <div>Modify the items via a CSV (values and hints) text.</div>\n @if (!data.readOnly) {\n <div>\n <input\n #fileInput\n hidden=\"true\"\n type=\"file\"\n accept=\".txt,.csv\"\n (click)=\"fileInput.value = ''\"\n (change)=\"loadFile($event)\" />\n <button\n type=\"button\"\n mat-icon-button\n class=\"action-icon-button\"\n matTooltip=\"Load from file (your values will be overwritten)\"\n (click)=\"fileInput.click()\">\n <mat-icon>upload_file</mat-icon>\n </button>\n </div>\n }\n </div>\n <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n <textarea\n matInput\n autofocus\n focus\n rows=\"17\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"17\"\n cdkAutosizeMaxRows=\"17\"\n spellcheck=\"false\"\n [readonly]=\"data.readOnly\"\n [(ngModel)]=\"plainText\"\n (ngModelChange)=\"textValueChanged()\"></textarea>\n </mat-form-field>\n </div>\n } @else if (visualizationType === VisualizationType.Csl) {\n <div class=\"csv-format\">\n <div class=\"actions\">\n <div>Modify the items via a CSV (values only) text.</div>\n @if (!data.readOnly) {\n <div>\n <input\n #fileInput\n hidden=\"true\"\n type=\"file\"\n accept=\".txt,.csv\"\n (click)=\"fileInput.value = ''\"\n (change)=\"loadFile($event)\" />\n <button\n type=\"button\"\n mat-icon-button\n class=\"action-icon-button\"\n matTooltip=\"Load from file (your values will be overwritten)\"\n (click)=\"fileInput.click()\">\n <mat-icon>upload_file</mat-icon>\n </button>\n </div>\n }\n </div>\n <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n <textarea\n matInput\n autofocus\n focus\n rows=\"17\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"17\"\n cdkAutosizeMaxRows=\"17\"\n spellcheck=\"false\"\n [readonly]=\"data.readOnly\"\n [(ngModel)]=\"plainText\"\n (ngModelChange)=\"textValueChanged()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n @if (visualizationType !== VisualizationType.Table && comparisonValueListParseResult) {\n <div>\n @if (!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length) {\n <p class=\"small-chip-input\">\n Preview ({{ comparisonValueListParseResult.comparisonValueList.length }} items)\n <mat-chip-set>\n @for (listValueItem of comparisonValueListParseResult.comparisonValueList | slice: 0 : 10; track $index) {\n <span class=\"chip-container\" [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\">\n <mat-chip-row>\n {{ listValueItem.value }}\n </mat-chip-row>\n </span>\n }\n @if (comparisonValueListParseResult.comparisonValueList.length > 10) {\n <mat-chip-row>\n {{ comparisonValueListParseResult.comparisonValueList.length - 10 }} remaining items...\n </mat-chip-row>\n }\n </mat-chip-set>\n </p>\n }\n @if (comparisonValueListParseResult.error) {\n <mat-error class=\"error\">\n <mat-icon>warning</mat-icon>\n <span>Couldn't parse your values. Please check the format.</span>\n </mat-error>\n }\n </div>\n }\n @if (listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n <mat-error class=\"error\">\n <mat-icon>warning</mat-icon>\n <span>{{ FormHelper.getErrorMessage(listValueFormArray) }}</span>\n </mat-error>\n }\n @if (!valueChanged && listValueFormArray.touched && listValueFormArray.invalid) {\n <mat-error class=\"error\">\n <mat-icon>warning</mat-icon>\n <span>Invalid items. </span>\n <div>\n @if (visualizationType !== VisualizationType.Table || (paginator?.getNumberOfPages() ?? 0) > 1) {\n <button type=\"button\" mat-stroked-button color=\"primary\" class=\"jump\" (click)=\"focusInvalid()\">\n Jump to fix\n </button>\n }\n </div>\n </mat-error>\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n }\n</div>\n", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-bottom:10px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:var(--input-outline-focused-color)}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:var(--diabled-button-color)}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .actions{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.container .error{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .error{margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i2.FileControlDirective, selector: "input[type=file]", inputs: ["writeFile", "extension", "fileSize", "file"] }, { kind: "directive", type: i2.ImageFileControlDirective, selector: "input[type=file]", inputs: ["image"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
|
|
4780
4769
|
}
|
|
4781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
|
|
4782
4771
|
type: Component,
|
|
4783
4772
|
args: [{ selector: "app-popout-list-editor-dialog", imports: [
|
|
4784
4773
|
MatDialogTitle,
|
|
@@ -5382,10 +5371,10 @@ class UserConditionComponent {
|
|
|
5382
5371
|
isNullCompVal(compVal) {
|
|
5383
5372
|
return !compVal.doubleValue && !compVal.listValue && !compVal.stringValue;
|
|
5384
5373
|
}
|
|
5385
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5386
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (isClearTextComparator) {\n <button\n matPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #semverTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (semantic version)\"\n placeholder=\"Add semantic version ... (1.2.3)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #listTemplate>\n @if (formGroup().controls.comparisonValue.controls.listValue) {\n <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field suffixed\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n @for (\n listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n track $index;\n let i = $index\n ) {\n <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n <mat-chip-row\n class=\"chip\"\n [disabled]=\"readOnly()\"\n [removable]=\"!readOnly()\"\n [editable]=\"!readOnly()\"\n [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n (removed)=\"remove(i)\"\n (edited)=\"edit(i, $event)\">\n {{ listValueItem.controls.value.value }}\n @if (!readOnly()) {\n <button type=\"button\" matChipRemove>\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n </span>\n }\n @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n </button>\n }\n <input\n matChipInputAddOnBlur\n matTooltip=\"Comparison values (list)\"\n [disabled]=\"readOnly()\"\n [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\" />\n </mat-chip-grid>\n @if (isClearTextComparator) {\n <button\n matIconPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"More...\"\n [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n </mat-error>\n }\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n !formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>Invalid items</mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #numberTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n matTooltip=\"Comparison value (number)\"\n placeholder=\"Add number ...\"\n inputDisplayNormalizer\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component datetime\">\n <app-date-time-picker\n dateTooltip=\"Comparison value (date)\"\n timeTooltip=\"Comparison value (time)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n </div>\n }\n</ng-template>\n\n<mat-menu #moreMenu>\n <a mat-menu-item (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n Open advanced editor\n </a>\n <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n <mat-icon>content_copy</mat-icon>\n Copy as CSV (values only)\n </a>\n <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n Remove all\n </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
5374
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5375
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (isClearTextComparator) {\n <button\n matPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #semverTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (semantic version)\"\n placeholder=\"Add semantic version ... (1.2.3)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #listTemplate>\n @if (formGroup().controls.comparisonValue.controls.listValue) {\n <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field suffixed\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n @for (\n listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n track $index;\n let i = $index\n ) {\n <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n <mat-chip-row\n class=\"chip\"\n [disabled]=\"readOnly()\"\n [removable]=\"!readOnly()\"\n [editable]=\"!readOnly()\"\n [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n (removed)=\"remove(i)\"\n (edited)=\"edit(i, $event)\">\n {{ listValueItem.controls.value.value }}\n @if (!readOnly()) {\n <button type=\"button\" matChipRemove>\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n </span>\n }\n @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n </button>\n }\n <input\n matChipInputAddOnBlur\n matTooltip=\"Comparison values (list)\"\n [disabled]=\"readOnly()\"\n [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\" />\n </mat-chip-grid>\n @if (isClearTextComparator) {\n <button\n matIconPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"More...\"\n [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n </mat-error>\n }\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n !formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>Invalid items</mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #numberTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n matTooltip=\"Comparison value (number)\"\n placeholder=\"Add number ...\"\n inputDisplayNormalizer\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component datetime\">\n <app-date-time-picker\n dateTooltip=\"Comparison value (date)\"\n timeTooltip=\"Comparison value (time)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n </div>\n }\n</ng-template>\n\n<mat-menu #moreMenu>\n <a mat-menu-item (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n Open advanced editor\n </a>\n <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n <mat-icon>content_copy</mat-icon>\n Copy as CSV (values only)\n </a>\n <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n Remove all\n </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
5387
5376
|
}
|
|
5388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserConditionComponent, decorators: [{
|
|
5389
5378
|
type: Component,
|
|
5390
5379
|
args: [{ selector: "app-user-condition", providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], imports: [
|
|
5391
5380
|
ConditionChipComponent,
|
|
@@ -5495,10 +5484,10 @@ class ConditionsComponent {
|
|
|
5495
5484
|
}
|
|
5496
5485
|
return true;
|
|
5497
5486
|
}
|
|
5498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
5487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ConditionsComponent, isStandalone: true, selector: "app-conditions", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", lastConditionDeleted: "lastConditionDeleted", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (condition of formArray().controls; track $index; let i = $index) {\n <div class=\"condition\">\n @if (condition.controls.userCondition) {\n <app-user-condition\n class=\"grow\"\n [readOnly]=\"flagState().readOnly\"\n [formGroup]=\"condition.controls.userCondition\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\" />\n } @else if (condition.controls.segmentCondition) {\n <app-segment-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.segmentCondition\"\n [segments]=\"segments()\"\n [canManageSegments]=\"canManageSegments()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" />\n } @else if (condition.controls.prerequisiteFlagCondition) {\n <app-prerequisite-flag-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n [prerequisiteSettings]=\"flagState().prerequisiteSettings\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formArray().controls.length > 1 && !flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n}\n\n@if (formArray().controls.length && !flagState().readOnly) {\n <div class=\"add-cond\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div matTooltip=\"Add AND condition\" class=\"add-btn add-and\" [matMenuTriggerFor]=\"andmenu\">+ AND</div>\n </div>\n}\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Add user condition\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Add segment condition\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add flag condition (prerequisite)\n </a>\n </div>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", "html{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:4px 2px 3px 5px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: UserConditionComponent, selector: "app-user-condition", inputs: ["targetingRuleIndex", "conditionIndex", "readOnly", "featureFlagLimitations", "formGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "segments", "canManageSegments"], outputs: ["createSegmentRequested", "manageSegmentsRequested"] }, { kind: "component", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "prerequisiteSettings", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
5500
5489
|
}
|
|
5501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConditionsComponent, decorators: [{
|
|
5502
5491
|
type: Component,
|
|
5503
5492
|
args: [{ selector: "app-conditions", imports: [
|
|
5504
5493
|
UserConditionComponent,
|
|
@@ -5522,7 +5511,6 @@ class PercentageOptionsComponent {
|
|
|
5522
5511
|
this.formArray = input.required(...(ngDevMode ? [{ debugName: "formArray" }] : []));
|
|
5523
5512
|
this.flagState = input.required(...(ngDevMode ? [{ debugName: "flagState" }] : []));
|
|
5524
5513
|
this.featureFlagLimitations = input.required(...(ngDevMode ? [{ debugName: "featureFlagLimitations" }] : []));
|
|
5525
|
-
this.showPercentageEvaluationAttribute = input.required(...(ngDevMode ? [{ debugName: "showPercentageEvaluationAttribute" }] : []));
|
|
5526
5514
|
this.percentageEvaluationAttribute = input.required(...(ngDevMode ? [{ debugName: "percentageEvaluationAttribute" }] : []));
|
|
5527
5515
|
this.isPercentageOnlyTargetingRule = input.required(...(ngDevMode ? [{ debugName: "isPercentageOnlyTargetingRule" }] : []));
|
|
5528
5516
|
this.canCreateOrUpdateSetting = input.required(...(ngDevMode ? [{ debugName: "canCreateOrUpdateSetting" }] : []));
|
|
@@ -5575,10 +5563,6 @@ class PercentageOptionsComponent {
|
|
|
5575
5563
|
changePercentageEvaluationAttribute() {
|
|
5576
5564
|
this.changePercentageEvaluationAttributeRequested.emit();
|
|
5577
5565
|
}
|
|
5578
|
-
getPercentageEvaluationAttribute() {
|
|
5579
|
-
const percentageEvaluationAttribute = this.percentageEvaluationAttribute();
|
|
5580
|
-
return !percentageEvaluationAttribute ? "Identifier" : percentageEvaluationAttribute;
|
|
5581
|
-
}
|
|
5582
5566
|
getRemainingPredefinedVariations() {
|
|
5583
5567
|
let remainingPredefinedVariations = this.flagState().settingValue.setting.predefinedVariations;
|
|
5584
5568
|
if (remainingPredefinedVariations.length) {
|
|
@@ -5592,10 +5576,10 @@ class PercentageOptionsComponent {
|
|
|
5592
5576
|
.filter((sv, index) => index !== currentIndex && sv.controls.value.controls.predefinedVariationId?.value)
|
|
5593
5577
|
.map(p => p.controls.value.controls.predefinedVariationId.value);
|
|
5594
5578
|
}
|
|
5595
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, showPercentageEvaluationAttribute: { classPropertyName: "showPercentageEvaluationAttribute", publicName: "showPercentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!showPercentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ getPercentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (showPercentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ getPercentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ getPercentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }] }); }
|
|
5579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PercentageOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5580
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!percentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ percentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }] }); }
|
|
5597
5581
|
}
|
|
5598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
|
|
5599
5583
|
type: Component,
|
|
5600
5584
|
args: [{ selector: "app-percentage-options", imports: [
|
|
5601
5585
|
MatFormField,
|
|
@@ -5612,8 +5596,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
5612
5596
|
MatIcon,
|
|
5613
5597
|
FeatureFlagValueComponent,
|
|
5614
5598
|
DigitOnlyDirective,
|
|
5615
|
-
], template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!
|
|
5616
|
-
}], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }],
|
|
5599
|
+
], template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!percentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ percentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5600
|
+
}], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], percentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageEvaluationAttribute", required: true }] }], isPercentageOnlyTargetingRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPercentageOnlyTargetingRule", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], lastPercentageOptionLeft: [{ type: i0.Output, args: ["lastPercentageOptionLeft"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5617
5601
|
|
|
5618
5602
|
class TargetingRuleComponent {
|
|
5619
5603
|
constructor() {
|
|
@@ -5625,7 +5609,6 @@ class TargetingRuleComponent {
|
|
|
5625
5609
|
this.featureFlagLimitations = input.required(...(ngDevMode ? [{ debugName: "featureFlagLimitations" }] : []));
|
|
5626
5610
|
this.canManageSegments = input.required(...(ngDevMode ? [{ debugName: "canManageSegments" }] : []));
|
|
5627
5611
|
this.canCreateOrUpdateSetting = input.required(...(ngDevMode ? [{ debugName: "canCreateOrUpdateSetting" }] : []));
|
|
5628
|
-
this.showPercentageEvaluationAttribute = input.required(...(ngDevMode ? [{ debugName: "showPercentageEvaluationAttribute" }] : []));
|
|
5629
5612
|
this.percentageEvaluationAttribute = input.required(...(ngDevMode ? [{ debugName: "percentageEvaluationAttribute" }] : []));
|
|
5630
5613
|
this.createSegmentRequested = output();
|
|
5631
5614
|
this.manageSegmentsRequested = output();
|
|
@@ -5727,10 +5710,10 @@ class TargetingRuleComponent {
|
|
|
5727
5710
|
subscriptionLimitReachedCalled() {
|
|
5728
5711
|
this.subscriptionLimitReached.emit();
|
|
5729
5712
|
}
|
|
5730
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5731
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TargetingRuleComponent, isStandalone: true, selector: "app-targeting-rule", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, showPercentageEvaluationAttribute: { classPropertyName: "showPercentageEvaluationAttribute", publicName: "showPercentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule", "canCreateOrUpdateSetting"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "viewVariationsRequested"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5713
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TargetingRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5714
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TargetingRuleComponent, isStandalone: true, selector: "app-targeting-rule", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule", "canCreateOrUpdateSetting"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "viewVariationsRequested"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5732
5715
|
}
|
|
5733
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TargetingRuleComponent, decorators: [{
|
|
5734
5717
|
type: Component,
|
|
5735
5718
|
args: [{ selector: "app-targeting-rule", imports: [
|
|
5736
5719
|
ConditionsComponent,
|
|
@@ -5744,8 +5727,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
5744
5727
|
ReactiveFormsModule,
|
|
5745
5728
|
RxReactiveFormsModule,
|
|
5746
5729
|
MatIcon,
|
|
5747
|
-
], template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [
|
|
5748
|
-
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }],
|
|
5730
|
+
], template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5731
|
+
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], percentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageEvaluationAttribute", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], removedAllRules: [{ type: i0.Output, args: ["removedAllRules"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5749
5732
|
|
|
5750
5733
|
class EvaluationFormulaComponent {
|
|
5751
5734
|
constructor() {
|
|
@@ -5756,7 +5739,6 @@ class EvaluationFormulaComponent {
|
|
|
5756
5739
|
this.featureFlagLimitations = input.required(...(ngDevMode ? [{ debugName: "featureFlagLimitations" }] : []));
|
|
5757
5740
|
this.canManageSegments = input.required(...(ngDevMode ? [{ debugName: "canManageSegments" }] : []));
|
|
5758
5741
|
this.canCreateOrUpdateSetting = input.required(...(ngDevMode ? [{ debugName: "canCreateOrUpdateSetting" }] : []));
|
|
5759
|
-
this.showPercentageEvaluationAttribute = input.required(...(ngDevMode ? [{ debugName: "showPercentageEvaluationAttribute" }] : []));
|
|
5760
5742
|
this.createSegmentRequested = output();
|
|
5761
5743
|
this.manageSegmentsRequested = output();
|
|
5762
5744
|
this.addSegmentConditionRequestedWithoutSegments = output();
|
|
@@ -5925,10 +5907,10 @@ class EvaluationFormulaComponent {
|
|
|
5925
5907
|
prerequisiteIds: prerequisiteIds,
|
|
5926
5908
|
});
|
|
5927
5909
|
}
|
|
5928
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5929
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: EvaluationFormulaComponent, isStandalone: true, selector: "app-evaluation-formula", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, showPercentageEvaluationAttribute: { classPropertyName: "showPercentageEvaluationAttribute", publicName: "showPercentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;border:var(--flag-box-rule-border);padding:8px 0;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: ["formGroup", "segments", "flagState", "targetingRuleIndex", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
5910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EvaluationFormulaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EvaluationFormulaComponent, isStandalone: true, selector: "app-evaluation-formula", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;border:var(--flag-box-rule-border);padding:8px 0;border-radius:6px;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: ["formGroup", "segments", "flagState", "targetingRuleIndex", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
5930
5912
|
}
|
|
5931
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EvaluationFormulaComponent, decorators: [{
|
|
5932
5914
|
type: Component,
|
|
5933
5915
|
args: [{ selector: "app-evaluation-formula", imports: [
|
|
5934
5916
|
MatTooltip,
|
|
@@ -5948,8 +5930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
5948
5930
|
FeatureFlagValueComponent,
|
|
5949
5931
|
MatMenu,
|
|
5950
5932
|
MatMenuItem,
|
|
5951
|
-
], template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [
|
|
5952
|
-
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }],
|
|
5933
|
+
], template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;border:var(--flag-box-rule-border);padding:8px 0;border-radius:6px;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5934
|
+
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], recalcAddButtons: [{ type: i0.Output, args: ["recalcAddButtons"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5953
5935
|
|
|
5954
5936
|
class PercentageEvaluationAttributeDialogComponent {
|
|
5955
5937
|
constructor() {
|
|
@@ -6000,10 +5982,10 @@ class PercentageEvaluationAttributeDialogComponent {
|
|
|
6000
5982
|
const percentageEvaluationAttributeFilter = this.formControl.value === this.defaultComparisonAttributes[0] ? null : this.formControl.value;
|
|
6001
5983
|
this.dialogRef.close({ percentageEvaluationAttribute: percentageEvaluationAttributeFilter });
|
|
6002
5984
|
}
|
|
6003
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6004
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
5985
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PercentageEvaluationAttributeDialogComponent, isStandalone: true, selector: "app-percentage-evaluation-attribute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n <p class=\"description\">\n When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n determining whether a user falls within the targeted percentage group.\n </p>\n\n <div class=\"components\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Evaluation attribute</mat-label>\n <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n <mat-select\n [disabled]=\"formControl.disabled\"\n [(value)]=\"selectedValue\"\n (selectionChange)=\"attributeChanged(selectedValue)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"custom\" [hidden]=\"!isCustom()\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Custom attribute</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" />\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n <p class=\"read-more\">\n <a\n href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about percentage-based targeting in the docs.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex}.container .components .custom{margin-left:16px}.container .read-more{padding-top:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
|
|
6005
5987
|
}
|
|
6006
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
|
|
6007
5989
|
type: Component,
|
|
6008
5990
|
args: [{ selector: "app-percentage-evaluation-attribute-dialog", imports: [
|
|
6009
5991
|
MatDialogTitle,
|
|
@@ -6184,10 +6166,10 @@ class FeatureFlagComponent {
|
|
|
6184
6166
|
},
|
|
6185
6167
|
});
|
|
6186
6168
|
}
|
|
6187
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
6169
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:6px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:0;height:100%;position:absolute;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;border-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:0;height:100%;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:6px!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
6189
6171
|
}
|
|
6190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagComponent, decorators: [{
|
|
6191
6173
|
type: Component,
|
|
6192
6174
|
args: [{ selector: "app-feature-flag", imports: [
|
|
6193
6175
|
NgClass,
|
|
@@ -6205,7 +6187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
6205
6187
|
MatMenuItem,
|
|
6206
6188
|
MatDivider,
|
|
6207
6189
|
CopyableValueComponent,
|
|
6208
|
-
], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
|
|
6190
|
+
], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:6px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:0;height:100%;position:absolute;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;border-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:0;height:100%;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:6px!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
|
|
6209
6191
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], hasOtherEnvironment: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOtherEnvironment", required: true }] }], environmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentName", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], predefinedVariationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "predefinedVariationsEnabled", required: true }] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], expandedChanged: [{ type: i0.Output, args: ["expandedChanged"] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], recalcAddButtons: [{ type: i0.Output, args: ["recalcAddButtons"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
6210
6192
|
|
|
6211
6193
|
class FeatureFlagItemComponent extends BaseComponent {
|
|
@@ -6229,6 +6211,7 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
6229
6211
|
this.expandedStateChanged = output();
|
|
6230
6212
|
this.formValuesChanged = output();
|
|
6231
6213
|
this.loading = true;
|
|
6214
|
+
this.submitting = false;
|
|
6232
6215
|
this.showFeedBackMessage = false;
|
|
6233
6216
|
this.hasSettingValues = false;
|
|
6234
6217
|
this.hasOtherEnvironment = false;
|
|
@@ -6338,12 +6321,14 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
6338
6321
|
this.updateSettingValues(value);
|
|
6339
6322
|
}
|
|
6340
6323
|
updateSettingValues(updateModel, reason) {
|
|
6324
|
+
this.submitting = true;
|
|
6341
6325
|
this.createSettingValuesV2Service()
|
|
6342
6326
|
.replaceSettingValueV2(this.environmentId(), this.settingId(), updateModel, reason)
|
|
6343
6327
|
.subscribe({
|
|
6344
6328
|
next: settingValues => {
|
|
6345
6329
|
this.handleFetchedSettingValues(settingValues);
|
|
6346
6330
|
this.messagingService.showSuccessSnack("Settings saved successfully.", 5000);
|
|
6331
|
+
this.submitting = false;
|
|
6347
6332
|
this.saveSucceeded.emit();
|
|
6348
6333
|
},
|
|
6349
6334
|
error: (error) => {
|
|
@@ -6567,12 +6552,12 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
6567
6552
|
},
|
|
6568
6553
|
});
|
|
6569
6554
|
}
|
|
6570
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagItemComponent, isStandalone: true, selector: "app-feature-flag-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n @if (!loading) {\n <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n <app-feature-flag\n [formGroup]=\"formGroup\"\n [flagState]=\"flagState\"\n [segments]=\"segments\"\n [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n [hasOtherEnvironment]=\"false\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [environmentName]=\"settingFormula.environment.name\"\n [deleteSettingText]=\"deleteSettingText()\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [predefinedVariationsEnabled]=\"true\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($event)\"\n (viewVariationsRequested)=\"viewVariations($event)\" />\n </div>\n @if (!settingFormula.readOnly && formGroup!.dirty) {\n <div class=\"save\">\n <button\n class=\"save-button\"\n mat-flat-button\n color=\"warn\"\n type=\"submit\"\n [class.animate]=\"formGroup.dirty\"\n [track]=\"['save & publish click', 'feature flags and settings']\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button\n type=\"button\"\n class=\"revert-button\"\n mat-stroked-button\n [track]=\"['revert click', 'feature flags and settings']\"\n (click)=\"revert()\">\n <span>Revert</span>\n </button>\n @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n <div class=\"feedback\">\n @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>\n Something went wrong and we could not save your settings. You can try again or\n <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n </span>\n </div>\n }\n @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>Oh no! A feature flag has invalid or missing data. </span>\n </div>\n }\n </div>\n }\n </div>\n }\n </form>\n }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting", "predefinedVariationsEnabled"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
6555
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6556
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FeatureFlagItemComponent, isStandalone: true, selector: "app-feature-flag-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n @if (!loading) {\n <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n <app-feature-flag\n [formGroup]=\"formGroup\"\n [flagState]=\"flagState\"\n [segments]=\"segments\"\n [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n [hasOtherEnvironment]=\"false\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [environmentName]=\"settingFormula.environment.name\"\n [deleteSettingText]=\"deleteSettingText()\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [predefinedVariationsEnabled]=\"true\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($event)\"\n (viewVariationsRequested)=\"viewVariations($event)\" />\n </div>\n @if (!settingFormula.readOnly && formGroup!.dirty) {\n <div class=\"save\">\n <button\n class=\"save-button\"\n mat-flat-button\n color=\"warn\"\n type=\"submit\"\n [class.animate]=\"formGroup.dirty\"\n [disabled]=\"!formGroup.valid || submitting\"\n [track]=\"['save & publish click', 'feature flags and settings']\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button\n type=\"button\"\n class=\"revert-button\"\n mat-stroked-button\n [disabled]=\"!formGroup.valid || submitting\"\n [track]=\"['revert click', 'feature flags and settings']\"\n (click)=\"revert()\">\n <span>Revert</span>\n </button>\n @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n <div class=\"feedback\">\n @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>\n Something went wrong and we could not save your settings. You can try again or\n <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n </span>\n </div>\n }\n @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>Oh no! A feature flag has invalid or missing data. </span>\n </div>\n }\n </div>\n }\n </div>\n }\n </form>\n }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting", "predefinedVariationsEnabled"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
6572
6557
|
}
|
|
6573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
|
|
6574
6559
|
type: Component,
|
|
6575
|
-
args: [{ selector: "app-feature-flag-item", imports: [FormsModule, ReactiveFormsModule, RxReactiveFormsModule, NgClass, FeatureFlagComponent, MatButton, TrackingDirective, MatIcon], template: "<div class=\"container\">\n @if (!loading) {\n <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n <app-feature-flag\n [formGroup]=\"formGroup\"\n [flagState]=\"flagState\"\n [segments]=\"segments\"\n [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n [hasOtherEnvironment]=\"false\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [environmentName]=\"settingFormula.environment.name\"\n [deleteSettingText]=\"deleteSettingText()\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [predefinedVariationsEnabled]=\"true\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($event)\"\n (viewVariationsRequested)=\"viewVariations($event)\" />\n </div>\n @if (!settingFormula.readOnly && formGroup!.dirty) {\n <div class=\"save\">\n <button\n class=\"save-button\"\n mat-flat-button\n color=\"warn\"\n type=\"submit\"\n [class.animate]=\"formGroup.dirty\"\n [track]=\"['save & publish click', 'feature flags and settings']\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button\n type=\"button\"\n class=\"revert-button\"\n mat-stroked-button\n [track]=\"['revert click', 'feature flags and settings']\"\n (click)=\"revert()\">\n <span>Revert</span>\n </button>\n @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n <div class=\"feedback\">\n @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>\n Something went wrong and we could not save your settings. You can try again or\n <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n </span>\n </div>\n }\n @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>Oh no! A feature flag has invalid or missing data. </span>\n </div>\n }\n </div>\n }\n </div>\n }\n </form>\n }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
|
|
6560
|
+
args: [{ selector: "app-feature-flag-item", imports: [FormsModule, ReactiveFormsModule, RxReactiveFormsModule, NgClass, FeatureFlagComponent, MatButton, TrackingDirective, MatIcon], template: "<div class=\"container\">\n @if (!loading) {\n <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n <app-feature-flag\n [formGroup]=\"formGroup\"\n [flagState]=\"flagState\"\n [segments]=\"segments\"\n [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n [hasOtherEnvironment]=\"false\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [environmentName]=\"settingFormula.environment.name\"\n [deleteSettingText]=\"deleteSettingText()\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n [predefinedVariationsEnabled]=\"true\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($event)\"\n (viewVariationsRequested)=\"viewVariations($event)\" />\n </div>\n @if (!settingFormula.readOnly && formGroup!.dirty) {\n <div class=\"save\">\n <button\n class=\"save-button\"\n mat-flat-button\n color=\"warn\"\n type=\"submit\"\n [class.animate]=\"formGroup.dirty\"\n [disabled]=\"!formGroup.valid || submitting\"\n [track]=\"['save & publish click', 'feature flags and settings']\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button\n type=\"button\"\n class=\"revert-button\"\n mat-stroked-button\n [disabled]=\"!formGroup.valid || submitting\"\n [track]=\"['revert click', 'feature flags and settings']\"\n (click)=\"revert()\">\n <span>Revert</span>\n </button>\n @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n <div class=\"feedback\">\n @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>\n Something went wrong and we could not save your settings. You can try again or\n <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n </span>\n </div>\n }\n @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n <div class=\"error\">\n <span>Oh no! A feature flag has invalid or missing data. </span>\n </div>\n }\n </div>\n }\n </div>\n }\n </form>\n }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
|
|
6576
6561
|
}], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], saveFailed: [{ type: i0.Output, args: ["saveFailed"] }], expandedStateChanged: [{ type: i0.Output, args: ["expandedStateChanged"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
|
|
6577
6562
|
|
|
6578
6563
|
class LinkFeatureFlagComponent {
|
|
@@ -6604,6 +6589,7 @@ class LinkFeatureFlagComponent {
|
|
|
6604
6589
|
validators: [Validators.required],
|
|
6605
6590
|
}),
|
|
6606
6591
|
});
|
|
6592
|
+
this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
|
|
6607
6593
|
}
|
|
6608
6594
|
ngOnInit() {
|
|
6609
6595
|
this.formGroup.reset();
|
|
@@ -6621,21 +6607,26 @@ class LinkFeatureFlagComponent {
|
|
|
6621
6607
|
if (!this.formGroup.valid) {
|
|
6622
6608
|
return;
|
|
6623
6609
|
}
|
|
6610
|
+
this.submitting.set(true);
|
|
6624
6611
|
this.linkInitiated.emit({
|
|
6625
6612
|
environmentId: this.formGroup.controls.environmentId.value,
|
|
6626
6613
|
settingId: this.formGroup.controls.settingId.value,
|
|
6614
|
+
callback: () => this.linkingFinished(),
|
|
6627
6615
|
});
|
|
6628
6616
|
}
|
|
6617
|
+
linkingFinished() {
|
|
6618
|
+
this.submitting.set(false);
|
|
6619
|
+
}
|
|
6629
6620
|
cancel() {
|
|
6630
6621
|
this.cancelInitiated.emit();
|
|
6631
6622
|
}
|
|
6632
6623
|
selectDropdownPanelChanged(useSelector) {
|
|
6633
6624
|
this.selectDropdownPanelChangedReqested.emit(useSelector);
|
|
6634
6625
|
}
|
|
6635
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6636
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
6626
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkFeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6627
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LinkFeatureFlagComponent, isStandalone: true, selector: "app-link-feature-flag", inputs: { authorizationParameters: { classPropertyName: "authorizationParameters", publicName: "authorizationParameters", isSignal: true, isRequired: false, transformFunction: null }, hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkInitiated: "linkInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, ngImport: i0, template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"add()\">\n <div>\n <app-product-select\n name=\"productId\"\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [customDropdown]=\"true\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n @if (formGroup.controls.configId.value) {\n <app-setting-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [configId]=\"formGroup.controls.configId.value\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.settingId\"\n [customDropdown]=\"true\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n </div>\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"submitting() || !formGroup.valid\">\n {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { kind: "component", type: SettingSelectComponent, selector: "app-setting-select", inputs: ["valueFormControl", "configId"] }] }); }
|
|
6637
6628
|
}
|
|
6638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkFeatureFlagComponent, decorators: [{
|
|
6639
6630
|
type: Component,
|
|
6640
6631
|
args: [{ selector: "app-link-feature-flag", imports: [
|
|
6641
6632
|
FormsModule,
|
|
@@ -6646,7 +6637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
6646
6637
|
ConfigSelectComponent,
|
|
6647
6638
|
EnvironmentSelectComponent,
|
|
6648
6639
|
SettingSelectComponent,
|
|
6649
|
-
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"add()\">\n <div>\n <app-product-select\n name=\"productId\"\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [customDropdown]=\"true\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n @if (formGroup.controls.configId.value) {\n <app-setting-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [configId]=\"formGroup.controls.configId.value\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.settingId\"\n [customDropdown]=\"true\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n </div>\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"] }]
|
|
6640
|
+
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"add()\">\n <div>\n <app-product-select\n name=\"productId\"\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [customDropdown]=\"true\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n @if (formGroup.controls.configId.value) {\n <app-setting-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [configId]=\"formGroup.controls.configId.value\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n [valueFormControl]=\"formGroup.controls.settingId\"\n [customDropdown]=\"true\"\n (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n }\n </div>\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"submitting() || !formGroup.valid\">\n {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"] }]
|
|
6650
6641
|
}], propDecorators: { authorizationParameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorizationParameters", required: false }] }], hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], linkInitiated: [{ type: i0.Output, args: ["linkInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }] } });
|
|
6651
6642
|
|
|
6652
6643
|
class ErrorHandler {
|
|
@@ -6698,10 +6689,10 @@ class BoxComponent {
|
|
|
6698
6689
|
this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
6699
6690
|
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
6700
6691
|
}
|
|
6701
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6702
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
6692
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6693
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BoxComponent, isStandalone: true, selector: "app-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class.info-box]=\"type() === 'info'\" [class.warn-box]=\"type() === 'warn'\" [class.error-box]=\"type() === 'error'\">\n <div class=\"box-container\" [class.titleless]=\"!title()\">\n @if (title()) {\n <div class=\"box-header\">\n <div class=\"box-icon\"></div>\n <div class=\"box-title\">{{ title() }}</div>\n </div>\n } @else {\n <div class=\"box-icon\"></div>\n }\n <div class=\"box-content\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal}.admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{margin-right:8px}.admonition-box,.error-box,.warn-box,.info-box{border-radius:4px;font-size:12px;width:fit-content;display:flex;align-items:center;color:var(--admonition-box-font-color);line-height:normal}.admonition-box .box-container,.error-box .box-container,.warn-box .box-container,.info-box .box-container{padding:.5rem .8rem .5rem .5rem;display:flex;flex-direction:column}.admonition-box .box-container .box-header,.error-box .box-container .box-header,.warn-box .box-container .box-header,.info-box .box-container .box-header{display:flex;align-items:center;margin-bottom:4px}.admonition-box .box-container .box-header .box-title,.error-box .box-container .box-header .box-title,.warn-box .box-container .box-header .box-title,.info-box .box-container .box-header .box-title{font-size:13px;font-weight:700}.admonition-box .box-container .box-icon,.error-box .box-container .box-icon,.warn-box .box-container .box-icon,.info-box .box-container .box-icon{align-self:flex-start;height:24px}.admonition-box .box-container .box-content,.error-box .box-container .box-content,.warn-box .box-container .box-content,.info-box .box-container .box-content{margin:0 4px 0 33px;line-height:1.4}.admonition-box .box-container .box-content a,.error-box .box-container .box-content a,.warn-box .box-container .box-content a,.info-box .box-container .box-content a{color:var(--admonition-box-link-color)}.admonition-box .box-container .box-content ul,.error-box .box-container .box-content ul,.warn-box .box-container .box-content ul,.info-box .box-container .box-content ul{padding-inline-start:17px;margin-block-start:0px;margin-block-end:0px}.admonition-box .box-container.titleless,.error-box .box-container.titleless,.warn-box .box-container.titleless,.info-box .box-container.titleless{padding:.5rem .8rem .4rem .5rem;flex-direction:row;align-items:center;margin:0}.admonition-box .box-container.titleless .box-content,.error-box .box-container.titleless .box-content,.warn-box .box-container.titleless .box-content,.info-box .box-container.titleless .box-content{margin:0}.info-box{border:1px solid var(--admonition-box-info-border-color);background-color:var(--admonition-box-info-background-color)}.info-box .box-icon:before{content:var(--info-icon-content);color:var(--info-icon-color)}.warn-box{border:1px solid var(--admonition-box-warn-border-color);background-color:var(--admonition-box-warn-background-color)}.warn-box .box-icon:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.error-box{border:1px solid var(--admonition-box-error-border-color);background-color:var(--admonition-box-error-background-color)}.error-box .box-icon:before{content:var(--error-icon-content);color:var(--error-icon-color)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6703
6694
|
}
|
|
6704
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BoxComponent, decorators: [{
|
|
6705
6696
|
type: Component,
|
|
6706
6697
|
args: [{ selector: "app-box", encapsulation: ViewEncapsulation.None, template: "<div [class.info-box]=\"type() === 'info'\" [class.warn-box]=\"type() === 'warn'\" [class.error-box]=\"type() === 'error'\">\n <div class=\"box-container\" [class.titleless]=\"!title()\">\n @if (title()) {\n <div class=\"box-header\">\n <div class=\"box-icon\"></div>\n <div class=\"box-title\">{{ title() }}</div>\n </div>\n } @else {\n <div class=\"box-icon\"></div>\n }\n <div class=\"box-content\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal}.admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{margin-right:8px}.admonition-box,.error-box,.warn-box,.info-box{border-radius:4px;font-size:12px;width:fit-content;display:flex;align-items:center;color:var(--admonition-box-font-color);line-height:normal}.admonition-box .box-container,.error-box .box-container,.warn-box .box-container,.info-box .box-container{padding:.5rem .8rem .5rem .5rem;display:flex;flex-direction:column}.admonition-box .box-container .box-header,.error-box .box-container .box-header,.warn-box .box-container .box-header,.info-box .box-container .box-header{display:flex;align-items:center;margin-bottom:4px}.admonition-box .box-container .box-header .box-title,.error-box .box-container .box-header .box-title,.warn-box .box-container .box-header .box-title,.info-box .box-container .box-header .box-title{font-size:13px;font-weight:700}.admonition-box .box-container .box-icon,.error-box .box-container .box-icon,.warn-box .box-container .box-icon,.info-box .box-container .box-icon{align-self:flex-start;height:24px}.admonition-box .box-container .box-content,.error-box .box-container .box-content,.warn-box .box-container .box-content,.info-box .box-container .box-content{margin:0 4px 0 33px;line-height:1.4}.admonition-box .box-container .box-content a,.error-box .box-container .box-content a,.warn-box .box-container .box-content a,.info-box .box-container .box-content a{color:var(--admonition-box-link-color)}.admonition-box .box-container .box-content ul,.error-box .box-container .box-content ul,.warn-box .box-container .box-content ul,.info-box .box-container .box-content ul{padding-inline-start:17px;margin-block-start:0px;margin-block-end:0px}.admonition-box .box-container.titleless,.error-box .box-container.titleless,.warn-box .box-container.titleless,.info-box .box-container.titleless{padding:.5rem .8rem .4rem .5rem;flex-direction:row;align-items:center;margin:0}.admonition-box .box-container.titleless .box-content,.error-box .box-container.titleless .box-content,.warn-box .box-container.titleless .box-content,.info-box .box-container.titleless .box-content{margin:0}.info-box{border:1px solid var(--admonition-box-info-border-color);background-color:var(--admonition-box-info-background-color)}.info-box .box-icon:before{content:var(--info-icon-content);color:var(--info-icon-color)}.warn-box{border:1px solid var(--admonition-box-warn-border-color);background-color:var(--admonition-box-warn-background-color)}.warn-box .box-icon:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.error-box{border:1px solid var(--admonition-box-error-border-color);background-color:var(--admonition-box-error-background-color)}.error-box .box-icon:before{content:var(--error-icon-content);color:var(--error-icon-color)}\n"] }]
|
|
6707
6698
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
|
|
@@ -6730,7 +6721,14 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6730
6721
|
this.SettingTypeEnum = SettingType;
|
|
6731
6722
|
this.FormHelper = FormHelper;
|
|
6732
6723
|
this.EvaluationVersion = EvaluationVersion;
|
|
6733
|
-
this.
|
|
6724
|
+
this.loadingProduct = signal(false, ...(ngDevMode ? [{ debugName: "loadingProduct" }] : []));
|
|
6725
|
+
this.loadingEnviroments = signal(false, ...(ngDevMode ? [{ debugName: "loadingEnviroments" }] : []));
|
|
6726
|
+
this.loadinOrganizationLimitations = signal(false, ...(ngDevMode ? [{ debugName: "loadinOrganizationLimitations" }] : []));
|
|
6727
|
+
this.loadingConfigurations = signal(false, ...(ngDevMode ? [{ debugName: "loadingConfigurations" }] : []));
|
|
6728
|
+
this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
6729
|
+
this.loadingComputed = computed(() => this.loading() || this.loadingProduct() || this.loadingEnviroments()
|
|
6730
|
+
|| this.loadinOrganizationLimitations() || this.loadingConfigurations(), ...(ngDevMode ? [{ debugName: "loadingComputed" }] : []));
|
|
6731
|
+
this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
|
|
6734
6732
|
this.dataSource = new MatTableDataSource([]);
|
|
6735
6733
|
this.configEvaluationVersion = EvaluationVersion.V2;
|
|
6736
6734
|
this.maxPredefinedVariations = 50;
|
|
@@ -6751,7 +6749,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6751
6749
|
this.doubleValidators = [Validators.required, validateNumberNan, Validators.min(-Number.MAX_VALUE), Validators.max(Number.MAX_VALUE)];
|
|
6752
6750
|
}
|
|
6753
6751
|
ngOnInit() {
|
|
6754
|
-
this.loading
|
|
6752
|
+
this.loading.set(true);
|
|
6755
6753
|
this.formGroup = this.formBuilder.group({
|
|
6756
6754
|
productId: new FormControl(this.presetProductAndConfig()?.productId ? this.presetProductAndConfig().productId : "", {
|
|
6757
6755
|
nonNullable: true,
|
|
@@ -6802,11 +6800,9 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6802
6800
|
});
|
|
6803
6801
|
//Product valueChanges
|
|
6804
6802
|
this.formGroup.controls.productId.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
|
|
6805
|
-
this.
|
|
6806
|
-
let loadingProduct = true;
|
|
6807
|
-
let loadingEnviroments = true;
|
|
6808
|
-
let loadinOrganizationLimitations = false;
|
|
6803
|
+
this.loadingProduct.set(true);
|
|
6809
6804
|
this.createProductsService().getProduct(value).subscribe(product => {
|
|
6805
|
+
this.loadingEnviroments.set(true);
|
|
6810
6806
|
this.createEnvironmentsService().getEnvironments(product.productId).subscribe(enviroments => {
|
|
6811
6807
|
this.selectedProductEnviroment = enviroments;
|
|
6812
6808
|
this.formGroup.controls.initialValues = new FormArray(enviroments.map(env => this.formBuilder.group({
|
|
@@ -6815,32 +6811,53 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6815
6811
|
settingValue: this.initialValueForAllFormControlFunction(this.formGroup.controls.settingType.value),
|
|
6816
6812
|
predefinedVariationIndex: new FormControl(0, { nonNullable: true }),
|
|
6817
6813
|
})));
|
|
6818
|
-
loadingEnviroments
|
|
6819
|
-
this.loading = loadingEnviroments || loadinOrganizationLimitations || loadingProduct;
|
|
6814
|
+
this.loadingEnviroments.set(false);
|
|
6820
6815
|
});
|
|
6821
6816
|
if (this.selectedProductOrganiaztionId !== product.organization.organizationId) {
|
|
6822
|
-
loadinOrganizationLimitations
|
|
6817
|
+
this.loadinOrganizationLimitations.set(true);
|
|
6823
6818
|
this.selectedProductOrganiaztionId = product.organization.organizationId;
|
|
6824
6819
|
this.createOrganizationService().getOrganizationLimitations(this.selectedProductOrganiaztionId).subscribe(organizationLimitations => {
|
|
6825
6820
|
this.maxStringFlagValueLength = organizationLimitations.maxStringFlagValueLength;
|
|
6826
6821
|
this.maxPredefinedVariations = organizationLimitations.maxPredefinedVariations;
|
|
6827
6822
|
this.stringValidators = [Validators.required, Validators.maxLength(this.maxStringFlagValueLength)];
|
|
6828
|
-
loadinOrganizationLimitations
|
|
6829
|
-
this.loading = loadingEnviroments || loadinOrganizationLimitations || loadingProduct;
|
|
6823
|
+
this.loadinOrganizationLimitations.set(false);
|
|
6830
6824
|
});
|
|
6831
6825
|
}
|
|
6832
|
-
loadingProduct
|
|
6833
|
-
this.loading = loadingEnviroments || loadinOrganizationLimitations || loadingProduct;
|
|
6826
|
+
this.loadingProduct.set(false);
|
|
6834
6827
|
});
|
|
6835
6828
|
});
|
|
6836
6829
|
//Config valueChanges
|
|
6837
6830
|
this.formGroup.controls.configId.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
|
|
6838
|
-
this.
|
|
6831
|
+
this.loadingConfigurations.set(true);
|
|
6839
6832
|
this.createConfigsService().getConfig(value).subscribe(config => {
|
|
6840
6833
|
this.configEvaluationVersion = config.evaluationVersion;
|
|
6841
|
-
this.
|
|
6834
|
+
this.loadingConfigurations.set(false);
|
|
6842
6835
|
});
|
|
6843
6836
|
});
|
|
6837
|
+
//InitialValuesPerEnvironment valueChanges
|
|
6838
|
+
this.formGroup.controls.initialValuesPerEnvironment.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
|
|
6839
|
+
if (value) {
|
|
6840
|
+
this.formGroup.controls.initialValues.enable();
|
|
6841
|
+
this.formGroup.controls.initialValueForAll.disable();
|
|
6842
|
+
this.formGroup.controls.initialValueForAllVariationIndex.disable();
|
|
6843
|
+
}
|
|
6844
|
+
else {
|
|
6845
|
+
this.formGroup.controls.initialValues.disable();
|
|
6846
|
+
this.formGroup.controls.initialValueForAll.enable();
|
|
6847
|
+
this.formGroup.controls.initialValueForAllVariationIndex.enable();
|
|
6848
|
+
}
|
|
6849
|
+
this.formGroup.updateValueAndValidity();
|
|
6850
|
+
});
|
|
6851
|
+
//UseVariations valueChanges
|
|
6852
|
+
this.formGroup.controls.useVariations.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
|
|
6853
|
+
if (value) {
|
|
6854
|
+
this.formGroup.controls.predefinedVariations.enable();
|
|
6855
|
+
}
|
|
6856
|
+
else {
|
|
6857
|
+
this.formGroup.controls.predefinedVariations.disable();
|
|
6858
|
+
}
|
|
6859
|
+
this.formGroup.updateValueAndValidity();
|
|
6860
|
+
});
|
|
6844
6861
|
//InitialValueForAll valueChanges
|
|
6845
6862
|
this.formGroup.controls.initialValueForAll.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
|
|
6846
6863
|
this.formGroup.controls.initialValues.controls.forEach(c => c.controls.settingValue.patchValue(value, { emitEvent: false }));
|
|
@@ -6862,7 +6879,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6862
6879
|
this.formGroup.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
6863
6880
|
this.resizeRequested.emit();
|
|
6864
6881
|
});
|
|
6865
|
-
this.loading
|
|
6882
|
+
this.loading.set(false);
|
|
6866
6883
|
}
|
|
6867
6884
|
initialValueForAllFormControlFunction(settingType) {
|
|
6868
6885
|
switch (settingType) {
|
|
@@ -6900,10 +6917,18 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6900
6917
|
this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, void 0, void 0, 1.618));
|
|
6901
6918
|
break;
|
|
6902
6919
|
}
|
|
6903
|
-
this.formGroup.controls.initialValueForAll
|
|
6920
|
+
this.formGroup.controls.initialValueForAll.clearValidators();
|
|
6921
|
+
this.formGroup.setControl("initialValueForAll", this.initialValueForAllFormControlFunction(newSettingType));
|
|
6922
|
+
//InitialValueForAll valueChanges set again after setControl
|
|
6923
|
+
this.formGroup.controls.initialValueForAll.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
|
|
6924
|
+
this.formGroup.controls.initialValues.controls.forEach(c => {
|
|
6925
|
+
c.controls.settingValue.patchValue(value, { emitEvent: false });
|
|
6926
|
+
});
|
|
6927
|
+
});
|
|
6904
6928
|
this.formGroup.controls.initialValues.controls.forEach(initValueForEnv => {
|
|
6905
|
-
initValueForEnv.
|
|
6929
|
+
initValueForEnv.setControl("settingValue", this.initialValueForAllFormControlFunction(newSettingType));
|
|
6906
6930
|
});
|
|
6931
|
+
this.formGroup.updateValueAndValidity();
|
|
6907
6932
|
this.setDataSource();
|
|
6908
6933
|
}
|
|
6909
6934
|
setDataSource() {
|
|
@@ -6913,6 +6938,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6913
6938
|
if (!this.formGroup.valid) {
|
|
6914
6939
|
return;
|
|
6915
6940
|
}
|
|
6941
|
+
this.submitting.set(true);
|
|
6916
6942
|
const newSettingType = this.formGroup.controls.settingType.value;
|
|
6917
6943
|
const predefinedVariations = this.formGroup.controls.useVariations.value
|
|
6918
6944
|
? this.formGroup.controls.predefinedVariations.controls.map(c => ({
|
|
@@ -6952,17 +6978,23 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6952
6978
|
})
|
|
6953
6979
|
.subscribe({
|
|
6954
6980
|
next: setting => {
|
|
6981
|
+
this.submitting.set(false);
|
|
6955
6982
|
this.createInitiated.emit({
|
|
6956
6983
|
environmentId: this.formGroup.controls.environmentId.value,
|
|
6957
6984
|
settingId: setting.settingId,
|
|
6985
|
+
callback: () => this.linkingFinished(),
|
|
6958
6986
|
});
|
|
6959
6987
|
},
|
|
6960
6988
|
error: (error) => {
|
|
6989
|
+
this.submitting.set(false);
|
|
6961
6990
|
ErrorHandler.handleErrors(this.formGroup, error);
|
|
6962
6991
|
console.log(error);
|
|
6963
6992
|
},
|
|
6964
6993
|
});
|
|
6965
6994
|
}
|
|
6995
|
+
linkingFinished() {
|
|
6996
|
+
this.submitting.set(false);
|
|
6997
|
+
}
|
|
6966
6998
|
cancel() {
|
|
6967
6999
|
this.cancelInitiated.emit();
|
|
6968
7000
|
}
|
|
@@ -7070,10 +7102,10 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
7070
7102
|
getColorIndex(row, index) {
|
|
7071
7103
|
return getPredefinedVariationColorIndex(this.formGroup.controls.settingType.value, getRawPredefinedVariationValue(row.controls.value), index);
|
|
7072
7104
|
}
|
|
7073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
7074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, flagSectionHeader: { classPropertyName: "flagSectionHeader", publicName: "flagSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, flagSectionDescription: { classPropertyName: "flagSectionDescription", publicName: "flagSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, linkSectionHeader: { classPropertyName: "linkSectionHeader", publicName: "linkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, linkSectionDescription: { classPropertyName: "linkSectionDescription", publicName: "linkSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, hideLinkSection: { classPropertyName: "hideLinkSection", publicName: "hideLinkSection", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" [panelClass]=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <h3>How do you want to set values?</h3>\n <div class=\"value-mode-question\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\" class=\"choose\">\n <mat-option [value]=\"false\">\n {{\n formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n ? \"use an ON/OFF toggle\"\n : \"enter free-form values\"\n }}\n </mat-option>\n <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n </mat-select>\n </mat-form-field>\n <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n </a>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n <div class=\"add-variation\">\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n } @else {\n <app-box type=\"info\" class=\"bool-variation-info\">\n For more variations, create a flag of another type.\n <a\n href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about setting types.\n </app-box>\n }\n </div>\n </div>\n }\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }] }); }
|
|
7105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, flagSectionHeader: { classPropertyName: "flagSectionHeader", publicName: "flagSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, flagSectionDescription: { classPropertyName: "flagSectionDescription", publicName: "flagSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, linkSectionHeader: { classPropertyName: "linkSectionHeader", publicName: "linkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, linkSectionDescription: { classPropertyName: "linkSectionDescription", publicName: "linkSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, hideLinkSection: { classPropertyName: "hideLinkSection", publicName: "hideLinkSection", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loadingComputed()) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <h3>How do you want to set values?</h3>\n <div class=\"value-mode-question\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\" class=\"choose\">\n <mat-option [value]=\"false\">\n {{\n formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n ? \"use an ON/OFF toggle\"\n : \"enter free-form values\"\n }}\n </mat-option>\n <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n </mat-select>\n </mat-form-field>\n <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n </a>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n <div class=\"add-variation\">\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n } @else {\n <app-box type=\"info\" class=\"bool-variation-info\">\n For more variations, create a flag of another type.\n <a\n href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about setting types.\n </app-box>\n }\n </div>\n </div>\n }\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button\n mat-raised-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }] }); }
|
|
7075
7107
|
}
|
|
7076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
7108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
|
|
7077
7109
|
type: Component,
|
|
7078
7110
|
args: [{ selector: "app-create-feature-flag", imports: [
|
|
7079
7111
|
AutofocusDirective,
|
|
@@ -7109,7 +7141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
7109
7141
|
MatIconButton,
|
|
7110
7142
|
LoaderComponent,
|
|
7111
7143
|
BoxComponent,
|
|
7112
|
-
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" [panelClass]=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <h3>How do you want to set values?</h3>\n <div class=\"value-mode-question\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\" class=\"choose\">\n <mat-option [value]=\"false\">\n {{\n formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n ? \"use an ON/OFF toggle\"\n : \"enter free-form values\"\n }}\n </mat-option>\n <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n </mat-select>\n </mat-form-field>\n <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n </a>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n <div class=\"add-variation\">\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n } @else {\n <app-box type=\"info\" class=\"bool-variation-info\">\n For more variations, create a flag of another type.\n <a\n href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about setting types.\n </app-box>\n }\n </div>\n </div>\n }\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
|
|
7144
|
+
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loadingComputed()) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <h3>How do you want to set values?</h3>\n <div class=\"value-mode-question\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\" class=\"choose\">\n <mat-option [value]=\"false\">\n {{\n formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n ? \"use an ON/OFF toggle\"\n : \"enter free-form values\"\n }}\n </mat-option>\n <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n </mat-select>\n </mat-form-field>\n <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n </a>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n <div class=\"add-variation\">\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n } @else {\n <app-box type=\"info\" class=\"bool-variation-info\">\n For more variations, create a flag of another type.\n <a\n href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about setting types.\n </app-box>\n }\n </div>\n </div>\n }\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button\n mat-raised-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
|
|
7113
7145
|
}], propDecorators: { hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], targetSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionHeader", required: false }] }], targetSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionDescription", required: false }] }], flagSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionHeader", required: false }] }], flagSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionDescription", required: false }] }], linkSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionHeader", required: false }] }], linkSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionDescription", required: false }] }], hideLinkSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLinkSection", required: false }] }], presetProductAndConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetProductAndConfig", required: false }] }], createInitiated: [{ type: i0.Output, args: ["createInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }] } });
|
|
7114
7146
|
|
|
7115
7147
|
class CreateConfigComponent extends BaseComponent {
|
|
@@ -7128,10 +7160,11 @@ class CreateConfigComponent extends BaseComponent {
|
|
|
7128
7160
|
this.resizeRequested = output();
|
|
7129
7161
|
this.cancelInitiated = output();
|
|
7130
7162
|
this.selectDropdownPanelChangedReqested = output();
|
|
7163
|
+
this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
7164
|
+
this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
|
|
7131
7165
|
this.SettingTypeEnum = SettingType;
|
|
7132
7166
|
this.FormHelper = FormHelper;
|
|
7133
7167
|
this.EvaluationVersion = EvaluationVersion;
|
|
7134
|
-
this.loading = true;
|
|
7135
7168
|
this.maxPredefinedVariations = 50;
|
|
7136
7169
|
this.maxStringFlagValueLength = 100000;
|
|
7137
7170
|
this.selectedProductOrganiaztionId = "0";
|
|
@@ -7140,7 +7173,7 @@ class CreateConfigComponent extends BaseComponent {
|
|
|
7140
7173
|
this.displayedColumns = [];
|
|
7141
7174
|
}
|
|
7142
7175
|
ngOnInit() {
|
|
7143
|
-
this.loading
|
|
7176
|
+
this.loading.set(true);
|
|
7144
7177
|
this.formGroup = this.formBuilder.group({
|
|
7145
7178
|
productId: new FormControl(this.presetProduct()?.productId ? this.presetProduct().productId : "", {
|
|
7146
7179
|
nonNullable: true,
|
|
@@ -7159,12 +7192,13 @@ class CreateConfigComponent extends BaseComponent {
|
|
|
7159
7192
|
validators: [Validators.required],
|
|
7160
7193
|
}),
|
|
7161
7194
|
});
|
|
7162
|
-
this.loading
|
|
7195
|
+
this.loading.set(false);
|
|
7163
7196
|
}
|
|
7164
7197
|
create() {
|
|
7165
7198
|
if (!this.formGroup.valid) {
|
|
7166
7199
|
return;
|
|
7167
7200
|
}
|
|
7201
|
+
this.submitting.set(true);
|
|
7168
7202
|
this.createConfigsService()
|
|
7169
7203
|
.createConfig(this.formGroup.controls.productId.value, {
|
|
7170
7204
|
name: this.formGroup.controls.name.value,
|
|
@@ -7173,9 +7207,11 @@ class CreateConfigComponent extends BaseComponent {
|
|
|
7173
7207
|
})
|
|
7174
7208
|
.subscribe({
|
|
7175
7209
|
next: config => {
|
|
7210
|
+
this.submitting.set(false);
|
|
7176
7211
|
this.createInitiated.emit(config.configId);
|
|
7177
7212
|
},
|
|
7178
7213
|
error: (error) => {
|
|
7214
|
+
this.submitting.set(false);
|
|
7179
7215
|
ErrorHandler.handleErrors(this.formGroup, error);
|
|
7180
7216
|
console.log(error);
|
|
7181
7217
|
},
|
|
@@ -7187,10 +7223,10 @@ class CreateConfigComponent extends BaseComponent {
|
|
|
7187
7223
|
selectDropdownPanelChanged(useSelector) {
|
|
7188
7224
|
this.selectDropdownPanelChangedReqested.emit(useSelector);
|
|
7189
7225
|
}
|
|
7190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
7191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
7226
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CreateConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CreateConfigComponent, isStandalone: true, selector: "app-create-config", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, configSectionHeader: { classPropertyName: "configSectionHeader", publicName: "configSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, configSectionDescription: { classPropertyName: "configSectionDescription", publicName: "configSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, presetProduct: { classPropertyName: "presetProduct", publicName: "presetProduct", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProduct()) {\n <p>\n Pre selected product\n <b>{{ this.presetProduct()!.productName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProduct()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProduct()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n\n <div class=\"header\">2. {{ configSectionHeader() ? configSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (configSectionDescription()) {\n <p>{{ configSectionDescription() }}</p>\n }\n @if (loading()) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name</mat-label>\n <input matInput placeholder=\"Config's name\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your config.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Config description (Optional)</mat-label>\n <textarea matInput placeholder=\"This config is responsible for...\" formControlName=\"description\"></textarea>\n <mat-hint>A description to help you remember the purpose of your config.</mat-hint>\n @if (formGroup.controls.description.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.description) }}\n </mat-error>\n }\n </mat-form-field>\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button\n mat-raised-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"submitting() || loading() || !formGroup.valid\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"], dependencies: [{ kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }] }); }
|
|
7192
7228
|
}
|
|
7193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
7229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CreateConfigComponent, decorators: [{
|
|
7194
7230
|
type: Component,
|
|
7195
7231
|
args: [{ selector: "app-create-config", imports: [
|
|
7196
7232
|
ProductSelectComponent,
|
|
@@ -7204,7 +7240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
7204
7240
|
MatError,
|
|
7205
7241
|
MatButton,
|
|
7206
7242
|
LoaderComponent,
|
|
7207
|
-
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProduct()) {\n <p>\n Pre selected product\n <b>{{ this.presetProduct()!.productName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProduct()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProduct()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n\n <div class=\"header\">2. {{ configSectionHeader() ? configSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (configSectionDescription()) {\n <p>{{ configSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name</mat-label>\n <input matInput placeholder=\"Config's name\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your config.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Config description (Optional)</mat-label>\n <textarea matInput placeholder=\"This config is responsible for...\" formControlName=\"description\"></textarea>\n <mat-hint>A description to help you remember the purpose of your config.</mat-hint>\n @if (formGroup.controls.description.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.description) }}\n </mat-error>\n }\n </mat-form-field>\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button
|
|
7243
|
+
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProduct()) {\n <p>\n Pre selected product\n <b>{{ this.presetProduct()!.productName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProduct()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProduct()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n\n <div class=\"header\">2. {{ configSectionHeader() ? configSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (configSectionDescription()) {\n <p>{{ configSectionDescription() }}</p>\n }\n @if (loading()) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name</mat-label>\n <input matInput placeholder=\"Config's name\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your config.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Config description (Optional)</mat-label>\n <textarea matInput placeholder=\"This config is responsible for...\" formControlName=\"description\"></textarea>\n <mat-hint>A description to help you remember the purpose of your config.</mat-hint>\n @if (formGroup.controls.description.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.description) }}\n </mat-error>\n }\n </mat-form-field>\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button\n mat-raised-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"submitting() || loading() || !formGroup.valid\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"] }]
|
|
7208
7244
|
}], propDecorators: { hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], targetSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionHeader", required: false }] }], targetSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionDescription", required: false }] }], configSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "configSectionHeader", required: false }] }], configSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "configSectionDescription", required: false }] }], presetProduct: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetProduct", required: false }] }], createInitiated: [{ type: i0.Output, args: ["createInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }] } });
|
|
7209
7245
|
|
|
7210
7246
|
/*
|