ng-configcat-publicapi-ui 5.2.1 → 5.3.0
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: "
|
|
118
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PublicApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
118
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PublicApiService }); }
|
|
119
119
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
466
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
466
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppDateAdapter }); }
|
|
467
467
|
}
|
|
468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
483
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "
|
|
486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RerouteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
527
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InfoDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
527
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
606
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ComparisonValueListHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
606
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ComparisonValueListHelper }); }
|
|
607
607
|
}
|
|
608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NotificationSnackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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: "
|
|
648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
688
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
687
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MessagingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
688
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MessagingService }); }
|
|
689
689
|
}
|
|
690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MessagingService, decorators: [{
|
|
691
691
|
type: Injectable
|
|
692
692
|
}] });
|
|
693
693
|
|
|
@@ -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: "
|
|
1204
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1204
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormGenerator }); }
|
|
1205
1205
|
}
|
|
1206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
1324
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1324
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeService }); }
|
|
1325
1325
|
}
|
|
1326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: "
|
|
1531
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingListFormHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1531
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingListFormHelper }); }
|
|
1532
1532
|
}
|
|
1533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingListFormHelper, decorators: [{
|
|
1534
1534
|
type: Injectable
|
|
1535
1535
|
}] });
|
|
1536
1536
|
|
|
@@ -1595,10 +1595,10 @@ class InputDisplayNormalizerDirective {
|
|
|
1595
1595
|
}
|
|
1596
1596
|
}
|
|
1597
1597
|
}
|
|
1598
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1599
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1598
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputDisplayNormalizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1599
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: InputDisplayNormalizerDirective, isStandalone: true, selector: "input[inputDisplayNormalizer]", host: { listeners: { "blur": "onChange($event)" } }, ngImport: i0 }); }
|
|
1600
1600
|
}
|
|
1601
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1601
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputDisplayNormalizerDirective, decorators: [{
|
|
1602
1602
|
type: Directive,
|
|
1603
1603
|
args: [{
|
|
1604
1604
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -1643,10 +1643,10 @@ class BaseComponent {
|
|
|
1643
1643
|
getDashboardBasePath() {
|
|
1644
1644
|
return this.publicApiService.getDashboardBasePath();
|
|
1645
1645
|
}
|
|
1646
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1647
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1646
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1647
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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 }); }
|
|
1648
1648
|
}
|
|
1649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1649
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseComponent, decorators: [{
|
|
1650
1650
|
type: Component,
|
|
1651
1651
|
args: [{
|
|
1652
1652
|
selector: "app-base",
|
|
@@ -1687,10 +1687,10 @@ class ConcurrentDeleteDialogComponent {
|
|
|
1687
1687
|
}
|
|
1688
1688
|
return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
|
|
1689
1689
|
}
|
|
1690
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1691
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1690
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConcurrentDeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1691
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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"] }] }); }
|
|
1692
1692
|
}
|
|
1693
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1693
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConcurrentDeleteDialogComponent, decorators: [{
|
|
1694
1694
|
type: Component,
|
|
1695
1695
|
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"] }]
|
|
1696
1696
|
}] });
|
|
@@ -1718,10 +1718,10 @@ class ReasonDialogComponent {
|
|
|
1718
1718
|
cancel() {
|
|
1719
1719
|
this.dialogRef.close({ button: "cancel" });
|
|
1720
1720
|
}
|
|
1721
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1721
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ReasonDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1722
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
1723
1723
|
}
|
|
1724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1724
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ReasonDialogComponent, decorators: [{
|
|
1725
1725
|
type: Component,
|
|
1726
1726
|
args: [{ selector: "app-reason-dialog", imports: [
|
|
1727
1727
|
MatDialogTitle,
|
|
@@ -1959,10 +1959,10 @@ class DigitOnlyDirective {
|
|
|
1959
1959
|
const oldValue = this.inputElement.value;
|
|
1960
1960
|
return oldValue.substring(0, selectionStart) + key + oldValue.substring(selectionEnd);
|
|
1961
1961
|
}
|
|
1962
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1963
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1962
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DigitOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1963
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", 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 }); }
|
|
1964
1964
|
}
|
|
1965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DigitOnlyDirective, decorators: [{
|
|
1966
1966
|
type: Directive,
|
|
1967
1967
|
args: [{ selector: "[appDigitOnly]" }]
|
|
1968
1968
|
}], 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: [{
|
|
@@ -1991,10 +1991,10 @@ class AutofocusDirective {
|
|
|
1991
1991
|
}, 200);
|
|
1992
1992
|
}
|
|
1993
1993
|
}
|
|
1994
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1995
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1994
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1995
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: AutofocusDirective, isStandalone: true, selector: "[focus]", inputs: { isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1996
1996
|
}
|
|
1997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutofocusDirective, decorators: [{
|
|
1998
1998
|
type: Directive,
|
|
1999
1999
|
args: [{
|
|
2000
2000
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2011,7 +2011,7 @@ class AceEditorComponent {
|
|
|
2011
2011
|
this.onChangeDisabled = false;
|
|
2012
2012
|
this._value = "";
|
|
2013
2013
|
this.editor = viewChild("aceEditor", ...(ngDevMode ? [{ debugName: "editor" }] : []));
|
|
2014
|
-
this.value = model(...(ngDevMode ? [
|
|
2014
|
+
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
2015
2015
|
this.valueSetEffect = effect(() => {
|
|
2016
2016
|
const checked = this.transformBoundValue(this.value() ?? "");
|
|
2017
2017
|
if (this._value === checked)
|
|
@@ -2110,8 +2110,8 @@ class AceEditorComponent {
|
|
|
2110
2110
|
registerOnTouched() {
|
|
2111
2111
|
/* unused */
|
|
2112
2112
|
}
|
|
2113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
2113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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: [
|
|
2115
2115
|
{
|
|
2116
2116
|
provide: NG_VALUE_ACCESSOR,
|
|
2117
2117
|
useExisting: forwardRef(() => AceEditorComponent),
|
|
@@ -2119,7 +2119,7 @@ class AceEditorComponent {
|
|
|
2119
2119
|
},
|
|
2120
2120
|
], 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 }); }
|
|
2121
2121
|
}
|
|
2122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AceEditorComponent, decorators: [{
|
|
2123
2123
|
type: Component,
|
|
2124
2124
|
args: [{ selector: "app-ace-editor", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2125
2125
|
{
|
|
@@ -2187,10 +2187,10 @@ class PopOutEditorComponent {
|
|
|
2187
2187
|
remove(index) {
|
|
2188
2188
|
this.formGroup.controls.values.removeAt(index);
|
|
2189
2189
|
}
|
|
2190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopOutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
2192
2192
|
}
|
|
2193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopOutEditorComponent, decorators: [{
|
|
2194
2194
|
type: Component,
|
|
2195
2195
|
args: [{ selector: "app-popout-editor", imports: [
|
|
2196
2196
|
CdkScrollable,
|
|
@@ -2233,12 +2233,12 @@ class ValueComponent {
|
|
|
2233
2233
|
},
|
|
2234
2234
|
});
|
|
2235
2235
|
}
|
|
2236
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2237
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2236
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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]" }] }); }
|
|
2238
2238
|
}
|
|
2239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ValueComponent, decorators: [{
|
|
2240
2240
|
type: Component,
|
|
2241
|
-
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
|
|
2241
|
+
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"] }]
|
|
2242
2242
|
}], 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 }] }] } });
|
|
2243
2243
|
|
|
2244
2244
|
class RolloutPercentageItemsComponent {
|
|
@@ -2286,10 +2286,10 @@ class RolloutPercentageItemsComponent {
|
|
|
2286
2286
|
this.formGroup().controls.rolloutPercentageItems.markAsDirty();
|
|
2287
2287
|
this.updateSum();
|
|
2288
2288
|
}
|
|
2289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
2291
2291
|
}
|
|
2292
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
|
|
2293
2293
|
type: Component,
|
|
2294
2294
|
args: [{ selector: "app-rollout-percentage-items", imports: [
|
|
2295
2295
|
FormsModule,
|
|
@@ -2302,23 +2302,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2302
2302
|
MatTooltip,
|
|
2303
2303
|
MatIcon,
|
|
2304
2304
|
ValueComponent,
|
|
2305
|
-
], 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
|
|
2305
|
+
], 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"] }]
|
|
2306
2306
|
}], propDecorators: { settingModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingModel", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
|
|
2307
2307
|
|
|
2308
2308
|
class DeselectDirective {
|
|
2309
2309
|
constructor() {
|
|
2310
2310
|
this.host = inject((ElementRef));
|
|
2311
|
-
this.selectedItem = input(void 0, ...(ngDevMode ?
|
|
2311
|
+
this.selectedItem = input(void 0, { ...(ngDevMode ? { debugName: "selectedItem" } : {}), alias: "appDeselect" });
|
|
2312
2312
|
}
|
|
2313
2313
|
ngAfterContentInit() {
|
|
2314
2314
|
if (!this.selectedItem()) {
|
|
2315
2315
|
this.host.nativeElement.selectedIndex = -1;
|
|
2316
2316
|
}
|
|
2317
2317
|
}
|
|
2318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2319
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DeselectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2319
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: DeselectDirective, isStandalone: true, selector: "[appDeselect]", inputs: { selectedItem: { classPropertyName: "selectedItem", publicName: "appDeselect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2320
2320
|
}
|
|
2321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DeselectDirective, decorators: [{
|
|
2322
2322
|
type: Directive,
|
|
2323
2323
|
args: [{
|
|
2324
2324
|
selector: "[appDeselect]",
|
|
@@ -2503,10 +2503,10 @@ class RolloutRulesComponent {
|
|
|
2503
2503
|
},
|
|
2504
2504
|
});
|
|
2505
2505
|
}
|
|
2506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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],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"] }] }); }
|
|
2506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RolloutRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
2508
2508
|
}
|
|
2509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RolloutRulesComponent, decorators: [{
|
|
2510
2510
|
type: Component,
|
|
2511
2511
|
args: [{ selector: "app-rollout-rules", imports: [
|
|
2512
2512
|
FormsModule,
|
|
@@ -2527,7 +2527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2527
2527
|
InputDisplayNormalizerDirective,
|
|
2528
2528
|
DeselectDirective,
|
|
2529
2529
|
ValueComponent,
|
|
2530
|
-
], 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"] }]
|
|
2530
|
+
], 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"] }]
|
|
2531
2531
|
}], propDecorators: { featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], settingModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingModel", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }] } });
|
|
2532
2532
|
|
|
2533
2533
|
class SettingComponent {
|
|
@@ -2631,10 +2631,10 @@ class SettingComponent {
|
|
|
2631
2631
|
+ "?settingId="
|
|
2632
2632
|
+ this.model().setting.settingId);
|
|
2633
2633
|
}
|
|
2634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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],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"] }] }); }
|
|
2634
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
2636
2636
|
}
|
|
2637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingComponent, decorators: [{
|
|
2638
2638
|
type: Component,
|
|
2639
2639
|
args: [{ selector: "app-setting", imports: [
|
|
2640
2640
|
FormsModule,
|
|
@@ -2647,7 +2647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2647
2647
|
MatChipSet,
|
|
2648
2648
|
MatChip,
|
|
2649
2649
|
ValueComponent,
|
|
2650
|
-
], 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"] }]
|
|
2650
|
+
], 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"] }]
|
|
2651
2651
|
}], propDecorators: { dashboardBasePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardBasePath", required: false }] }], 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 }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], 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 }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }] } });
|
|
2652
2652
|
|
|
2653
2653
|
class SettingListComponent {
|
|
@@ -2765,7 +2765,7 @@ class SettingListComponent {
|
|
|
2765
2765
|
width: "450px",
|
|
2766
2766
|
});
|
|
2767
2767
|
dialogRef.afterClosed().subscribe(result => {
|
|
2768
|
-
if (result
|
|
2768
|
+
if (result?.button === "save" && result.reason) {
|
|
2769
2769
|
updateSettingValuesModel.reason = result.reason;
|
|
2770
2770
|
this.updateSettingValues(updateSettingValuesModel);
|
|
2771
2771
|
}
|
|
@@ -2791,7 +2791,7 @@ class SettingListComponent {
|
|
|
2791
2791
|
width: "450px",
|
|
2792
2792
|
});
|
|
2793
2793
|
dialogRef.afterClosed().subscribe(result => {
|
|
2794
|
-
if (result
|
|
2794
|
+
if (result?.button === "save" && result.reason) {
|
|
2795
2795
|
updateSettingValuesModel.reason = result.reason;
|
|
2796
2796
|
this.updateSettingValues(updateSettingValuesModel);
|
|
2797
2797
|
}
|
|
@@ -2849,12 +2849,12 @@ class SettingListComponent {
|
|
|
2849
2849
|
this.saveFailed.emit(new Error("Concurent Delete Error."));
|
|
2850
2850
|
});
|
|
2851
2851
|
}
|
|
2852
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2852
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 && !submitting && formGroup.dirty) {\n <div class=\"save\">\n <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button type=\"button\" class=\"revert-button\" mat-stroked-button (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"] }] }); }
|
|
2854
2854
|
}
|
|
2855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2855
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingListComponent, decorators: [{
|
|
2856
2856
|
type: Component,
|
|
2857
|
-
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 && !submitting && formGroup.dirty) {\n <div class=\"save\">\n <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button type=\"button\" class=\"revert-button\" mat-stroked-button (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
|
|
2857
|
+
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 && !submitting && formGroup.dirty) {\n <div class=\"save\">\n <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n <mat-icon>backup</mat-icon>\n <span>Save & publish changes</span>\n </button>\n <button type=\"button\" class=\"revert-button\" mat-stroked-button (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"] }]
|
|
2858
2858
|
}], 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"] }] } });
|
|
2859
2859
|
|
|
2860
2860
|
class SettingItemComponent extends BaseComponent {
|
|
@@ -2938,12 +2938,12 @@ class SettingItemComponent extends BaseComponent {
|
|
|
2938
2938
|
onFormValuesChanged() {
|
|
2939
2939
|
this.formValuesChanged.emit();
|
|
2940
2940
|
}
|
|
2941
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2942
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2941
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2942
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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"] }] }); }
|
|
2943
2943
|
}
|
|
2944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2944
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingItemComponent, decorators: [{
|
|
2945
2945
|
type: Component,
|
|
2946
|
-
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
|
|
2946
|
+
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"] }]
|
|
2947
2947
|
}], 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"] }] } });
|
|
2948
2948
|
|
|
2949
2949
|
class AuthorizationComponent {
|
|
@@ -2983,10 +2983,10 @@ class AuthorizationComponent {
|
|
|
2983
2983
|
getPublicApiUrl() {
|
|
2984
2984
|
return this.publicApiService.getDashboardBasePath() + "/my-account/public-api-credentials";
|
|
2985
2985
|
}
|
|
2986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2987
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2986
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AuthorizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2987
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
2988
2988
|
}
|
|
2989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2989
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AuthorizationComponent, decorators: [{
|
|
2990
2990
|
type: Component,
|
|
2991
2991
|
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"] }]
|
|
2992
2992
|
}], 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"] }] } });
|
|
@@ -3000,10 +3000,10 @@ class BaseSelectComponent extends BaseComponent {
|
|
|
3000
3000
|
openChanged(event) {
|
|
3001
3001
|
this.dropdownOpened.emit(event);
|
|
3002
3002
|
}
|
|
3003
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3004
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3003
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3004
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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 }); }
|
|
3005
3005
|
}
|
|
3006
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3006
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseSelectComponent, decorators: [{
|
|
3007
3007
|
type: Component,
|
|
3008
3008
|
args: [{
|
|
3009
3009
|
selector: "app-base-select",
|
|
@@ -3054,10 +3054,10 @@ class ProductSelectComponent extends BaseSelectComponent {
|
|
|
3054
3054
|
clearFilter() {
|
|
3055
3055
|
this.filterText.set("");
|
|
3056
3056
|
}
|
|
3057
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3058
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3057
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ProductSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
3059
3059
|
}
|
|
3060
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ProductSelectComponent, decorators: [{
|
|
3061
3061
|
type: Component,
|
|
3062
3062
|
args: [{ selector: "app-product-select", imports: [
|
|
3063
3063
|
MatFormField,
|
|
@@ -3124,8 +3124,8 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
3124
3124
|
clearFilter() {
|
|
3125
3125
|
this.filterText.set("");
|
|
3126
3126
|
}
|
|
3127
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConfigSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: [
|
|
3129
3129
|
{
|
|
3130
3130
|
provide: NG_VALUE_ACCESSOR,
|
|
3131
3131
|
useExisting: forwardRef(() => ConfigSelectComponent),
|
|
@@ -3133,7 +3133,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
3133
3133
|
},
|
|
3134
3134
|
], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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"], 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"] }] }); }
|
|
3135
3135
|
}
|
|
3136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConfigSelectComponent, decorators: [{
|
|
3137
3137
|
type: Component,
|
|
3138
3138
|
args: [{ selector: "app-config-select", providers: [
|
|
3139
3139
|
{
|
|
@@ -3200,10 +3200,10 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
|
3200
3200
|
clearFilter() {
|
|
3201
3201
|
this.filterText.set("");
|
|
3202
3202
|
}
|
|
3203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3204
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EnvironmentSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3204
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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, usesOnChanges: true, ngImport: i0, 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 environment.description ? `Name: ${environment.name}\\nDescription: ${environment.description}` : `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"] }] }); }
|
|
3205
3205
|
}
|
|
3206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
|
|
3207
3207
|
type: Component,
|
|
3208
3208
|
args: [{ selector: "app-environment-select", imports: [
|
|
3209
3209
|
MatFormField,
|
|
@@ -3273,10 +3273,10 @@ class SettingSelectComponent extends BaseSelectComponent {
|
|
|
3273
3273
|
clearFilter() {
|
|
3274
3274
|
this.filterText.set("");
|
|
3275
3275
|
}
|
|
3276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3276
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3277
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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, usesOnChanges: true, ngImport: i0, 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.selectedSettingTiggetText() }}\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" }] }); }
|
|
3278
3278
|
}
|
|
3279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SettingSelectComponent, decorators: [{
|
|
3280
3280
|
type: Component,
|
|
3281
3281
|
args: [{ selector: "app-setting-select", imports: [
|
|
3282
3282
|
MatFormField,
|
|
@@ -3308,10 +3308,10 @@ class DeleteSettingDialogComponent {
|
|
|
3308
3308
|
cancel() {
|
|
3309
3309
|
this.dialogRef.close({ button: "cancel" });
|
|
3310
3310
|
}
|
|
3311
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3312
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DeleteSettingDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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"] }] }); }
|
|
3313
3313
|
}
|
|
3314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DeleteSettingDialogComponent, decorators: [{
|
|
3315
3315
|
type: Component,
|
|
3316
3316
|
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" }]
|
|
3317
3317
|
}] });
|
|
@@ -3320,10 +3320,10 @@ class TrackingDirective {
|
|
|
3320
3320
|
constructor() {
|
|
3321
3321
|
this.track = input(...(ngDevMode ? [undefined, { debugName: "track" }] : []));
|
|
3322
3322
|
}
|
|
3323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3324
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
3323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TrackingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3324
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: TrackingDirective, isStandalone: true, selector: "[track]", inputs: { track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3325
3325
|
}
|
|
3326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TrackingDirective, decorators: [{
|
|
3327
3327
|
type: Directive,
|
|
3328
3328
|
args: [{
|
|
3329
3329
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3401,10 +3401,10 @@ function getPredefinedVariationFeatureFlagValue(settingType, predefinedVariation
|
|
|
3401
3401
|
return predefinedVariationValue.stringValue;
|
|
3402
3402
|
}
|
|
3403
3403
|
case (SettingType.Int): {
|
|
3404
|
-
return
|
|
3404
|
+
return predefinedVariationValue.intValue;
|
|
3405
3405
|
}
|
|
3406
3406
|
case (SettingType.Double): {
|
|
3407
|
-
return
|
|
3407
|
+
return predefinedVariationValue.doubleValue;
|
|
3408
3408
|
}
|
|
3409
3409
|
default: return "";
|
|
3410
3410
|
}
|
|
@@ -3429,10 +3429,10 @@ class LoaderComponent {
|
|
|
3429
3429
|
setTimeout(() => this.showLoader = true, 300);
|
|
3430
3430
|
}
|
|
3431
3431
|
}
|
|
3432
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }); }
|
|
3434
3434
|
}
|
|
3435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
3436
3436
|
type: Component,
|
|
3437
3437
|
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"] }]
|
|
3438
3438
|
}], propDecorators: { skipTimeOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipTimeOut", required: false }] }] } });
|
|
@@ -3462,10 +3462,10 @@ class CopyableValueComponent {
|
|
|
3462
3462
|
this.inputControl().nativeElement.style.width = this.value().length + 1 + "ch";
|
|
3463
3463
|
}
|
|
3464
3464
|
}
|
|
3465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CopyableValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3466
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
3467
3467
|
}
|
|
3468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CopyableValueComponent, decorators: [{
|
|
3469
3469
|
type: Component,
|
|
3470
3470
|
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"] }]
|
|
3471
3471
|
}], 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 }] }] } });
|
|
@@ -3475,6 +3475,7 @@ class PopoutTextEditorDialogComponent {
|
|
|
3475
3475
|
this.dialogRef = inject(MatDialogRef);
|
|
3476
3476
|
this.data = inject(MAT_DIALOG_DATA);
|
|
3477
3477
|
this.destroyRef = inject(DestroyRef);
|
|
3478
|
+
this.jsonData = null;
|
|
3478
3479
|
this.format = "text";
|
|
3479
3480
|
this.formHelper = FormHelper;
|
|
3480
3481
|
}
|
|
@@ -3488,7 +3489,7 @@ class PopoutTextEditorDialogComponent {
|
|
|
3488
3489
|
this.control.setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
|
|
3489
3490
|
this.control.markAsDirty();
|
|
3490
3491
|
this.control.markAsTouched();
|
|
3491
|
-
if (
|
|
3492
|
+
if (this.jsonData !== value) {
|
|
3492
3493
|
this.jsonData = value;
|
|
3493
3494
|
}
|
|
3494
3495
|
});
|
|
@@ -3511,10 +3512,10 @@ class PopoutTextEditorDialogComponent {
|
|
|
3511
3512
|
}
|
|
3512
3513
|
this.dialogRef.close({ value: this.control.value });
|
|
3513
3514
|
}
|
|
3514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3515
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3516
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 [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"] }] }); }
|
|
3516
3517
|
}
|
|
3517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
|
|
3518
3519
|
type: Component,
|
|
3519
3520
|
args: [{ selector: "app-popout-text-editor-dialog", imports: [
|
|
3520
3521
|
MatDialogTitle,
|
|
@@ -3796,10 +3797,10 @@ class VariationsDialogComponent {
|
|
|
3796
3797
|
getColorIndex(row, index) {
|
|
3797
3798
|
return getPredefinedVariationColorIndex(this.settingType, getRawPredefinedVariationValue(row.controls.value), index);
|
|
3798
3799
|
}
|
|
3799
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3800
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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.\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\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"usage.controls.routerLink.value\"\n [mat-dialog-close]>\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 round\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\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{min-width:66px;height:34px;padding-top:1px}.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],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"] }] }); }
|
|
3800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: VariationsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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.\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"] }] }); }
|
|
3801
3802
|
}
|
|
3802
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: VariationsDialogComponent, decorators: [{
|
|
3803
3804
|
type: Component,
|
|
3804
3805
|
args: [{ selector: "app-variations-dialog", imports: [
|
|
3805
3806
|
LoaderComponent,
|
|
@@ -3836,7 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3836
3837
|
CdkDragHandle,
|
|
3837
3838
|
CopyableValueComponent,
|
|
3838
3839
|
AutofocusDirective
|
|
3839
|
-
], 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.\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\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"usage.controls.routerLink.value\"\n [mat-dialog-close]>\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 round\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\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{min-width:66px;height:34px;padding-top:1px}.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"] }]
|
|
3840
|
+
], 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.\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"] }]
|
|
3840
3841
|
}] });
|
|
3841
3842
|
|
|
3842
3843
|
class DependeesDialogComponent {
|
|
@@ -3856,10 +3857,10 @@ class DependeesDialogComponent {
|
|
|
3856
3857
|
]);
|
|
3857
3858
|
return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
|
|
3858
3859
|
}
|
|
3859
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3860
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3860
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DependeesDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
3861
3862
|
}
|
|
3862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DependeesDialogComponent, decorators: [{
|
|
3863
3864
|
type: Component,
|
|
3864
3865
|
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" }]
|
|
3865
3866
|
}] });
|
|
@@ -3950,10 +3951,10 @@ class FeatureFlagValueComponent {
|
|
|
3950
3951
|
return model?.stringValue ?? "";
|
|
3951
3952
|
}
|
|
3952
3953
|
}
|
|
3953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 [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)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\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 [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 round\"></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;width:212px}.targeting-rule-component[hidden]{display:none}.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{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\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;width:66px;height:30px}.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}@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" }] }); }
|
|
3954
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field select-suffixed\"\n subscriptSizing=\"dynamic\"\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 disableOptionCentering [formControl]=\"formGroupValue.controls.predefinedVariationId\">\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)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\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 [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}@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" }] }); }
|
|
3955
3956
|
}
|
|
3956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
|
|
3957
3958
|
type: Component,
|
|
3958
3959
|
args: [{ selector: "app-feature-flag-value", imports: [
|
|
3959
3960
|
MatFormField,
|
|
@@ -3972,7 +3973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3972
3973
|
MatOption$1,
|
|
3973
3974
|
NgClass,
|
|
3974
3975
|
MatSelectTrigger,
|
|
3975
|
-
], 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 [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)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\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 [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 round\"></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;width:212px}.targeting-rule-component[hidden]{display:none}.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{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\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;width:66px;height:30px}.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}@media (max-width: 500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
|
|
3976
|
+
], 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 @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field select-suffixed\"\n subscriptSizing=\"dynamic\"\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 disableOptionCentering [formControl]=\"formGroupValue.controls.predefinedVariationId\">\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)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\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 [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}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
|
|
3976
3977
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], notAvailablePredefinedVariationIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "notAvailablePredefinedVariationIds", required: false }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], isPrerequisite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPrerequisite", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
3977
3978
|
|
|
3978
3979
|
class ConditionChipComponent {
|
|
@@ -3984,10 +3985,10 @@ class ConditionChipComponent {
|
|
|
3984
3985
|
ngOnChanges() {
|
|
3985
3986
|
this.chipText = this.conditionIndex() > 0 ? "AND" : this.targetingRuleIndex() === 0 ? "IF" : "ELSE IF";
|
|
3986
3987
|
}
|
|
3987
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3988
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConditionChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3989
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
3989
3990
|
}
|
|
3990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3991
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConditionChipComponent, decorators: [{
|
|
3991
3992
|
type: Component,
|
|
3992
3993
|
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"] }]
|
|
3993
3994
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }] } });
|
|
@@ -4044,10 +4045,10 @@ class PrerequisiteFlagConditionComponent {
|
|
|
4044
4045
|
clearFilter() {
|
|
4045
4046
|
this.filterText.set("");
|
|
4046
4047
|
}
|
|
4047
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 <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\n [value]=\"prerequisiteSetting.settingId\"\n [matTooltip]=\"prerequisiteSetting.name\"\n [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n {{ prerequisiteSetting.key }}\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;width:212px}.targeting-rule-component[hidden]{display:none}.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
|
|
4048
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4049
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 <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\n [value]=\"prerequisiteSetting.settingId\"\n [matTooltip]=\"prerequisiteSetting.name\"\n [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n {{ prerequisiteSetting.key }}\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}\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"] }] }); }
|
|
4049
4050
|
}
|
|
4050
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
|
|
4051
4052
|
type: Component,
|
|
4052
4053
|
args: [{ selector: "app-prerequisite-flag-condition", imports: [
|
|
4053
4054
|
ConditionChipComponent,
|
|
@@ -4066,7 +4067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4066
4067
|
MatIconButton,
|
|
4067
4068
|
MatSuffix,
|
|
4068
4069
|
MatInput,
|
|
4069
|
-
], 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 <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\n [value]=\"prerequisiteSetting.settingId\"\n [matTooltip]=\"prerequisiteSetting.name\"\n [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n {{ prerequisiteSetting.key }}\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
|
|
4070
|
+
], 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 <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\n [value]=\"prerequisiteSetting.settingId\"\n [matTooltip]=\"prerequisiteSetting.name\"\n [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n {{ prerequisiteSetting.key }}\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}\n"] }]
|
|
4070
4071
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], prerequisiteSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "prerequisiteSettings", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
4071
4072
|
|
|
4072
4073
|
class SegmentConditionComponent {
|
|
@@ -4099,10 +4100,10 @@ class SegmentConditionComponent {
|
|
|
4099
4100
|
clearFilter() {
|
|
4100
4101
|
this.filterText.set("");
|
|
4101
4102
|
}
|
|
4102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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;width:212px}.targeting-rule-component[hidden]{display:none}.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"] }] }); }
|
|
4103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4104
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
4104
4105
|
}
|
|
4105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SegmentConditionComponent, decorators: [{
|
|
4106
4107
|
type: Component,
|
|
4107
4108
|
args: [{ selector: "app-segment-condition", imports: [
|
|
4108
4109
|
ConditionChipComponent,
|
|
@@ -4125,7 +4126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4125
4126
|
MatDivider,
|
|
4126
4127
|
NgClass,
|
|
4127
4128
|
MatSuffix,
|
|
4128
|
-
], 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
|
|
4129
|
+
], 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"] }]
|
|
4129
4130
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }] } });
|
|
4130
4131
|
|
|
4131
4132
|
class DateTimePickerComponent {
|
|
@@ -4185,8 +4186,8 @@ class DateTimePickerComponent {
|
|
|
4185
4186
|
validate() {
|
|
4186
4187
|
return this.formGroup.errors;
|
|
4187
4188
|
}
|
|
4188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4189
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: [
|
|
4190
4191
|
{
|
|
4191
4192
|
provide: NG_VALUE_ACCESSOR,
|
|
4192
4193
|
useExisting: forwardRef(() => DateTimePickerComponent),
|
|
@@ -4200,7 +4201,7 @@ class DateTimePickerComponent {
|
|
|
4200
4201
|
{ provide: DateAdapter, useClass: AppDateAdapter },
|
|
4201
4202
|
], 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"], 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"] }] }); }
|
|
4202
4203
|
}
|
|
4203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
4204
4205
|
type: Component,
|
|
4205
4206
|
args: [{ selector: "app-date-time-picker", providers: [
|
|
4206
4207
|
{
|
|
@@ -4461,10 +4462,10 @@ class ComparatorDialogComponent {
|
|
|
4461
4462
|
const result = this.isConfidential && selected.sensitiveValue ? selected.sensitiveValue : selected.value;
|
|
4462
4463
|
this.dialogRef.close(result);
|
|
4463
4464
|
}
|
|
4464
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4465
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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"] }] }); }
|
|
4465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ComparatorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4466
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
4466
4467
|
}
|
|
4467
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
|
|
4468
4469
|
type: Component,
|
|
4469
4470
|
args: [{ selector: "app-comparator-dialog", imports: [
|
|
4470
4471
|
MatDialogTitle,
|
|
@@ -4485,7 +4486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4485
4486
|
MatRadioButton,
|
|
4486
4487
|
MatTooltip,
|
|
4487
4488
|
MatIcon,
|
|
4488
|
-
], 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"] }]
|
|
4489
|
+
], 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"] }]
|
|
4489
4490
|
}] });
|
|
4490
4491
|
|
|
4491
4492
|
var VisualizationType;
|
|
@@ -4711,10 +4712,10 @@ class PopoutListEditorDialogComponent {
|
|
|
4711
4712
|
};
|
|
4712
4713
|
fileReader.readAsText(file);
|
|
4713
4714
|
}
|
|
4714
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4715
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 [formControl]=\"row.controls.value\" />\n } @else {\n <input matInput [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 && listValueFormArray.errors) {\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: "pipe", type: SlicePipe, name: "slice" }] }); }
|
|
4715
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4716
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 [formControl]=\"row.controls.value\" />\n } @else {\n <input matInput [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 && listValueFormArray.errors) {\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: "pipe", type: SlicePipe, name: "slice" }] }); }
|
|
4716
4717
|
}
|
|
4717
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
|
|
4718
4719
|
type: Component,
|
|
4719
4720
|
args: [{ selector: "app-popout-list-editor-dialog", imports: [
|
|
4720
4721
|
MatDialogTitle,
|
|
@@ -5312,10 +5313,10 @@ class UserConditionComponent {
|
|
|
5312
5313
|
isNullCompVal(compVal) {
|
|
5313
5314
|
return !compVal.doubleValue && !compVal.listValue && !compVal.stringValue;
|
|
5314
5315
|
}
|
|
5315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 [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;width:212px}.targeting-rule-component[hidden]{display:none}.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: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
5316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: UserConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 [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: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
5317
5318
|
}
|
|
5318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: UserConditionComponent, decorators: [{
|
|
5319
5320
|
type: Component,
|
|
5320
5321
|
args: [{ selector: "app-user-condition", providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], imports: [
|
|
5321
5322
|
ConditionChipComponent,
|
|
@@ -5348,7 +5349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5348
5349
|
SlicePipe,
|
|
5349
5350
|
KeyValuePipe,
|
|
5350
5351
|
MatDivider,
|
|
5351
|
-
], 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 [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;width:212px}.targeting-rule-component[hidden]{display:none}.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"] }]
|
|
5352
|
+
], 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 [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"] }]
|
|
5352
5353
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], matChipGrid: [{ type: i0.ViewChild, args: ["chipGrid", { isSignal: true }] }] } });
|
|
5353
5354
|
|
|
5354
5355
|
class ConditionsComponent {
|
|
@@ -5424,10 +5425,10 @@ class ConditionsComponent {
|
|
|
5424
5425
|
}
|
|
5425
5426
|
return true;
|
|
5426
5427
|
}
|
|
5427
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5428
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5428
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5429
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
5429
5430
|
}
|
|
5430
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConditionsComponent, decorators: [{
|
|
5431
5432
|
type: Component,
|
|
5432
5433
|
args: [{ selector: "app-conditions", imports: [
|
|
5433
5434
|
UserConditionComponent,
|
|
@@ -5442,7 +5443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5442
5443
|
MatMenuTrigger,
|
|
5443
5444
|
MatMenu,
|
|
5444
5445
|
MatMenuItem,
|
|
5445
|
-
], 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
|
|
5446
|
+
], 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"] }]
|
|
5446
5447
|
}], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", 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 }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", 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"] }], lastConditionDeleted: [{ type: i0.Output, args: ["lastConditionDeleted"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5447
5448
|
|
|
5448
5449
|
class PercentageOptionsComponent {
|
|
@@ -5521,10 +5522,10 @@ class PercentageOptionsComponent {
|
|
|
5521
5522
|
.filter((sv, index) => index !== currentIndex && sv.controls.value.controls.predefinedVariationId?.value)
|
|
5522
5523
|
.map(p => p.controls.value.controls.predefinedVariationId.value);
|
|
5523
5524
|
}
|
|
5524
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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;width:212px}.targeting-rule-component[hidden]{display:none}.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],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"] }] }); }
|
|
5525
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PercentageOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
5526
5527
|
}
|
|
5527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5528
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
|
|
5528
5529
|
type: Component,
|
|
5529
5530
|
args: [{ selector: "app-percentage-options", imports: [
|
|
5530
5531
|
MatFormField,
|
|
@@ -5541,7 +5542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5541
5542
|
MatIcon,
|
|
5542
5543
|
FeatureFlagValueComponent,
|
|
5543
5544
|
DigitOnlyDirective,
|
|
5544
|
-
], 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
|
|
5545
|
+
], 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"] }]
|
|
5545
5546
|
}], 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 }] }], showPercentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentageEvaluationAttribute", 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"] }] } });
|
|
5546
5547
|
|
|
5547
5548
|
class TargetingRuleComponent {
|
|
@@ -5656,10 +5657,10 @@ class TargetingRuleComponent {
|
|
|
5656
5657
|
subscriptionLimitReachedCalled() {
|
|
5657
5658
|
this.subscriptionLimitReached.emit();
|
|
5658
5659
|
}
|
|
5659
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5660
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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],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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5660
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TargetingRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
5661
5662
|
}
|
|
5662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TargetingRuleComponent, decorators: [{
|
|
5663
5664
|
type: Component,
|
|
5664
5665
|
args: [{ selector: "app-targeting-rule", imports: [
|
|
5665
5666
|
ConditionsComponent,
|
|
@@ -5854,10 +5855,10 @@ class EvaluationFormulaComponent {
|
|
|
5854
5855
|
prerequisiteIds: prerequisiteIds,
|
|
5855
5856
|
});
|
|
5856
5857
|
}
|
|
5857
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5858
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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;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 .add-if:hover{background-color:var(--flag-box-control-hover)}.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],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"] }] }); }
|
|
5858
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EvaluationFormulaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5859
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
5859
5860
|
}
|
|
5860
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EvaluationFormulaComponent, decorators: [{
|
|
5861
5862
|
type: Component,
|
|
5862
5863
|
args: [{ selector: "app-evaluation-formula", imports: [
|
|
5863
5864
|
MatTooltip,
|
|
@@ -5877,7 +5878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5877
5878
|
FeatureFlagValueComponent,
|
|
5878
5879
|
MatMenu,
|
|
5879
5880
|
MatMenuItem,
|
|
5880
|
-
], 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
|
|
5881
|
+
], 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"] }]
|
|
5881
5882
|
}], 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 }] }], showPercentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentageEvaluationAttribute", 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"] }] } });
|
|
5882
5883
|
|
|
5883
5884
|
class PercentageEvaluationAttributeDialogComponent {
|
|
@@ -5929,10 +5930,10 @@ class PercentageEvaluationAttributeDialogComponent {
|
|
|
5929
5930
|
const percentageEvaluationAttributeFilter = this.formControl.value === this.defaultComparisonAttributes[0] ? null : this.formControl.value;
|
|
5930
5931
|
this.dialogRef.close({ percentageEvaluationAttribute: percentageEvaluationAttributeFilter });
|
|
5931
5932
|
}
|
|
5932
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5934
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
5934
5935
|
}
|
|
5935
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
|
|
5936
5937
|
type: Component,
|
|
5937
5938
|
args: [{ selector: "app-percentage-evaluation-attribute-dialog", imports: [
|
|
5938
5939
|
MatDialogTitle,
|
|
@@ -6113,10 +6114,10 @@ class FeatureFlagComponent {
|
|
|
6113
6114
|
},
|
|
6114
6115
|
});
|
|
6115
6116
|
}
|
|
6116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\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);border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.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],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"] }] }); }
|
|
6117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\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 .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:relative;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"] }] }); }
|
|
6118
6119
|
}
|
|
6119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagComponent, decorators: [{
|
|
6120
6121
|
type: Component,
|
|
6121
6122
|
args: [{ selector: "app-feature-flag", imports: [
|
|
6122
6123
|
NgClass,
|
|
@@ -6134,7 +6135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6134
6135
|
MatMenuItem,
|
|
6135
6136
|
MatDivider,
|
|
6136
6137
|
CopyableValueComponent,
|
|
6137
|
-
], 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)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\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);border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.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"] }]
|
|
6138
|
+
], 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)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\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 .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:relative;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"] }]
|
|
6138
6139
|
}], 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"] }] } });
|
|
6139
6140
|
|
|
6140
6141
|
class FeatureFlagItemComponent extends BaseComponent {
|
|
@@ -6495,12 +6496,12 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
6495
6496
|
},
|
|
6496
6497
|
});
|
|
6497
6498
|
}
|
|
6498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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],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"] }] }); }
|
|
6499
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6500
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
|
|
6500
6501
|
}
|
|
6501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
|
|
6502
6503
|
type: Component,
|
|
6503
|
-
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
|
|
6504
|
+
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"] }]
|
|
6504
6505
|
}], 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"] }] } });
|
|
6505
6506
|
|
|
6506
6507
|
class LinkFeatureFlagComponent {
|
|
@@ -6560,10 +6561,10 @@ class LinkFeatureFlagComponent {
|
|
|
6560
6561
|
selectDropdownPanelChanged(useSelector) {
|
|
6561
6562
|
this.selectDropdownPanelChangedReqested.emit(useSelector);
|
|
6562
6563
|
}
|
|
6563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6564
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkFeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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\">\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"] }] }); }
|
|
6565
6566
|
}
|
|
6566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6567
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkFeatureFlagComponent, decorators: [{
|
|
6567
6568
|
type: Component,
|
|
6568
6569
|
args: [{ selector: "app-link-feature-flag", imports: [
|
|
6569
6570
|
FormsModule,
|
|
@@ -6574,7 +6575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6574
6575
|
ConfigSelectComponent,
|
|
6575
6576
|
EnvironmentSelectComponent,
|
|
6576
6577
|
SettingSelectComponent,
|
|
6577
|
-
], 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 @if (formGroup.controls.productId.value) {\n <app-config-select\n [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\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"] }]
|
|
6578
|
+
], 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"] }]
|
|
6578
6579
|
}], 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"] }] } });
|
|
6579
6580
|
|
|
6580
6581
|
class ErrorHandler {
|
|
@@ -6985,10 +6986,10 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
6985
6986
|
getColorIndex(row, index) {
|
|
6986
6987
|
return getPredefinedVariationColorIndex(this.formGroup.controls.settingType.value, getRawPredefinedVariationValue(row.controls.value), index);
|
|
6987
6988
|
}
|
|
6988
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6989
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 @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 }\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\">\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 <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"variation-header\">\n This {{ settingTypeText }} allows\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\">\n <mat-option [value]=\"false\">free-form values</mat-option>\n <mat-option [value]=\"true\">predefined variations only</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n @if (formGroup.controls.useVariations.value) {\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 (formGroup.controls.predefinedVariations.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div class=\"add-variation\">\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 </div>\n }\n }\n </div>\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 }\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>\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>\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 round\"></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 .toggle{min-width:66px;height:34px}.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:8px}.container .form>* .init-value-section .variations .toggle{margin-top: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{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\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],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"] }] }); }
|
|
6989
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6990
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"variation-header\">\n This {{ settingTypeText }} allows\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\">\n <mat-option [value]=\"false\">free-form values</mat-option>\n <mat-option [value]=\"true\">predefined variations only</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n @if (formGroup.controls.useVariations.value) {\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 (formGroup.controls.predefinedVariations.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div class=\"add-variation\">\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 </div>\n }\n }\n </div>\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>\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>\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 .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:8px}.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"] }] }); }
|
|
6990
6991
|
}
|
|
6991
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
|
|
6992
6993
|
type: Component,
|
|
6993
6994
|
args: [{ selector: "app-create-feature-flag", imports: [
|
|
6994
6995
|
AutofocusDirective,
|
|
@@ -7023,7 +7024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7023
7024
|
MatSuffix,
|
|
7024
7025
|
MatIconButton,
|
|
7025
7026
|
LoaderComponent,
|
|
7026
|
-
], 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 @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 }\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\">\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 <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"variation-header\">\n This {{ settingTypeText }} allows\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\">\n <mat-option [value]=\"false\">free-form values</mat-option>\n <mat-option [value]=\"true\">predefined variations only</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n @if (formGroup.controls.useVariations.value) {\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 (formGroup.controls.predefinedVariations.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div class=\"add-variation\">\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 </div>\n }\n }\n </div>\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 }\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>\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>\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 round\"></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 .toggle{min-width:66px;height:34px}.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:8px}.container .form>* .init-value-section .variations .toggle{margin-top: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{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n"] }]
|
|
7027
|
+
], 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 <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"variation-header\">\n This {{ settingTypeText }} allows\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\">\n <mat-option [value]=\"false\">free-form values</mat-option>\n <mat-option [value]=\"true\">predefined variations only</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n @if (formGroup.controls.useVariations.value) {\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 (formGroup.controls.predefinedVariations.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div class=\"add-variation\">\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 </div>\n }\n }\n </div>\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>\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>\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 .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:8px}.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"] }]
|
|
7027
7028
|
}], 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"] }] } });
|
|
7028
7029
|
|
|
7029
7030
|
class CreateConfigComponent extends BaseComponent {
|
|
@@ -7101,10 +7102,10 @@ class CreateConfigComponent extends BaseComponent {
|
|
|
7101
7102
|
selectDropdownPanelChanged(useSelector) {
|
|
7102
7103
|
this.selectDropdownPanelChangedReqested.emit(useSelector);
|
|
7103
7104
|
}
|
|
7104
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CreateConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 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", 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"] }] }); }
|
|
7106
7107
|
}
|
|
7107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CreateConfigComponent, decorators: [{
|
|
7108
7109
|
type: Component,
|
|
7109
7110
|
args: [{ selector: "app-create-config", imports: [
|
|
7110
7111
|
ProductSelectComponent,
|
|
@@ -7118,7 +7119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7118
7119
|
MatError,
|
|
7119
7120
|
MatButton,
|
|
7120
7121
|
LoaderComponent,
|
|
7121
|
-
], 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\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 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", 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"] }]
|
|
7122
|
+
], 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 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", 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"] }]
|
|
7122
7123
|
}], 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"] }] } });
|
|
7123
7124
|
|
|
7124
7125
|
/*
|