ng-configcat-publicapi-ui 5.0.3 → 5.0.5
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.
|
@@ -107,10 +107,10 @@ class PublicApiService {
|
|
|
107
107
|
getDashboardBasePath() {
|
|
108
108
|
return this.configuration?.dashboardBasePath ?? defaultDashboardBasePath;
|
|
109
109
|
}
|
|
110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
111
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PublicApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
111
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PublicApiService }); }
|
|
112
112
|
}
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PublicApiService, decorators: [{
|
|
114
114
|
type: Injectable
|
|
115
115
|
}] });
|
|
116
116
|
|
|
@@ -449,10 +449,10 @@ class AppDateAdapter extends NativeDateAdapter {
|
|
|
449
449
|
return DateHelper.formatDate(date, "yyyy. MM. dd HH:mm");
|
|
450
450
|
}
|
|
451
451
|
}
|
|
452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
453
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AppDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
453
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AppDateAdapter }); }
|
|
454
454
|
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AppDateAdapter, decorators: [{
|
|
456
456
|
type: Injectable
|
|
457
457
|
}] });
|
|
458
458
|
|
|
@@ -467,10 +467,10 @@ class ConfirmationDialogComponent {
|
|
|
467
467
|
cancel() {
|
|
468
468
|
this.dialogRef.close("cancel");
|
|
469
469
|
}
|
|
470
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
470
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
472
472
|
}
|
|
473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
474
474
|
type: Component,
|
|
475
475
|
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" }]
|
|
476
476
|
}] });
|
|
@@ -486,10 +486,10 @@ class RerouteDialogComponent {
|
|
|
486
486
|
cancel() {
|
|
487
487
|
this.dialogRef.close("cancel");
|
|
488
488
|
}
|
|
489
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
490
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
489
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RerouteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
491
491
|
}
|
|
492
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RerouteDialogComponent, decorators: [{
|
|
493
493
|
type: Component,
|
|
494
494
|
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"] }]
|
|
495
495
|
}] });
|
|
@@ -510,10 +510,10 @@ class InfoDialogComponent {
|
|
|
510
510
|
this.data.secondaryButtonAction?.();
|
|
511
511
|
this.dialogRef.close("nok");
|
|
512
512
|
}
|
|
513
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: InfoDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
515
515
|
}
|
|
516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: InfoDialogComponent, decorators: [{
|
|
517
517
|
type: Component,
|
|
518
518
|
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"] }]
|
|
519
519
|
}], ctorParameters: () => [] });
|
|
@@ -589,10 +589,10 @@ class ComparisonValueListHelper {
|
|
|
589
589
|
.filter(v => !!v.value),
|
|
590
590
|
};
|
|
591
591
|
}
|
|
592
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
593
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
592
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComparisonValueListHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
593
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComparisonValueListHelper }); }
|
|
594
594
|
}
|
|
595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComparisonValueListHelper, decorators: [{
|
|
596
596
|
type: Injectable
|
|
597
597
|
}] });
|
|
598
598
|
|
|
@@ -629,10 +629,10 @@ class NotificationSnackComponent {
|
|
|
629
629
|
}
|
|
630
630
|
});
|
|
631
631
|
}
|
|
632
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
633
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.
|
|
632
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NotificationSnackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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"] }] }); }
|
|
634
634
|
}
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NotificationSnackComponent, decorators: [{
|
|
636
636
|
type: Component,
|
|
637
637
|
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"] }]
|
|
638
638
|
}], ctorParameters: () => [] });
|
|
@@ -671,10 +671,10 @@ class MessagingService {
|
|
|
671
671
|
dismissCurrentSnack() {
|
|
672
672
|
this.snackBar.dismiss();
|
|
673
673
|
}
|
|
674
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
675
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
674
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MessagingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
675
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MessagingService }); }
|
|
676
676
|
}
|
|
677
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
677
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MessagingService, decorators: [{
|
|
678
678
|
type: Injectable
|
|
679
679
|
}] });
|
|
680
680
|
|
|
@@ -1097,10 +1097,10 @@ class FormGenerator {
|
|
|
1097
1097
|
listValueFormArray.markAsTouched();
|
|
1098
1098
|
listValueFormArray.markAsDirty();
|
|
1099
1099
|
}
|
|
1100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1101
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FormGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1101
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FormGenerator }); }
|
|
1102
1102
|
}
|
|
1103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FormGenerator, decorators: [{
|
|
1104
1104
|
type: Injectable
|
|
1105
1105
|
}] });
|
|
1106
1106
|
function validatePercentageSum(c) {
|
|
@@ -1216,10 +1216,10 @@ class ThemeService {
|
|
|
1216
1216
|
this.document.body.removeAttribute("data-theme");
|
|
1217
1217
|
}
|
|
1218
1218
|
}
|
|
1219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1220
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1220
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ThemeService }); }
|
|
1221
1221
|
}
|
|
1222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ThemeService, decorators: [{
|
|
1223
1223
|
type: Injectable
|
|
1224
1224
|
}] });
|
|
1225
1225
|
|
|
@@ -1423,10 +1423,10 @@ class SettingListFormHelper {
|
|
|
1423
1423
|
})),
|
|
1424
1424
|
};
|
|
1425
1425
|
}
|
|
1426
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1427
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1426
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingListFormHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1427
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingListFormHelper }); }
|
|
1428
1428
|
}
|
|
1429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingListFormHelper, decorators: [{
|
|
1430
1430
|
type: Injectable
|
|
1431
1431
|
}] });
|
|
1432
1432
|
|
|
@@ -1490,10 +1490,10 @@ class InputDisplayNormalizerDirective {
|
|
|
1490
1490
|
}
|
|
1491
1491
|
}
|
|
1492
1492
|
}
|
|
1493
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1494
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1493
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: InputDisplayNormalizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1494
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: InputDisplayNormalizerDirective, isStandalone: true, selector: "input[inputDisplayNormalizer]", host: { listeners: { "blur": "onChange($event)" } }, ngImport: i0 }); }
|
|
1495
1495
|
}
|
|
1496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: InputDisplayNormalizerDirective, decorators: [{
|
|
1497
1497
|
type: Directive,
|
|
1498
1498
|
args: [{
|
|
1499
1499
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -1535,10 +1535,10 @@ class BaseComponent {
|
|
|
1535
1535
|
getDashboardBasePath() {
|
|
1536
1536
|
return this.publicApiService.getDashboardBasePath();
|
|
1537
1537
|
}
|
|
1538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
1538
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
|
|
1540
1540
|
}
|
|
1541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: BaseComponent, decorators: [{
|
|
1542
1542
|
type: Component,
|
|
1543
1543
|
args: [{
|
|
1544
1544
|
selector: "app-base",
|
|
@@ -1569,10 +1569,10 @@ class ReasonDialogComponent {
|
|
|
1569
1569
|
cancel() {
|
|
1570
1570
|
this.dialogRef.close({ button: "cancel" });
|
|
1571
1571
|
}
|
|
1572
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1572
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ReasonDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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],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"] }] }); }
|
|
1574
1574
|
}
|
|
1575
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ReasonDialogComponent, decorators: [{
|
|
1576
1576
|
type: Component,
|
|
1577
1577
|
args: [{ selector: "app-reason-dialog", imports: [
|
|
1578
1578
|
MatDialogTitle,
|
|
@@ -1810,10 +1810,10 @@ class DigitOnlyDirective {
|
|
|
1810
1810
|
const oldValue = this.inputElement.value;
|
|
1811
1811
|
return oldValue.substring(0, selectionStart) + key + oldValue.substring(selectionEnd);
|
|
1812
1812
|
}
|
|
1813
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1814
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
1813
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DigitOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1814
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
|
|
1815
1815
|
}
|
|
1816
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DigitOnlyDirective, decorators: [{
|
|
1817
1817
|
type: Directive,
|
|
1818
1818
|
args: [{ selector: "[appDigitOnly]" }]
|
|
1819
1819
|
}], ctorParameters: () => [], propDecorators: { onBeforeInput: [{
|
|
@@ -1839,10 +1839,10 @@ class AutofocusDirective {
|
|
|
1839
1839
|
this.host.nativeElement.focus();
|
|
1840
1840
|
}, 200);
|
|
1841
1841
|
}
|
|
1842
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1843
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1843
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AutofocusDirective, isStandalone: true, selector: "[focus]", ngImport: i0 }); }
|
|
1844
1844
|
}
|
|
1845
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AutofocusDirective, decorators: [{
|
|
1846
1846
|
type: Directive,
|
|
1847
1847
|
args: [{
|
|
1848
1848
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -1958,8 +1958,8 @@ class AceEditorComponent {
|
|
|
1958
1958
|
registerOnTouched() {
|
|
1959
1959
|
/* unused */
|
|
1960
1960
|
}
|
|
1961
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1962
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.
|
|
1961
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1962
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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: [
|
|
1963
1963
|
{
|
|
1964
1964
|
provide: NG_VALUE_ACCESSOR,
|
|
1965
1965
|
useExisting: forwardRef(() => AceEditorComponent),
|
|
@@ -1967,7 +1967,7 @@ class AceEditorComponent {
|
|
|
1967
1967
|
},
|
|
1968
1968
|
], 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 }); }
|
|
1969
1969
|
}
|
|
1970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AceEditorComponent, decorators: [{
|
|
1971
1971
|
type: Component,
|
|
1972
1972
|
args: [{ selector: "app-ace-editor", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1973
1973
|
{
|
|
@@ -2035,10 +2035,10 @@ class PopOutEditorComponent {
|
|
|
2035
2035
|
remove(index) {
|
|
2036
2036
|
this.formGroup.controls.values.removeAt(index);
|
|
2037
2037
|
}
|
|
2038
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2038
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PopOutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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],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]" }, { 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"] }] }); }
|
|
2040
2040
|
}
|
|
2041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2041
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PopOutEditorComponent, decorators: [{
|
|
2042
2042
|
type: Component,
|
|
2043
2043
|
args: [{ selector: "app-popout-editor", imports: [
|
|
2044
2044
|
CdkScrollable,
|
|
@@ -2081,10 +2081,10 @@ class ValueComponent {
|
|
|
2081
2081
|
},
|
|
2082
2082
|
});
|
|
2083
2083
|
}
|
|
2084
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2084
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 round\"></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{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", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.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 .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)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@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]" }] }); }
|
|
2086
2086
|
}
|
|
2087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2087
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ValueComponent, decorators: [{
|
|
2088
2088
|
type: Component,
|
|
2089
2089
|
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 round\"></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{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", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.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 .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)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"] }]
|
|
2090
2090
|
}] });
|
|
@@ -2134,10 +2134,10 @@ class RolloutPercentageItemsComponent {
|
|
|
2134
2134
|
this.formGroup().controls.rolloutPercentageItems.markAsDirty();
|
|
2135
2135
|
this.updateSum();
|
|
2136
2136
|
}
|
|
2137
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2138
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2137
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2138
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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],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"] }] }); }
|
|
2139
2139
|
}
|
|
2140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
|
|
2141
2141
|
type: Component,
|
|
2142
2142
|
args: [{ selector: "app-rollout-percentage-items", imports: [
|
|
2143
2143
|
FormsModule,
|
|
@@ -2163,10 +2163,10 @@ class DeselectDirective {
|
|
|
2163
2163
|
this.host.nativeElement.selectedIndex = -1;
|
|
2164
2164
|
}
|
|
2165
2165
|
}
|
|
2166
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2167
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
2166
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeselectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2167
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: DeselectDirective, isStandalone: true, selector: "[appDeselect]", inputs: { selectedItem: { classPropertyName: "selectedItem", publicName: "appDeselect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2168
2168
|
}
|
|
2169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeselectDirective, decorators: [{
|
|
2170
2170
|
type: Directive,
|
|
2171
2171
|
args: [{
|
|
2172
2172
|
selector: "[appDeselect]",
|
|
@@ -2351,10 +2351,10 @@ class RolloutRulesComponent {
|
|
|
2351
2351
|
},
|
|
2352
2352
|
});
|
|
2353
2353
|
}
|
|
2354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: RolloutRulesComponent, isStandalone: true, selector: "app-rollout-rules", inputs: { featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"formGroup()\">\n <div\n cdkDropList\n [cdkDropListDisabled]=\"readOnly()\"\n [cdkDropListData]=\"formGroup().controls.rolloutRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (rolloutRule of formGroup().controls.rolloutRules.controls; track $index; let i = $index) {\n <div cdkDrag>\n <div class=\"targeting-row\">\n @if (rolloutRule.controls.type.value === 0) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n <select\n class=\"targeting-select attribute-select\"\n matTooltip=\"Comparison attribute\"\n matTooltipPosition=\"above\"\n [disabled]=\"readOnly()\"\n (change)=\"attributeChanged($event.target, rolloutRule.controls.comparisonAttribute!)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <option [selected]=\"comparisonAttribute === rolloutRule.controls.comparisonAttribute!.value\">\n {{ comparisonAttribute }}\n </option>\n }\n <option\n [selected]=\"\n defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) === -1\n \">\n Custom\n </option>\n </select>\n <span\n class=\"attribute-span\"\n matTooltipPosition=\"above\"\n matTooltip=\"Custom user attribute\"\n [hidden]=\"defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) !== -1\">\n @if (rolloutRule.controls.comparisonAttribute!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <input\n type=\"text\"\n matInput\n class=\"attribute\"\n placeholder=\"e.g. Role, SubscriptionType\"\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonAttribute!.invalid }\"\n [matAutocomplete]=\"auto\"\n [formControl]=\"rolloutRule.controls.comparisonAttribute!\" />\n </span>\n <mat-autocomplete #auto=\"matAutocomplete\">\n @for (option of comparisonAttributes(); track $index) {\n <mat-option [value]=\"option\">\n {{ option }}\n </mat-option>\n }\n </mat-autocomplete>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select\"\n matTooltip=\"Comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.comparator!\"\n (change)=\"comparatorChanged(rolloutRule)\">\n <optgroup label=\"CONFIDENTIAL TEXT\">\n @for (comparator of rolloutRuleComparators.slice(16, 18); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"TEXT\">\n @for (comparator of rolloutRuleComparators.slice(0, 4); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"SEMANTIC VERSION\">\n @for (comparator of rolloutRuleComparators.slice(4, 10); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"NUMBER\">\n @for (comparator of rolloutRuleComparators.slice(10, 16); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n </select>\n <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n <a\n href=\"https://configcat.com/docs/V1/advanced/targeting/#comparator\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n <mat-icon class=\"icon-transform-rotate\">info</mat-icon>\n </a>\n </div>\n </div>\n <div class=\"comparison-value\">\n @if (rolloutRule.controls.comparisonValue!.invalid) {\n <span class=\"error\">*</span>\n }\n <input\n matTooltip=\"Comparison value\"\n matTooltipPosition=\"above\"\n inputDisplayNormalizer\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonValue!.invalid }\"\n [formControl]=\"rolloutRule.controls.comparisonValue!\"\n [type]=\"getComparisonValueType(rolloutRule)\"\n [placeholder]=\"getPlaceHolder(rolloutRule)\" />\n @if (getComparisonValueType(rolloutRule) === \"text\") {\n <div\n class=\"expand\"\n matTooltip=\"Pop-out editor\"\n matTooltipPosition=\"above\"\n (click)=\"popOut(rolloutRule)\">\n <mat-icon>height</mat-icon>\n </div>\n }\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n @if (rolloutRule.controls.type.value === 1) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltipPosition=\"above\" matTooltip=\"Drag here to reorder\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select segment-comparator\"\n matTooltip=\"Segment comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.segmentComparator!\">\n @for (comparator of segmentComparators; track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"select-wrapper\">\n <div class=\"segment-select-more\">\n @if (rolloutRule.controls.segmentId!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <select\n class=\"targeting-select segment-select invalid\"\n matTooltip=\"Segment\"\n matTooltipPosition=\"above\"\n [appDeselect]=\"rolloutRule.controls.segmentId!.value\"\n [formControl]=\"rolloutRule.controls.segmentId!\"\n [ngClass]=\"{ invalid: rolloutRule.controls.segmentId!.invalid }\">\n @for (segment of segments(); track $index) {\n <option [ngValue]=\"segment.segmentId\" [title]=\"segment.description\">\n {{ segment.name }}\n </option>\n } @empty {\n <option disabled>no segments available</option>\n }\n </select>\n </div>\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n <div class=\"value flex\">\n @if (settingModel().settingType !== SettingType.Boolean) {\n <div class=\"serve\">\n <mat-chip-set>\n <mat-chip class=\"chip\">Serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"rolloutRule.controls.value\"\n [setting]=\"settingModel()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:var(--flag-v1-rule-hover-background)}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:var(--input-background);height:18px;width:18px}.targeting-row .info a{color:var(--info-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:var(--input-background)}.targeting-row .warn a{color:var(--warn-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .warn a:hover{opacity:1}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .segment-select-more{display:flex;flex-wrap:nowrap;align-items:center}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{background-color:var(--flag-v1-chip-background)}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:170px;flex-grow:100;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid var(--flag-validation-error)}.fields .attribute-error{color:var(--flag-validation-error);margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{cursor:pointer;font-size:16px;height:16px;width:16px;color:var(--action-icon-button-color);margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:var(--flag-validation-error);margin:0 5px}.fields .comparison-value input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.fields .comparison-value .invalid{border:1px solid var(--flag-validation-error)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{background-color:var(--flag-v1-chip-background)}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}.expand{position:relative;right:2px;font-size:8px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.expand mat-icon{transform:rotate(45deg)}.targeting-select{margin-left:.5em;width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);height:30px;min-height:30px;line-height:30px;min-width:170px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-size:12px}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}.targeting-row .segment-select-more{margin:7px 0 0 7px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .targeting-select{margin:7px 7px 0}.targeting-row .fields .segment-more{margin-top:6px}.targeting-row .fields .segment-select-more{margin:0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
|
|
2354
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RolloutRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: RolloutRulesComponent, isStandalone: true, selector: "app-rollout-rules", inputs: { featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"formGroup()\">\n <div\n cdkDropList\n [cdkDropListDisabled]=\"readOnly()\"\n [cdkDropListData]=\"formGroup().controls.rolloutRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (rolloutRule of formGroup().controls.rolloutRules.controls; track $index; let i = $index) {\n <div cdkDrag>\n <div class=\"targeting-row\">\n @if (rolloutRule.controls.type.value === 0) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n <select\n class=\"targeting-select attribute-select\"\n matTooltip=\"Comparison attribute\"\n matTooltipPosition=\"above\"\n [disabled]=\"readOnly()\"\n (change)=\"attributeChanged($event.target, rolloutRule.controls.comparisonAttribute!)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <option [selected]=\"comparisonAttribute === rolloutRule.controls.comparisonAttribute!.value\">\n {{ comparisonAttribute }}\n </option>\n }\n <option\n [selected]=\"\n defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) === -1\n \">\n Custom\n </option>\n </select>\n <span\n class=\"attribute-span\"\n matTooltipPosition=\"above\"\n matTooltip=\"Custom user attribute\"\n [hidden]=\"defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute!.value) !== -1\">\n @if (rolloutRule.controls.comparisonAttribute!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <input\n type=\"text\"\n matInput\n class=\"attribute\"\n placeholder=\"e.g. Role, SubscriptionType\"\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonAttribute!.invalid }\"\n [matAutocomplete]=\"auto\"\n [formControl]=\"rolloutRule.controls.comparisonAttribute!\" />\n </span>\n <mat-autocomplete #auto=\"matAutocomplete\">\n @for (option of comparisonAttributes(); track $index) {\n <mat-option [value]=\"option\">\n {{ option }}\n </mat-option>\n }\n </mat-autocomplete>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select\"\n matTooltip=\"Comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.comparator!\"\n (change)=\"comparatorChanged(rolloutRule)\">\n <optgroup label=\"CONFIDENTIAL TEXT\">\n @for (comparator of rolloutRuleComparators.slice(16, 18); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"TEXT\">\n @for (comparator of rolloutRuleComparators.slice(0, 4); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"SEMANTIC VERSION\">\n @for (comparator of rolloutRuleComparators.slice(4, 10); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n <optgroup label=\"NUMBER\">\n @for (comparator of rolloutRuleComparators.slice(10, 16); track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </optgroup>\n </select>\n <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n <a\n href=\"https://configcat.com/docs/V1/advanced/targeting/#comparator\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n <mat-icon class=\"icon-transform-rotate\">info</mat-icon>\n </a>\n </div>\n </div>\n <div class=\"comparison-value\">\n @if (rolloutRule.controls.comparisonValue!.invalid) {\n <span class=\"error\">*</span>\n }\n <input\n matTooltip=\"Comparison value\"\n matTooltipPosition=\"above\"\n inputDisplayNormalizer\n [ngClass]=\"{ invalid: rolloutRule.controls.comparisonValue!.invalid }\"\n [formControl]=\"rolloutRule.controls.comparisonValue!\"\n [type]=\"getComparisonValueType(rolloutRule)\"\n [placeholder]=\"getPlaceHolder(rolloutRule)\" />\n @if (getComparisonValueType(rolloutRule) === \"text\") {\n <div\n class=\"expand\"\n matTooltip=\"Pop-out editor\"\n matTooltipPosition=\"above\"\n (click)=\"popOut(rolloutRule)\">\n <mat-icon>height</mat-icon>\n </div>\n }\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n @if (rolloutRule.controls.type.value === 1) {\n <div class=\"fields flex\">\n @if (!readOnly()) {\n <div class=\"drag-handle\" cdkDragHandle matTooltipPosition=\"above\" matTooltip=\"Drag here to reorder\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n <div class=\"if\">\n <mat-chip-set [class.spacing]=\"i === 0\">\n <mat-chip class=\"chip\">{{ i === 0 ? \"IF\" : \"ELSE IF\" }}</mat-chip>\n </mat-chip-set>\n <a\n href=\"https://configcat.com/docs/V1/advanced/user-object/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n <div class=\"select-wrapper\">\n <select\n class=\"targeting-select segment-comparator\"\n matTooltip=\"Segment comparator\"\n matTooltipPosition=\"above\"\n [formControl]=\"rolloutRule.controls.segmentComparator!\">\n @for (comparator of segmentComparators; track $index) {\n <option [ngValue]=\"comparator.value\">\n {{ comparator.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"select-wrapper\">\n <div class=\"segment-select-more\">\n @if (rolloutRule.controls.segmentId!.invalid) {\n <span class=\"attribute-error\">*</span>\n }\n <select\n class=\"targeting-select segment-select invalid\"\n matTooltip=\"Segment\"\n matTooltipPosition=\"above\"\n [appDeselect]=\"rolloutRule.controls.segmentId!.value\"\n [formControl]=\"rolloutRule.controls.segmentId!\"\n [ngClass]=\"{ invalid: rolloutRule.controls.segmentId!.invalid }\">\n @for (segment of segments(); track $index) {\n <option [ngValue]=\"segment.segmentId\" [title]=\"segment.description\">\n {{ segment.name }}\n </option>\n } @empty {\n <option disabled>no segments available</option>\n }\n </select>\n </div>\n </div>\n @if (!readOnly()) {\n <div class=\"delete\" matTooltip=\"Remove targeting rule\" (click)=\"removeRule(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n }\n <div class=\"value flex\">\n @if (settingModel().settingType !== SettingType.Boolean) {\n <div class=\"serve\">\n <mat-chip-set>\n <mat-chip class=\"chip\">Serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"rolloutRule.controls.value\"\n [setting]=\"settingModel()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:var(--flag-v1-rule-hover-background)}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:var(--input-background);height:18px;width:18px}.targeting-row .info a{color:var(--info-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:var(--input-background)}.targeting-row .warn a{color:var(--warn-icon-color);opacity:var(--flag-v1-colored-berry-opacity)}.targeting-row .warn a:hover{opacity:1}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .segment-select-more{display:flex;flex-wrap:nowrap;align-items:center}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{background-color:var(--flag-v1-chip-background)}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:170px;flex-grow:100;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid var(--flag-validation-error)}.fields .attribute-error{color:var(--flag-validation-error);margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{cursor:pointer;font-size:16px;height:16px;width:16px;color:var(--action-icon-button-color);margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:var(--flag-validation-error);margin:0 5px}.fields .comparison-value input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.fields .comparison-value .invalid{border:1px solid var(--flag-validation-error)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{background-color:var(--flag-v1-chip-background)}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}.expand{position:relative;right:2px;font-size:8px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.expand mat-icon{transform:rotate(45deg)}.targeting-select{margin-left:.5em;width:170px;background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);height:30px;min-height:30px;line-height:30px;min-width:170px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-size:12px}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}.targeting-row .segment-select-more{margin:7px 0 0 7px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .targeting-select{margin:7px 7px 0}.targeting-row .fields .segment-more{margin-top:6px}.targeting-row .fields .segment-select-more{margin:0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
|
|
2356
2356
|
}
|
|
2357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RolloutRulesComponent, decorators: [{
|
|
2358
2358
|
type: Component,
|
|
2359
2359
|
args: [{ selector: "app-rollout-rules", imports: [
|
|
2360
2360
|
FormsModule,
|
|
@@ -2479,10 +2479,10 @@ class SettingComponent {
|
|
|
2479
2479
|
+ "?settingId="
|
|
2480
2480
|
+ this.model().setting.settingId);
|
|
2481
2481
|
}
|
|
2482
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2483
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SettingComponent, isStandalone: true, selector: "app-setting", inputs: { dashboardBasePath: { classPropertyName: "dashboardBasePath", publicName: "dashboardBasePath", isSignal: true, isRequired: false, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached" }, ngImport: i0, template: "@let settingModel = model();\n\n<div class=\"setting-container\">\n <div class=\"setting-full\" [formGroup]=\"formGroup()\">\n <div class=\"berries\">\n @if (canDeleteSetting()) {\n <div class=\"berry delete\" matTooltip=\"Delete feature flag\" data-robot=\"deleteSetting\" (click)=\"deleteSetting()\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n <div class=\"setting-header flex\">\n <div class=\"setting-name flex\">\n <div class=\"name\" data-robot=\"settingName\">\n {{ settingModel.setting.name }}\n @if (showEnvironmentName()) {\n <span class=\"environment-name\">({{ settingModel.environment.name }})</span>\n }\n </div>\n </div>\n </div>\n <div class=\"setting-content\">\n <div class=\"setting-details\">\n <div class=\"setting-key\">\n <code data-robot=\"settingKey\">{{ settingModel.setting.key }}</code>\n </div>\n @if (settingModel.setting.hint) {\n <span class=\"description\">{{ settingModel.setting.hint }}</span>\n }\n <div class=\"integrations\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">Open in ConfigCat</a>\n </div>\n </div>\n\n <div class=\"rules-list\">\n <div class=\"rollout-rules\">\n @if (formGroup().controls.rolloutRules.controls.length !== 0) {\n <app-rollout-rules\n [formGroup]=\"formGroup()\"\n [segments]=\"segments()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n </div>\n\n @if (formGroup().controls.rolloutPercentageItems.controls.length !== 0) {\n <app-rollout-percentage-items\n [formGroup]=\"formGroup()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n\n <div class=\"all-other flex\">\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length !== 0\n ) {\n <div\n matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (formGroup().controls.rolloutPercentageItems.length !== 0) {\n <div\n matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length === 0\n ) {\n <div>\n <mat-chip-set>\n <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"formGroup().controls.value\"\n [setting]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n <div class=\"buttons\">\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target specific users\" : \"Add new targeting rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addSegmentRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target segment\" : \"Add new segment rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button\n type=\"button\"\n class=\"targeting-button\"\n [disabled]=\"\n settingModel.setting.settingType === SettingType.Boolean &&\n formGroup().controls.rolloutPercentageItems.length !== 0\n \"\n (click)=\"addRolloutPercentageItem()\">\n {{ formGroup().controls.rolloutPercentageItems.length === 0 ? \"Target % of users\" : \"Add % option\" }}\n </button>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".setting-container{display:flex;flex-wrap:nowrap}.colorbar{min-width:10px;opacity:var(--environment-color-opacity)}.setting-full{width:calc(100% - 10px);position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;border:1px solid var(--flag-v1-box-border);background-color:var(--flag-v1-box-background)}.setting-full .berries{position:absolute;right:-10px;top:-10px;display:flex}.setting-full .berry{margin-left:3px;cursor:pointer;background-color:var(--page-background-color);height:20px;width:20px;border-radius:50%}.setting-full .berry mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .berry:hover mat-icon{opacity:1}.setting-full .delete{color:var(--flag-delete)}.setting-full .edit mat-icon{padding-left:1px}.setting-full .code mat-icon{padding-left:1px}.setting-full .reverse-berry{display:flex;align-items:center;justify-content:center;color:var(--flag-v1-colored-berry)}.setting-full .reverse-berry .berry-container{display:flex;align-items:center;justify-content:center;height:17px;width:17px;border-radius:50%;background-color:var(--flag-v1-colored-berry-background);opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .reverse-berry .berry-container:hover{opacity:1}.setting-full .reverse-berry .berry-container mat-icon{font-size:15px;height:15px;width:15px;opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;margin-right:4px;max-width:100%;font-size:14px}.setting-full .setting-header .setting-name .environment-name{font-weight:400;font-size:14px;padding-top:4px;margin-right:12px;overflow:hidden;text-overflow:ellipsis}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:10px;color:var(--flag-meta)}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word;background-color:var(--flag-v1-key-background);color:var(--text-color);padding:3px 6px;font-size:14px}.setting-full .setting-content .setting-details .setting-key>code{background-color:var(--flag-v1-key-background)}.setting-full .setting-content .setting-details .description{font-size:11px;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;height:26px!important}.setting-full .all-other{min-height:40px;justify-content:flex-start;border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;padding:4px 0 4px .5em}.setting-full .all-other .chip{background-color:var(--flag-v1-chip-background)}.setting-full .all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:10px;margin-left:auto;margin-right:12px;color:var(--flag-meta);display:flex;align-items:center}.buttons .updated-date .history{margin-left:8px}.buttons .updated-date .history mat-icon{font-size:1.8em}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}.watch-wrapper .status{font-size:.7rem}.watch-wrapper .watch{position:relative;display:inline-block;padding:2px 4px;border:1px solid var(--flag-v1-box-border);font-size:.8rem;cursor:pointer;margin-left:3px}.watch-wrapper .watch:hover{background-color:var(--flag-v1-key-background);cursor:pointer}.watch-wrapper .watch:hover .stale-settings{display:inline-block}.watch-wrapper .watch .mat-icon{font-size:15px;height:15px;width:15px;vertical-align:middle}.tags{font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.tags .tag-container{position:relative;max-width:100%;min-width:0}.tags .tag-container:hover .delete-tag{display:block}.tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-v1-box-background);display:none;height:14px;width:14px;border-radius:50%;right:-6px;top:-7px;z-index:1}.tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:.7}.tags .delete-tag:hover mat-icon{opacity:1}.tags .add-tag{border:1px dashed var(--input-border-color);color:var(--flag-meta);padding:2px 4px}.tags .add-tag:hover{background-color:var(--flag-v1-key-background);cursor:pointer}@media (max-width: 1200px){.setting-details{width:300px!important}}@media (max-width: 920px){.setting-full{width:calc(100% - 5px)}.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}.targeting-button{background-color:var(--flag-v1-targeting-button-background);color:var(--flag-v1-targeting-button);cursor:pointer;text-transform:uppercase;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;border-radius:2px;font-size:.75rem;border:1px solid var(--flag-v1-box-border);box-shadow:none;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;margin:0 .2rem}.targeting-button:hover{background-color:var(--flag-v1-targeting-button-hover-background)}.targeting-button:disabled{background-color:var(--flag-v1-targeting-button-disabled-background);color:var(--flag-v1-targeting-button-disabled);cursor:auto}@media (max-width: 380px){.targeting-button{font-size:.65rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
|
|
2482
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: SettingComponent, isStandalone: true, selector: "app-setting", inputs: { dashboardBasePath: { classPropertyName: "dashboardBasePath", publicName: "dashboardBasePath", isSignal: true, isRequired: false, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached" }, ngImport: i0, template: "@let settingModel = model();\n\n<div class=\"setting-container\">\n <div class=\"setting-full\" [formGroup]=\"formGroup()\">\n <div class=\"berries\">\n @if (canDeleteSetting()) {\n <div class=\"berry delete\" matTooltip=\"Delete feature flag\" data-robot=\"deleteSetting\" (click)=\"deleteSetting()\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </div>\n }\n </div>\n <div class=\"setting-header flex\">\n <div class=\"setting-name flex\">\n <div class=\"name\" data-robot=\"settingName\">\n {{ settingModel.setting.name }}\n @if (showEnvironmentName()) {\n <span class=\"environment-name\">({{ settingModel.environment.name }})</span>\n }\n </div>\n </div>\n </div>\n <div class=\"setting-content\">\n <div class=\"setting-details\">\n <div class=\"setting-key\">\n <code data-robot=\"settingKey\">{{ settingModel.setting.key }}</code>\n </div>\n @if (settingModel.setting.hint) {\n <span class=\"description\">{{ settingModel.setting.hint }}</span>\n }\n <div class=\"integrations\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">Open in ConfigCat</a>\n </div>\n </div>\n\n <div class=\"rules-list\">\n <div class=\"rollout-rules\">\n @if (formGroup().controls.rolloutRules.controls.length !== 0) {\n <app-rollout-rules\n [formGroup]=\"formGroup()\"\n [segments]=\"segments()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n </div>\n\n @if (formGroup().controls.rolloutPercentageItems.controls.length !== 0) {\n <app-rollout-percentage-items\n [formGroup]=\"formGroup()\"\n [readOnly]=\"readOnly()\"\n [settingModel]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n }\n\n <div class=\"all-other flex\">\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length !== 0\n ) {\n <div\n matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (formGroup().controls.rolloutPercentageItems.length !== 0) {\n <div\n matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n matTooltipPosition=\"above\">\n <mat-chip-set>\n <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n @if (\n formGroup().controls.rolloutPercentageItems.length === 0 && formGroup().controls.rolloutRules.length === 0\n ) {\n <div>\n <mat-chip-set>\n <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n </mat-chip-set>\n </div>\n }\n <app-value\n class=\"served-value\"\n [valueFormControl]=\"formGroup().controls.value\"\n [setting]=\"settingModel.setting\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\n </div>\n <div class=\"buttons\">\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target specific users\" : \"Add new targeting rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button type=\"button\" class=\"targeting-button\" (click)=\"addSegmentRolloutRule()\">\n {{ formGroup().controls.rolloutRules.length === 0 ? \"Target segment\" : \"Add new segment rule\" }}\n </button>\n }\n @if (!readOnly()) {\n <button\n type=\"button\"\n class=\"targeting-button\"\n [disabled]=\"\n settingModel.setting.settingType === SettingType.Boolean &&\n formGroup().controls.rolloutPercentageItems.length !== 0\n \"\n (click)=\"addRolloutPercentageItem()\">\n {{ formGroup().controls.rolloutPercentageItems.length === 0 ? \"Target % of users\" : \"Add % option\" }}\n </button>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".setting-container{display:flex;flex-wrap:nowrap}.colorbar{min-width:10px;opacity:var(--environment-color-opacity)}.setting-full{width:calc(100% - 10px);position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;border:1px solid var(--flag-v1-box-border);background-color:var(--flag-v1-box-background)}.setting-full .berries{position:absolute;right:-10px;top:-10px;display:flex}.setting-full .berry{margin-left:3px;cursor:pointer;background-color:var(--page-background-color);height:20px;width:20px;border-radius:50%}.setting-full .berry mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .berry:hover mat-icon{opacity:1}.setting-full .delete{color:var(--flag-delete)}.setting-full .edit mat-icon{padding-left:1px}.setting-full .code mat-icon{padding-left:1px}.setting-full .reverse-berry{display:flex;align-items:center;justify-content:center;color:var(--flag-v1-colored-berry)}.setting-full .reverse-berry .berry-container{display:flex;align-items:center;justify-content:center;height:17px;width:17px;border-radius:50%;background-color:var(--flag-v1-colored-berry-background);opacity:var(--flag-v1-colored-berry-opacity)}.setting-full .reverse-berry .berry-container:hover{opacity:1}.setting-full .reverse-berry .berry-container mat-icon{font-size:15px;height:15px;width:15px;opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;margin-right:4px;max-width:100%;font-size:14px}.setting-full .setting-header .setting-name .environment-name{font-weight:400;font-size:14px;padding-top:4px;margin-right:12px;overflow:hidden;text-overflow:ellipsis}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:10px;color:var(--flag-meta)}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word;background-color:var(--flag-v1-key-background);color:var(--text-color);padding:3px 6px;font-size:14px}.setting-full .setting-content .setting-details .setting-key>code{background-color:var(--flag-v1-key-background)}.setting-full .setting-content .setting-details .description{font-size:11px;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;height:26px!important}.setting-full .all-other{min-height:40px;justify-content:flex-start;border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;padding:4px 0 4px .5em}.setting-full .all-other .chip{background-color:var(--flag-v1-chip-background)}.setting-full .all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:10px;margin-left:auto;margin-right:12px;color:var(--flag-meta);display:flex;align-items:center}.buttons .updated-date .history{margin-left:8px}.buttons .updated-date .history mat-icon{font-size:1.8em}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}.watch-wrapper .status{font-size:.7rem}.watch-wrapper .watch{position:relative;display:inline-block;padding:2px 4px;border:1px solid var(--flag-v1-box-border);font-size:.8rem;cursor:pointer;margin-left:3px}.watch-wrapper .watch:hover{background-color:var(--flag-v1-key-background);cursor:pointer}.watch-wrapper .watch:hover .stale-settings{display:inline-block}.watch-wrapper .watch .mat-icon{font-size:15px;height:15px;width:15px;vertical-align:middle}.tags{font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.tags .tag-container{position:relative;max-width:100%;min-width:0}.tags .tag-container:hover .delete-tag{display:block}.tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-v1-box-background);display:none;height:14px;width:14px;border-radius:50%;right:-6px;top:-7px;z-index:1}.tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:.7}.tags .delete-tag:hover mat-icon{opacity:1}.tags .add-tag{border:1px dashed var(--input-border-color);color:var(--flag-meta);padding:2px 4px}.tags .add-tag:hover{background-color:var(--flag-v1-key-background);cursor:pointer}@media (max-width: 1200px){.setting-details{width:300px!important}}@media (max-width: 920px){.setting-full{width:calc(100% - 5px)}.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}.targeting-button{background-color:var(--flag-v1-targeting-button-background);color:var(--flag-v1-targeting-button);cursor:pointer;text-transform:uppercase;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;border-radius:2px;font-size:.75rem;border:1px solid var(--flag-v1-box-border);box-shadow:none;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;margin:0 .2rem}.targeting-button:hover{background-color:var(--flag-v1-targeting-button-hover-background)}.targeting-button:disabled{background-color:var(--flag-v1-targeting-button-disabled-background);color:var(--flag-v1-targeting-button-disabled);cursor:auto}@media (max-width: 380px){.targeting-button{font-size:.65rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
|
|
2484
2484
|
}
|
|
2485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingComponent, decorators: [{
|
|
2486
2486
|
type: Component,
|
|
2487
2487
|
args: [{ selector: "app-setting", imports: [
|
|
2488
2488
|
FormsModule,
|
|
@@ -2675,10 +2675,10 @@ class SettingListComponent {
|
|
|
2675
2675
|
config: this.settingValues.config,
|
|
2676
2676
|
});
|
|
2677
2677
|
}
|
|
2678
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2678
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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" }, 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],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"] }] }); }
|
|
2680
2680
|
}
|
|
2681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingListComponent, decorators: [{
|
|
2682
2682
|
type: Component,
|
|
2683
2683
|
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"] }]
|
|
2684
2684
|
}] });
|
|
@@ -2765,10 +2765,10 @@ class SettingItemComponent extends BaseComponent {
|
|
|
2765
2765
|
onFormValuesChanged() {
|
|
2766
2766
|
this.formValuesChanged.emit();
|
|
2767
2767
|
}
|
|
2768
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2769
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
2768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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 (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"] }] }); }
|
|
2770
2770
|
}
|
|
2771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingItemComponent, decorators: [{
|
|
2772
2772
|
type: Component,
|
|
2773
2773
|
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 (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"] }]
|
|
2774
2774
|
}], ctorParameters: () => [] });
|
|
@@ -2810,10 +2810,10 @@ class AuthorizationComponent {
|
|
|
2810
2810
|
getPublicApiUrl() {
|
|
2811
2811
|
return this.publicApiService.getDashboardBasePath() + "/my-account/public-api-credentials";
|
|
2812
2812
|
}
|
|
2813
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2813
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AuthorizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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],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"] }] }); }
|
|
2815
2815
|
}
|
|
2816
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AuthorizationComponent, decorators: [{
|
|
2817
2817
|
type: Component,
|
|
2818
2818
|
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"] }]
|
|
2819
2819
|
}] });
|
|
@@ -2827,10 +2827,10 @@ class BaseSelectComponent extends BaseComponent {
|
|
|
2827
2827
|
openChanged(event) {
|
|
2828
2828
|
this.dropdownOpened.emit(event);
|
|
2829
2829
|
}
|
|
2830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2831
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
2830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
|
|
2832
2832
|
}
|
|
2833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: BaseSelectComponent, decorators: [{
|
|
2834
2834
|
type: Component,
|
|
2835
2835
|
args: [{
|
|
2836
2836
|
selector: "app-base-select",
|
|
@@ -2862,10 +2862,10 @@ class ProductSelectComponent extends BaseSelectComponent {
|
|
|
2862
2862
|
}
|
|
2863
2863
|
});
|
|
2864
2864
|
}
|
|
2865
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2866
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2865
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ProductSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ProductSelectComponent, isStandalone: true, selector: "app-product-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, 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 @for (product of products; track product.productId) {\n <mat-option [value]=\"product.productId\" [matTooltip]=\"product.name\">\n {{ product.name }}\n </mat-option>\n }\n </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}\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.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: "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"] }] }); }
|
|
2867
2867
|
}
|
|
2868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ProductSelectComponent, decorators: [{
|
|
2869
2869
|
type: Component,
|
|
2870
2870
|
args: [{ selector: "app-product-select", imports: [MatFormField, MatLabel, MatSelect, FormsModule, ReactiveFormsModule, RxReactiveFormsModule, MatOption, MatTooltip], 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 @for (product of products; track product.productId) {\n <mat-option [value]=\"product.productId\" [matTooltip]=\"product.name\">\n {{ product.name }}\n </mat-option>\n }\n </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}\n"] }]
|
|
2871
2871
|
}] });
|
|
@@ -2900,8 +2900,8 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
2900
2900
|
});
|
|
2901
2901
|
}
|
|
2902
2902
|
}
|
|
2903
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2904
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2903
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConfigSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2904
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 } }, providers: [
|
|
2905
2905
|
{
|
|
2906
2906
|
provide: NG_VALUE_ACCESSOR,
|
|
2907
2907
|
useExisting: forwardRef(() => ConfigSelectComponent),
|
|
@@ -2909,7 +2909,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
2909
2909
|
},
|
|
2910
2910
|
], 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 @for (config of configs; track config.configId) {\n <mat-option [value]=\"config.configId\" [matTooltip]=\"config.name\">\n {{ config.name }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}\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.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: "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"] }] }); }
|
|
2911
2911
|
}
|
|
2912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConfigSelectComponent, decorators: [{
|
|
2913
2913
|
type: Component,
|
|
2914
2914
|
args: [{ selector: "app-config-select", providers: [
|
|
2915
2915
|
{
|
|
@@ -2950,10 +2950,10 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
|
2950
2950
|
});
|
|
2951
2951
|
}
|
|
2952
2952
|
}
|
|
2953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2953
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EnvironmentSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2954
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 @for (environment of environments; track environment.environmentId) {\n <mat-option [value]=\"environment.environmentId\" [matTooltip]=\"environment.name\">\n {{ environment.name }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}\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.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: "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"] }] }); }
|
|
2955
2955
|
}
|
|
2956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
|
|
2957
2957
|
type: Component,
|
|
2958
2958
|
args: [{ selector: "app-environment-select", imports: [MatFormField, MatLabel, MatSelect, FormsModule, ReactiveFormsModule, RxReactiveFormsModule, MatOption, MatTooltip], 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 @for (environment of environments; track environment.environmentId) {\n <mat-option [value]=\"environment.environmentId\" [matTooltip]=\"environment.name\">\n {{ environment.name }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}\n"] }]
|
|
2959
2959
|
}] });
|
|
@@ -2988,10 +2988,10 @@ class SettingSelectComponent extends BaseSelectComponent {
|
|
|
2988
2988
|
});
|
|
2989
2989
|
}
|
|
2990
2990
|
}
|
|
2991
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
2991
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 @for (setting of settings; track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [matTooltip]=\"setting.name\">\n {{ setting.name }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}\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.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: "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"] }] }); }
|
|
2993
2993
|
}
|
|
2994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SettingSelectComponent, decorators: [{
|
|
2995
2995
|
type: Component,
|
|
2996
2996
|
args: [{ selector: "app-setting-select", imports: [MatFormField, MatLabel, MatSelect, FormsModule, ReactiveFormsModule, RxReactiveFormsModule, MatOption, MatTooltip], 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 @for (setting of settings; track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [matTooltip]=\"setting.name\">\n {{ setting.name }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}\n"] }]
|
|
2997
2997
|
}] });
|
|
@@ -3007,10 +3007,10 @@ class DeleteSettingDialogComponent {
|
|
|
3007
3007
|
cancel() {
|
|
3008
3008
|
this.dialogRef.close({ button: "cancel" });
|
|
3009
3009
|
}
|
|
3010
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3011
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
3010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeleteSettingDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", 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"] }] }); }
|
|
3012
3012
|
}
|
|
3013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeleteSettingDialogComponent, decorators: [{
|
|
3014
3014
|
type: Component,
|
|
3015
3015
|
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" }]
|
|
3016
3016
|
}] });
|
|
@@ -3019,10 +3019,10 @@ class TrackingDirective {
|
|
|
3019
3019
|
constructor() {
|
|
3020
3020
|
this.track = input(...(ngDevMode ? [undefined, { debugName: "track" }] : []));
|
|
3021
3021
|
}
|
|
3022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3023
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
3022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TrackingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3023
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: TrackingDirective, isStandalone: true, selector: "[track]", inputs: { track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3024
3024
|
}
|
|
3025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TrackingDirective, decorators: [{
|
|
3026
3026
|
type: Directive,
|
|
3027
3027
|
args: [{
|
|
3028
3028
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3053,10 +3053,10 @@ class CopyableValueComponent {
|
|
|
3053
3053
|
this.inputControl().nativeElement.style.width = this.value().length + 1 + "ch";
|
|
3054
3054
|
}
|
|
3055
3055
|
}
|
|
3056
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3057
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CopyableValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: CopyableValueComponent, isStandalone: true, selector: "app-copyable-value", inputs: { 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=\"Copy to clipboard\"\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"] }] }); }
|
|
3058
3058
|
}
|
|
3059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CopyableValueComponent, decorators: [{
|
|
3060
3060
|
type: Component,
|
|
3061
3061
|
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=\"Copy to clipboard\"\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"] }]
|
|
3062
3062
|
}] });
|
|
@@ -3078,10 +3078,10 @@ class DependeesDialogComponent {
|
|
|
3078
3078
|
]);
|
|
3079
3079
|
return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
|
|
3080
3080
|
}
|
|
3081
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3081
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DependeesDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
3083
3083
|
}
|
|
3084
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DependeesDialogComponent, decorators: [{
|
|
3085
3085
|
type: Component,
|
|
3086
3086
|
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" }]
|
|
3087
3087
|
}] });
|
|
@@ -3127,10 +3127,10 @@ class PopoutTextEditorDialogComponent {
|
|
|
3127
3127
|
}
|
|
3128
3128
|
this.dialogRef.close({ value: this.control.value });
|
|
3129
3129
|
}
|
|
3130
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3130
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 <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 @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 > -1) {\n <mat-hint>\n Remaining characters:\n {{ data.maxValueLength - control.value.length }}\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]" }, { 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"] }] }); }
|
|
3132
3132
|
}
|
|
3133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
|
|
3134
3134
|
type: Component,
|
|
3135
3135
|
args: [{ selector: "app-popout-text-editor-dialog", imports: [
|
|
3136
3136
|
MatDialogTitle,
|
|
@@ -3188,10 +3188,10 @@ class FeatureFlagValueComponent {
|
|
|
3188
3188
|
}
|
|
3189
3189
|
});
|
|
3190
3190
|
}
|
|
3191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3191
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", 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 } }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @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()\" />\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()\" />\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()\" />\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]=\"flagState()!.readOnly\">\n <label class=\"switch\" [matTooltip]=\"tooltip()\">\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 .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%}\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"] }] }); }
|
|
3193
3193
|
}
|
|
3194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
|
|
3195
3195
|
type: Component,
|
|
3196
3196
|
args: [{ selector: "app-feature-flag-value", imports: [
|
|
3197
3197
|
MatFormField,
|
|
@@ -3218,10 +3218,10 @@ class ConditionChipComponent {
|
|
|
3218
3218
|
ngOnChanges() {
|
|
3219
3219
|
this.chipText = this.conditionIndex() > 0 ? "AND" : this.targetingRuleIndex() === 0 ? "IF" : "ELSE IF";
|
|
3220
3220
|
}
|
|
3221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConditionChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
3223
3223
|
}
|
|
3224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConditionChipComponent, decorators: [{
|
|
3225
3225
|
type: Component,
|
|
3226
3226
|
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"] }]
|
|
3227
3227
|
}] });
|
|
@@ -3275,10 +3275,10 @@ class PrerequisiteFlagConditionComponent {
|
|
|
3275
3275
|
throw new Error("Invalid SettingType");
|
|
3276
3276
|
}
|
|
3277
3277
|
}
|
|
3278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3278
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged" }, usesOnChanges: true, ngImport: i0, template: "<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 feature flag or setting key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\">\n @for (setting of prerequisiteSettings(); track $index) {\n <mat-option [value]=\"setting.settingId\">\n {{ setting.key }}\n </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 (prerequisiteSettingType === SettingType.Boolean) {\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=\"Prerequisite feature flag comparison value\"\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 (prerequisiteSettingType !== SettingType.Boolean) {\n <app-feature-flag-value\n class=\"wrapper-group grow\"\n tooltip=\"Prerequisite feature flag comparison value\"\n [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n [isPrerequisite]=\"true\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }] }); }
|
|
3280
3280
|
}
|
|
3281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
|
|
3282
3282
|
type: Component,
|
|
3283
3283
|
args: [{ selector: "app-prerequisite-flag-condition", imports: [
|
|
3284
3284
|
ConditionChipComponent,
|
|
@@ -3312,10 +3312,10 @@ class SegmentConditionComponent {
|
|
|
3312
3312
|
createSegment() {
|
|
3313
3313
|
this.createSegmentRequested.emit();
|
|
3314
3314
|
}
|
|
3315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3315
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3316
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Segment 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 @for (segment of segments(); track $index) {\n <mat-option [value]=\"segment.segmentId\" [title]=\"segment.description\">\n {{ segment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>no segments available</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"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "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"] }] }); }
|
|
3317
3317
|
}
|
|
3318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SegmentConditionComponent, decorators: [{
|
|
3319
3319
|
type: Component,
|
|
3320
3320
|
args: [{ selector: "app-segment-condition", imports: [
|
|
3321
3321
|
ConditionChipComponent,
|
|
@@ -3394,8 +3394,8 @@ class DateTimePickerComponent {
|
|
|
3394
3394
|
validate() {
|
|
3395
3395
|
return this.formGroup.errors;
|
|
3396
3396
|
}
|
|
3397
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
3397
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: [
|
|
3399
3399
|
{
|
|
3400
3400
|
provide: NG_VALUE_ACCESSOR,
|
|
3401
3401
|
useExisting: forwardRef(() => DateTimePickerComponent),
|
|
@@ -3409,7 +3409,7 @@ class DateTimePickerComponent {
|
|
|
3409
3409
|
{ provide: DateAdapter, useClass: AppDateAdapter },
|
|
3410
3410
|
], 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"] }] }); }
|
|
3411
3411
|
}
|
|
3412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
3413
3413
|
type: Component,
|
|
3414
3414
|
args: [{ selector: "app-date-time-picker", providers: [
|
|
3415
3415
|
{
|
|
@@ -3670,10 +3670,10 @@ class ComparatorDialogComponent {
|
|
|
3670
3670
|
const result = this.isConfidential && selected.sensitiveValue ? selected.sensitiveValue : selected.value;
|
|
3671
3671
|
this.dialogRef.close(result);
|
|
3672
3672
|
}
|
|
3673
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ComparatorDialogComponent, isStandalone: true, selector: "app-comparator-dialog", ngImport: i0, template: "<h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n Comparator selector\n</h1>\n<div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\">\n @switch (selectedGroup) {\n @case (ComparatorGroup.Text) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain string/text. The comparison performed by these comparators is\n case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Text }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n @case (ComparatorGroup.Number) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain numbers.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Number }\" />\n </div>\n }\n @case (ComparatorGroup.Semver) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain semantic versions.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Semver }\" />\n </div>\n }\n @case (ComparatorGroup.DateTime) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain datetimes.\n </p>\n <ng-container\n [ngTemplateOutlet]=\"comparators\"\n [ngTemplateOutletContext]=\"{ group: ComparatorGroup.DateTime }\" />\n </div>\n }\n @case (ComparatorGroup.Array) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain items of a string/text list. The comparison performed by these\n comparators is case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Array }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n }\n</div>\n\n<ng-template #comparators let-group=\"group\">\n <div>\n <mat-radio-group color=\"primary\" (change)=\"comparatorChange($event.value)\">\n <div class=\"comparator-container\">\n @for (comparator of listComparators(group); track $index; let i = $index) {\n <div\n class=\"item\"\n [ngClass]=\"'col-' + (i % 2)\"\n [class.selected]=\"comparator.value === selectedComparator\"\n (click)=\"comparatorChange(comparator.value)\">\n <mat-radio-button\n [value]=\"comparator.value\"\n [disabled]=\"data.readOnly\"\n [checked]=\"comparator.value === selectedComparator\"\n [matTooltip]=\"comparator.description\">\n <div class=\"title\">\n {{ comparator.label }}\n </div>\n </mat-radio-button>\n <div class=\"description\">\n <div class=\"example\">\n @switch (comparator.value) {\n <!-- TEXT -->\n @case (UserComparator.TextEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n EQUALS\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT EQUALS\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [ Android, macOS,\n <span class=\"match-val\">iOS</span>\n ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">bob</span>\n , jane ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">@foo.com</span>\n , @bar.com ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@example.com</span>\n NOT ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ @foo.com, @bar.com ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span>\n CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">test</span>\n , localhost ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span>\n NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- NUMBER -->\n @case (UserComparator.NumberEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n =\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n !=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- SEMVER -->\n @case (UserComparator.SemVerIsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">1.0.0</span>\n , 4.3.5 ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerIsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- DATETIME -->\n @case (UserComparator.DateTimeBefore) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span>\n BEFORE\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DateTimeAfter) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span>\n AFTER\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- ARRAY -->\n @case (UserComparator.ArrayContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span>\n ARRAY CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">Writer</span>\n , Admin ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ArrayDoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span>\n ARRAY NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n\n<ng-template #confidential>\n <p>\n Select how the\n <i>comparison values</i>\n should be persisted:\n </p>\n <div\n matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n [matTooltipDisabled]=\"confidentialEnabled\">\n <mat-radio-group class=\"confidential-container\" color=\"primary\" (change)=\"confidentialChange($event.value)\">\n <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n <mat-radio-button [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Hashed</div>\n <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n We recommend using this option in case of frontend applications targeting users based on sensitive data (like\n email addresses, names, etc).\n </div>\n </div>\n <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n <mat-radio-button\n [value]=\"false\"\n [checked]=\"!isConfidential\"\n [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Cleartext</div>\n <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n You can use this option when you target users based on non-sensitive data. Comparison values will be presented\n as plain text in the\n <i>config JSON</i>\n .\n </div>\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:var(--flag-box-rule-list-chip);opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:var(--flag-description)}.container .comparator-container .selected{border-color:var(--input-outline-focused-color)}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media (max-width: 500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
3673
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComparatorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ComparatorDialogComponent, isStandalone: true, selector: "app-comparator-dialog", ngImport: i0, template: "<h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n Comparator selector\n</h1>\n<div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\">\n @switch (selectedGroup) {\n @case (ComparatorGroup.Text) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain string/text. The comparison performed by these comparators is\n case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Text }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n @case (ComparatorGroup.Number) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain numbers.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Number }\" />\n </div>\n }\n @case (ComparatorGroup.Semver) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain semantic versions.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Semver }\" />\n </div>\n }\n @case (ComparatorGroup.DateTime) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain datetimes.\n </p>\n <ng-container\n [ngTemplateOutlet]=\"comparators\"\n [ngTemplateOutletContext]=\"{ group: ComparatorGroup.DateTime }\" />\n </div>\n }\n @case (ComparatorGroup.Array) {\n <div>\n <p>\n The following comparators expect the\n <i>comparison attribute's</i>\n value (passed to the SDK via the\n <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n ) and the\n <i>comparison value</i>\n (specified on the Dashboard) to contain items of a string/text list. The comparison performed by these\n comparators is case-sensitive.\n </p>\n <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{ group: ComparatorGroup.Array }\" />\n <ng-container [ngTemplateOutlet]=\"confidential\" />\n </div>\n }\n }\n</div>\n<div mat-dialog-actions>\n @if (!data.readOnly) {\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n } @else {\n <button type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n }\n</div>\n\n<ng-template #comparators let-group=\"group\">\n <div>\n <mat-radio-group color=\"primary\" (change)=\"comparatorChange($event.value)\">\n <div class=\"comparator-container\">\n @for (comparator of listComparators(group); track $index; let i = $index) {\n <div\n class=\"item\"\n [ngClass]=\"'col-' + (i % 2)\"\n [class.selected]=\"comparator.value === selectedComparator\"\n (click)=\"comparatorChange(comparator.value)\">\n <mat-radio-button\n [value]=\"comparator.value\"\n [disabled]=\"data.readOnly\"\n [checked]=\"comparator.value === selectedComparator\"\n [matTooltip]=\"comparator.description\">\n <div class=\"title\">\n {{ comparator.label }}\n </div>\n </mat-radio-button>\n <div class=\"description\">\n <div class=\"example\">\n @switch (comparator.value) {\n <!-- TEXT -->\n @case (UserComparator.TextEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n EQUALS\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT EQUALS\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob@foo.com</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [ Android, macOS,\n <span class=\"match-val\">iOS</span>\n ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.IsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">bob</span>\n , jane ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotStartsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice@foo.com</span>\n NOT STARTS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@foo.com</span>\n ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">@foo.com</span>\n , @bar.com ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.TextNotEndsWithAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob@example.com</span>\n NOT ENDS WITH ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ @foo.com, @bar.com ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span>\n CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">test</span>\n , localhost ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span>\n NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- NUMBER -->\n @case (UserComparator.NumberEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n =\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberDoesNotEqual) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span>\n !=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.NumberGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- SEMVER -->\n @case (UserComparator.SemVerIsOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n IS ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">1.0.0</span>\n , 4.3.5 ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerIsNotOneOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span>\n IS NOT ONE OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLess) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerLessOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n <=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreater) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span>\n >\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.SemVerGreaterOrEquals) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span>\n >=\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- DATETIME -->\n @case (UserComparator.DateTimeBefore) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span>\n BEFORE\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.DateTimeAfter) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span>\n AFTER\n <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n <!-- ARRAY -->\n @case (UserComparator.ArrayContainsAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span>\n ARRAY CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">\n [\n <span class=\"match-val\">Writer</span>\n , Admin ]\n </span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n @case (UserComparator.ArrayDoesNotContainAnyOf) {\n <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span>\n ARRAY NOT CONTAINS ANY OF\n <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span>\n <span class=\"arrow\">\u2794</span>\n true\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n\n<ng-template #confidential>\n <p>\n Select how the\n <i>comparison values</i>\n should be persisted:\n </p>\n <div\n matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n [matTooltipDisabled]=\"confidentialEnabled\">\n <mat-radio-group class=\"confidential-container\" color=\"primary\" (change)=\"confidentialChange($event.value)\">\n <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n <mat-radio-button [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Hashed</div>\n <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n We recommend using this option in case of frontend applications targeting users based on sensitive data (like\n email addresses, names, etc).\n </div>\n </div>\n <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n <mat-radio-button\n [value]=\"false\"\n [checked]=\"!isConfidential\"\n [disabled]=\"!confidentialEnabled || data.readOnly\">\n <div class=\"title\">\n <div class=\"text\">Cleartext</div>\n <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n </div>\n </mat-radio-button>\n <div class=\"description\">\n You can use this option when you target users based on non-sensitive data. Comparison values will be presented\n as plain text in the\n <i>config JSON</i>\n .\n </div>\n </div>\n </mat-radio-group>\n </div>\n</ng-template>\n", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid var(--input-border-color);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:var(--flag-box-rule-list-chip);opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:var(--flag-description)}.container .comparator-container .selected{border-color:var(--input-outline-focused-color)}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media (max-width: 500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
3675
3675
|
}
|
|
3676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
|
|
3677
3677
|
type: Component,
|
|
3678
3678
|
args: [{ selector: "app-comparator-dialog", imports: [
|
|
3679
3679
|
MatDialogTitle,
|
|
@@ -3920,10 +3920,10 @@ class PopoutListEditorDialogComponent {
|
|
|
3920
3920
|
};
|
|
3921
3921
|
fileReader.readAsText(file);
|
|
3922
3922
|
}
|
|
3923
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
3924
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PopoutListEditorDialogComponent, isStandalone: true, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n <div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Table\"\n [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n Table\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Json\"\n [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n JSON\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Csv\"\n [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n CSV with hints\n </mat-button-toggle>\n <mat-button-toggle\n [value]=\"VisualizationType.Csl\"\n [disabled]=\"\n (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n \"\n [matTooltip]=\"\n currentlyHasHints\n ? 'There are hints set to your values so the CSV without hints view is not available'\n : 'Can not switch between views while there are errors in the current view.'\n \"\n [matTooltipDisabled]=\"\n (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n \">\n CSV without hints\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n <p class=\"description\">\n Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n </p>\n <div class=\"controls\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n <mat-label>Filter</mat-label>\n <input\n matInput\n placeholder=\"Filter values and hints.\"\n [(ngModel)]=\"filterValue\"\n (ngModelChange)=\"applyFilter()\" />\n </mat-form-field>\n </div>\n <div class=\"control-button-container\">\n <div\n class=\"add-btn-container\"\n matTooltip=\"Add item\"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \">\n <div\n [matTooltip]=\"\n 'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n \"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n \">\n @if (!data.readOnly) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"add-btn\"\n [disabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \"\n (click)=\"add()\">\n <mat-icon>add_circle</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data.readOnly) {\n <button\n type=\"button\"\n class=\"action-icon-button\"\n mat-icon-button\n matTooltip=\"Remove all\"\n (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </div>\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n <input matInput focus [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]" }, { 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" }] }); }
|
|
3923
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3924
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: PopoutListEditorDialogComponent, isStandalone: true, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n <div class=\"tabs\">\n <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Table\"\n [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n Table\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Json\"\n [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n JSON\n </mat-button-toggle>\n <mat-button-toggle\n matTooltip=\"Can not switch between views while there are errors in the current view.\"\n [value]=\"VisualizationType.Csv\"\n [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n CSV with hints\n </mat-button-toggle>\n <mat-button-toggle\n [value]=\"VisualizationType.Csl\"\n [disabled]=\"\n (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n \"\n [matTooltip]=\"\n currentlyHasHints\n ? 'There are hints set to your values so the CSV without hints view is not available'\n : 'Can not switch between views while there are errors in the current view.'\n \"\n [matTooltipDisabled]=\"\n (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n \">\n CSV without hints\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n <p class=\"description\">\n Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n </p>\n <div class=\"controls\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n <mat-label>Filter</mat-label>\n <input\n matInput\n placeholder=\"Filter values and hints.\"\n [(ngModel)]=\"filterValue\"\n (ngModelChange)=\"applyFilter()\" />\n </mat-form-field>\n </div>\n <div class=\"control-button-container\">\n <div\n class=\"add-btn-container\"\n matTooltip=\"Add item\"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \">\n <div\n [matTooltip]=\"\n 'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n \"\n [matTooltipDisabled]=\"\n listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n \">\n @if (!data.readOnly) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"add-btn\"\n [disabled]=\"\n listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n \"\n (click)=\"add()\">\n <mat-icon>add_circle</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data.readOnly) {\n <button\n type=\"button\"\n class=\"action-icon-button\"\n mat-icon-button\n matTooltip=\"Remove all\"\n (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </div>\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"value-field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n <input matInput focus [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]" }, { 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" }] }); }
|
|
3925
3925
|
}
|
|
3926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
3926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
|
|
3927
3927
|
type: Component,
|
|
3928
3928
|
args: [{ selector: "app-popout-list-editor-dialog", imports: [
|
|
3929
3929
|
MatDialogTitle,
|
|
@@ -4521,10 +4521,10 @@ class UserConditionComponent {
|
|
|
4521
4521
|
isNullCompVal(compVal) {
|
|
4522
4522
|
return !compVal.doubleValue && !compVal.listValue && !compVal.stringValue;
|
|
4523
4523
|
}
|
|
4524
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
4525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n [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" }] }); }
|
|
4524
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: UserConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4525
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n [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" }] }); }
|
|
4526
4526
|
}
|
|
4527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
4527
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: UserConditionComponent, decorators: [{
|
|
4528
4528
|
type: Component,
|
|
4529
4529
|
args: [{ selector: "app-user-condition", providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], imports: [
|
|
4530
4530
|
ConditionChipComponent,
|
|
@@ -4631,10 +4631,10 @@ class ConditionsComponent {
|
|
|
4631
4631
|
}
|
|
4632
4632
|
return true;
|
|
4633
4633
|
}
|
|
4634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
4635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
4634
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", lastConditionDeleted: "lastConditionDeleted", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, 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 (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\" />\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;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", "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],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"], outputs: ["prerequisiteConditionChanged"] }, { 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"] }] }); }
|
|
4636
4636
|
}
|
|
4637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
4637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ConditionsComponent, decorators: [{
|
|
4638
4638
|
type: Component,
|
|
4639
4639
|
args: [{ selector: "app-conditions", imports: [
|
|
4640
4640
|
UserConditionComponent,
|
|
@@ -4704,10 +4704,10 @@ class PercentageOptionsComponent {
|
|
|
4704
4704
|
const percentageEvaluationAttribute = this.percentageEvaluationAttribute();
|
|
4705
4705
|
return !percentageEvaluationAttribute ? "Identifier" : percentageEvaluationAttribute;
|
|
4706
4706
|
}
|
|
4707
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
4708
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, showPercentageEvaluationAttribute: { classPropertyName: "showPercentageEvaluationAttribute", publicName: "showPercentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested" }, 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 [flagState]=\"flagState()\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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 (flagState().settingValue.setting.settingType !== SettingType.Boolean && !flagState().readOnly) {\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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }] }); }
|
|
4707
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PercentageOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4708
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, showPercentageEvaluationAttribute: { classPropertyName: "showPercentageEvaluationAttribute", publicName: "showPercentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested" }, 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 [flagState]=\"flagState()\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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 (flagState().settingValue.setting.settingType !== SettingType.Boolean && !flagState().readOnly) {\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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }] }); }
|
|
4709
4709
|
}
|
|
4710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
4710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
|
|
4711
4711
|
type: Component,
|
|
4712
4712
|
args: [{ selector: "app-percentage-options", imports: [
|
|
4713
4713
|
MatFormField,
|
|
@@ -4811,10 +4811,10 @@ class TargetingRuleComponent {
|
|
|
4811
4811
|
subscriptionLimitReachedCalled() {
|
|
4812
4812
|
this.subscriptionLimitReached.emit();
|
|
4813
4813
|
}
|
|
4814
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
4815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
4814
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TargetingRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: TargetingRuleComponent, isStandalone: true, selector: "app-targeting-rule", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, 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" }, 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 (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\" />\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 (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [flagState]=\"flagState()\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged"] }, { 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"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { 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"] }] }); }
|
|
4816
4816
|
}
|
|
4817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
4817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TargetingRuleComponent, decorators: [{
|
|
4818
4818
|
type: Component,
|
|
4819
4819
|
args: [{ selector: "app-targeting-rule", imports: [
|
|
4820
4820
|
ConditionsComponent,
|
|
@@ -5007,10 +5007,10 @@ class EvaluationFormulaComponent {
|
|
|
5007
5007
|
prerequisiteIds: prerequisiteIds,
|
|
5008
5008
|
});
|
|
5009
5009
|
}
|
|
5010
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
5011
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: EvaluationFormulaComponent, isStandalone: true, selector: "app-evaluation-formula", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, 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" }, 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 (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 <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 [flagState]=\"flagState()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged"] }, { 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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { 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"] }] }); }
|
|
5010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EvaluationFormulaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: EvaluationFormulaComponent, isStandalone: true, selector: "app-evaluation-formula", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, 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" }, 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 (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 <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 [flagState]=\"flagState()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged"] }, { 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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { 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"] }] }); }
|
|
5012
5012
|
}
|
|
5013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
5013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EvaluationFormulaComponent, decorators: [{
|
|
5014
5014
|
type: Component,
|
|
5015
5015
|
args: [{ selector: "app-evaluation-formula", imports: [
|
|
5016
5016
|
MatTooltip,
|
|
@@ -5082,10 +5082,10 @@ class PercentageEvaluationAttributeDialogComponent {
|
|
|
5082
5082
|
const percentageEvaluationAttributeFilter = this.formControl.value === this.defaultComparisonAttributes[0] ? null : this.formControl.value;
|
|
5083
5083
|
this.dialogRef.close({ percentageEvaluationAttribute: percentageEvaluationAttributeFilter });
|
|
5084
5084
|
}
|
|
5085
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
5086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
5085
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5086
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
5087
5087
|
}
|
|
5088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
5088
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
|
|
5089
5089
|
type: Component,
|
|
5090
5090
|
args: [{ selector: "app-percentage-evaluation-attribute-dialog", imports: [
|
|
5091
5091
|
MatDialogTitle,
|
|
@@ -5254,10 +5254,10 @@ class FeatureFlagComponent {
|
|
|
5254
5254
|
},
|
|
5255
5255
|
});
|
|
5256
5256
|
}
|
|
5257
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
5258
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, 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 [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 [flagState]=\"flagStateValue\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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 [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 </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</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}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;margin-right: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;margin-right:12px;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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { 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", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { 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: ["hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
5257
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5258
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, 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 [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 [flagState]=\"flagStateValue\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\" />\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 [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 </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</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}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;margin-right: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;margin-right:12px;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", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { 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", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { 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: ["hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
5259
5259
|
}
|
|
5260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
5260
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FeatureFlagComponent, decorators: [{
|
|
5261
5261
|
type: Component,
|
|
5262
5262
|
args: [{ selector: "app-feature-flag", imports: [
|
|
5263
5263
|
NgClass,
|
|
@@ -5574,10 +5574,10 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
5574
5574
|
this.flagState.panelExpanded = expandedState;
|
|
5575
5575
|
this.expandedStateChanged.emit();
|
|
5576
5576
|
}
|
|
5577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
5578
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: FeatureFlagItemComponent, isStandalone: true, selector: "app-feature-flag-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n @if (!loading) {\n <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n <app-feature-flag\n [formGroup]=\"formGroup\"\n [flagState]=\"flagState\"\n [segments]=\"segments\"\n [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n [hasOtherEnvironment]=\"false\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [environmentName]=\"settingFormula.environment.name\"\n [deleteSettingText]=\"deleteSettingText()\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($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 .read-only-notification{margin-top:.6rem}.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"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { 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"] }] }); }
|
|
5577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FeatureFlagItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5578
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: FeatureFlagItemComponent, isStandalone: true, selector: "app-feature-flag-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n @if (!loading) {\n <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n <app-feature-flag\n [formGroup]=\"formGroup\"\n [flagState]=\"flagState\"\n [segments]=\"segments\"\n [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n [hasOtherEnvironment]=\"false\"\n [showEnvironmentName]=\"showEnvironmentName()\"\n [environmentName]=\"settingFormula.environment.name\"\n [deleteSettingText]=\"deleteSettingText()\"\n [canDeleteSetting]=\"canDeleteSetting()\"\n (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($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 .read-only-notification{margin-top:.6rem}.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"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { 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"] }] }); }
|
|
5579
5579
|
}
|
|
5580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
5580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
|
|
5581
5581
|
type: Component,
|
|
5582
5582
|
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 (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n (recalcAddButtons)=\"recalcAddButtons()\"\n (expandedChanged)=\"expandedChanged($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 .read-only-notification{margin-top:.6rem}.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"] }]
|
|
5583
5583
|
}], ctorParameters: () => [] });
|