ng-configcat-publicapi-ui 4.0.1 → 4.0.3

package/fesm2022/ng-configcat-publicapi-ui.mjs

@@ -2248,6 +2248,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
+class RerouteDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    yes() {
+        this.dialogRef.close('yes');
+    }
+    cancel() {
+        this.dialogRef.close('cancel');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RerouteDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RerouteDialogComponent, 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 href=\"{{data.yesButtonLink}}\" class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n      data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  </a>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", styles: [".hidden-link:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RerouteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-reroute-dialog', 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 href=\"{{data.yesButtonLink}}\" class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n      data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  </a>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", styles: [".hidden-link:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class InfoDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
@@ -2645,11 +2667,11 @@ class PercentageOptionsComponent {
         return !this.percentageEvaluationAttribute ? 'Identifier' : this.percentageEvaluationAttribute;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PercentageOptionsComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: { formArray: "formArray", flagState: "flagState", featureFlagLimitations: "featureFlagLimitations", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute", isPercentageOnlyTargetingRule: "isPercentageOnlyTargetingRule" }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested" }, ngImport: i0, template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/V2/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/V2/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/V2/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.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}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;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}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\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:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;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:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: { formArray: "formArray", flagState: "flagState", featureFlagLimitations: "featureFlagLimitations", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute", isPercentageOnlyTargetingRule: "isPercentageOnlyTargetingRule" }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested" }, ngImport: i0, template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\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\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\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\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.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}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;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}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\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:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;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:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-percentage-options', template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/V2/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/V2/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/V2/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.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}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;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}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\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:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;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:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"] }]
+            args: [{ selector: 'app-percentage-options', template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\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\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\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\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.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}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;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}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\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:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;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:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }], propDecorators: { formArray: [{
                 type: Input
             }], flagState: [{
@@ -2760,11 +2782,11 @@ class ComparatorDialogComponent {
         this.dialogRef.close(result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ComparatorDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ComparatorDialogComponent, selector: "app-comparator-dialog", ngImport: i0, template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\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\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [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                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div 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\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [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 email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [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 as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", 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 rgb(224,224,224);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 rgb(224,224,224);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:#f1f1f1;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:#636363}.container .comparator-container .selected{border-color:#f7a224}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ComparatorDialogComponent, selector: "app-comparator-dialog", ngImport: i0, template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\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\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [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                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div 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\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [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 email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [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 as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", 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 rgb(224,224,224);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 rgb(224,224,224);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:#f1f1f1;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:#636363}.container .comparator-container .selected{border-color:#f7a224}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-comparator-dialog', template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\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\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/V2/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [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                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div 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\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [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 email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [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 as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", 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 rgb(224,224,224);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 rgb(224,224,224);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:#f1f1f1;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:#636363}.container .comparator-container .selected{border-color:#f7a224}.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"] }]
+            args: [{ selector: 'app-comparator-dialog', template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\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\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [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                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div 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\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [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 email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [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 as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", 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 rgb(224,224,224);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 rgb(224,224,224);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:#f1f1f1;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:#636363}.container .comparator-container .selected{border-color:#f7a224}.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"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3518,7 +3540,7 @@ class UserConditionComponent {
                 title: `Consider using confidential comparators`,
                 body: `Comparison value will be presented as plain text 
         in the <i>config JSON</i>. If you have sensitive data, consider using one of the confidential (hashed) comparators.<br/><br/>
-        See the <a href="https://configcat.com/docs/V2/targeting/targeting-rule/user-condition/#confidential-text-comparators" target="_blank">documentation</a> for more information.`,
+        See the <a href="https://configcat.com/docs/targeting/targeting-rule/user-condition/#confidential-text-comparators" target="_blank">documentation</a> for more information.`,
                 secondaryButtonLabel: 'Open comparator selector',
                 secondaryButtonAction: () => this.compDialog()
             }
@@ -3527,13 +3549,13 @@ class UserConditionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UserConditionComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialog }, { token: ComparisonValueListHelper }, { token: i5$2.Clipboard }, { token: MessagingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: UserConditionComponent, selector: "app-user-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", readOnly: "readOnly", featureFlagLimitations: "featureFlagLimitations", formGroup: "formGroup" }, providers: [
             { provide: DateAdapter, useClass: AppDateAdapter }
-        ], viewQueries: [{ propertyName: "setMatChipGrid", first: true, predicate: ["chipGrid"], descendants: true }], ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/V2/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.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: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }] }); }
+        ], viewQueries: [{ propertyName: "setMatChipGrid", first: true, predicate: ["chipGrid"], descendants: true }], ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.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: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UserConditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-user-condition', providers: [
                         { provide: DateAdapter, useClass: AppDateAdapter }
-                    ], template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/V2/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"] }]
+                    ], template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }, { type: i1$1.MatDialog }, { type: ComparisonValueListHelper }, { type: i5$2.Clipboard }, { type: MessagingService }, { type: i0.ChangeDetectorRef }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{
@@ -3577,11 +3599,11 @@ class SegmentConditionComponent {
         this.createSegmentRequested.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", formGroup: "formGroup", segments: "segments", canManageSegments: "canManageSegments" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/V2/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\n            <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.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: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", formGroup: "formGroup", segments: "segments", canManageSegments: "canManageSegments" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\n            <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.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: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SegmentConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-segment-condition', template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/V2/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\n            <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"] }]
+            args: [{ selector: 'app-segment-condition', template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\n            <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\n</mat-menu>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{
@@ -3643,11 +3665,11 @@ class PrerequisiteFlagConditionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", formGroup: "formGroup", prerequisiteSettings: "prerequisiteSettings", featureFlagLimitations: "featureFlagLimitations" }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/V2/targeting/targeting-rule/flag-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">flag</a></div>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component pad-right\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.prerequisiteSettingId\"\n                    (change)=\"prerequisiteSettingChanged()\" matTooltip=\"Prerequisite feature flag or setting key\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"prerequisiteSettings.length\">Select feature\n                        flag ...</option>\n                    <option *ngFor=\"let setting of prerequisiteSettings\" [ngValue]=\"setting.settingId\">\n                        {{setting.key}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.prerequisiteSettingId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.prerequisiteSettingId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType === SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\"\n                    matTooltip=\"Prerequisite feature flag comparison value\">\n                    <option *ngFor=\"let prerequisiteComparator of booleanPrerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Comparator\">\n                    <option *ngFor=\"let prerequisiteComparator of prerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <app-feature-flag-value class=\"wrapper-group grow\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\"\n        tooltip=\"Prerequisite feature flag comparison value\"\n        [formGroup]=\"formGroup.controls.prerequisiteComparisonValue\" [isPrerequisite]=\"true\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", "select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", formGroup: "formGroup", prerequisiteSettings: "prerequisiteSettings", featureFlagLimitations: "featureFlagLimitations" }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">flag</a></div>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component pad-right\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.prerequisiteSettingId\"\n                    (change)=\"prerequisiteSettingChanged()\" matTooltip=\"Prerequisite feature flag or setting key\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"prerequisiteSettings.length\">Select feature\n                        flag ...</option>\n                    <option *ngFor=\"let setting of prerequisiteSettings\" [ngValue]=\"setting.settingId\">\n                        {{setting.key}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.prerequisiteSettingId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.prerequisiteSettingId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType === SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\"\n                    matTooltip=\"Prerequisite feature flag comparison value\">\n                    <option *ngFor=\"let prerequisiteComparator of booleanPrerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Comparator\">\n                    <option *ngFor=\"let prerequisiteComparator of prerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <app-feature-flag-value class=\"wrapper-group grow\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\"\n        tooltip=\"Prerequisite feature flag comparison value\"\n        [formGroup]=\"formGroup.controls.prerequisiteComparisonValue\" [isPrerequisite]=\"true\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", "select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-prerequisite-flag-condition', template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/V2/targeting/targeting-rule/flag-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">flag</a></div>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component pad-right\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.prerequisiteSettingId\"\n                    (change)=\"prerequisiteSettingChanged()\" matTooltip=\"Prerequisite feature flag or setting key\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"prerequisiteSettings.length\">Select feature\n                        flag ...</option>\n                    <option *ngFor=\"let setting of prerequisiteSettings\" [ngValue]=\"setting.settingId\">\n                        {{setting.key}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.prerequisiteSettingId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.prerequisiteSettingId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType === SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\"\n                    matTooltip=\"Prerequisite feature flag comparison value\">\n                    <option *ngFor=\"let prerequisiteComparator of booleanPrerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Comparator\">\n                    <option *ngFor=\"let prerequisiteComparator of prerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <app-feature-flag-value class=\"wrapper-group grow\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\"\n        tooltip=\"Prerequisite feature flag comparison value\"\n        [formGroup]=\"formGroup.controls.prerequisiteComparisonValue\" [isPrerequisite]=\"true\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", "select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"] }]
+            args: [{ selector: 'app-prerequisite-flag-condition', template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">flag</a></div>\n    </div>\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component pad-right\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.prerequisiteSettingId\"\n                    (change)=\"prerequisiteSettingChanged()\" matTooltip=\"Prerequisite feature flag or setting key\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"prerequisiteSettings.length\">Select feature\n                        flag ...</option>\n                    <option *ngFor=\"let setting of prerequisiteSettings\" [ngValue]=\"setting.settingId\">\n                        {{setting.key}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.prerequisiteSettingId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.prerequisiteSettingId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType === SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\"\n                    matTooltip=\"Prerequisite feature flag comparison value\">\n                    <option *ngFor=\"let prerequisiteComparator of booleanPrerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"targeting-rule-component pad-right\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Comparator\">\n                    <option *ngFor=\"let prerequisiteComparator of prerequisiteComparators\"\n                        [ngValue]=\"prerequisiteComparator.value\">\n                        {{prerequisiteComparator.label}}\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <app-feature-flag-value class=\"wrapper-group grow\" *ngIf=\"prerequisiteSettingType !== SettingType.Boolean\"\n        tooltip=\"Prerequisite feature flag comparison value\"\n        [formGroup]=\"formGroup.controls.prerequisiteComparisonValue\" [isPrerequisite]=\"true\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>", 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%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.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:6px;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", "select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{
@@ -4116,11 +4138,11 @@ class PercentageEvaluationAttributeDialogComponent {
         this.dialogRef.close({ percentageEvaluationAttribute: this.formControl.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: FormGenerator }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PercentageEvaluationAttributeDialogComponent, 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.</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            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/V2/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</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 (click)=\"close()\">Cancel</button>\n</div>", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PercentageEvaluationAttributeDialogComponent, 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.</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            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</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 (click)=\"close()\">Cancel</button>\n</div>", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-percentage-evaluation-attribute-dialog', 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.</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            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/V2/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</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 (click)=\"close()\">Cancel</button>\n</div>", 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"] }]
+            args: [{ selector: 'app-percentage-evaluation-attribute-dialog', 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.</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            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</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 (click)=\"close()\">Cancel</button>\n</div>", 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"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: FormGenerator }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4159,6 +4181,7 @@ class FeatureFlagComponent {
         this.environmentName = "";
         this.showEnvironmentName = false;
         this.deleteSettingText = 'Delete setting';
+        this.canDeleteSetting = false;
         this.addSegmentConditionRequestedWithoutSegments = new EventEmitter();
         this.expandedChanged = new EventEmitter();
         this.deleteSettingRequested = new EventEmitter();
@@ -4253,9 +4276,6 @@ class FeatureFlagComponent {
         }
         return '+ ' + count + ' rule' + (count > 1 ? 's' : '');
     }
-    openInConfigCat() {
-        window.open(this.getDashboardUrl(), '_blank');
-    }
     copyDirectLink() {
         try {
             this.clipboard.copy(this.getDashboardUrl());
@@ -4283,11 +4303,11 @@ class FeatureFlagComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagComponent, deps: [{ token: i1$1.MatDialog }, { token: MessagingService }, { token: FormGenerator }, { token: i1$2.Router }, { token: PublicApiService }, { token: i5$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <div mat-menu-item data-robot=\"history\" (click)=\"openInConfigCat()\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>Open in ConfigCat</span>\n    </div>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <mat-divider></mat-divider>\n    <div mat-menu-item data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{deleteSettingText}}</span>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@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%}}@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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.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: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText", canDeleteSetting: "canDeleteSetting" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\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 mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@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%}}@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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.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: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <div mat-menu-item data-robot=\"history\" (click)=\"openInConfigCat()\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>Open in ConfigCat</span>\n    </div>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <mat-divider></mat-divider>\n    <div mat-menu-item data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{deleteSettingText}}</span>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@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%}}@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"] }]
+            args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\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 mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@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%}}@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"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: MessagingService }, { type: FormGenerator }, { type: i1$2.Router }, { type: PublicApiService }, { type: i5$2.Clipboard }], propDecorators: { formGroup: [{
                 type: Input
             }], flagState: [{
@@ -4304,6 +4324,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], deleteSettingText: [{
                 type: Input
+            }], canDeleteSetting: [{
+                type: Input
             }], addSegmentConditionRequestedWithoutSegments: [{
                 type: Output
             }], expandedChanged: [{
@@ -4532,33 +4554,23 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.deleteSettingRequested.emit({ config: this.settingFormula.config, environment: this.settingFormula.environment, setting: setting.setting });
     }
     subscriptionLimitReachedCalled() {
-        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        this.dialog.open(RerouteDialogComponent, {
             data: {
                 title: 'You have reached the limits of your plan',
                 body: ` Upgrade your plan or join our <a href="https://configcat.com/referrals" target="_blank" rel="noopener noreferrer">referral program</a> to increase your limits.`,
                 yesButtonLabel: `See plans`,
+                yesButtonLink: this.dashboardBasePath + "/organization/plans",
                 noButtonLabel: `Close`
             }
         });
-        dialogRef.afterClosed().subscribe(result => {
-            if (result === 'yes') {
-                const plansUrl = this.dashboardBasePath + "/organization/plans";
-                window.open(plansUrl, '_blank');
-            }
-        });
     }
     addSegmentConditionRequestedWithoutSegments() {
-        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        this.dialog.open(RerouteDialogComponent, {
             data: {
                 title: 'There are no segments in this product yet.',
                 body: `Go ahead to the ConfiCat Dashboard and create your first user segment before adding it to a targeting rule.`,
                 yesButtonLabel: `Go to the dashboard`,
-            }
-        });
-        dialogRef.afterClosed().subscribe(result => {
-            if (result === 'yes') {
-                const segmentUrl = this.dashboardBasePath + "/product/" + this.productId + "/segments";
-                window.open(segmentUrl, '_blank');
+                yesButtonLink: this.dashboardBasePath + "/product/" + this.productId + "/segments"
             }
         });
     }
@@ -4604,11 +4616,11 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.expandedStateChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagItemComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialog }, { token: i2$1.MatSnackBar }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
+            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }, { type: i1$1.MatDialog }, { type: i2$1.MatSnackBar }, { type: PublicApiService }], propDecorators: { productId: [{
                 type: Input
             }], environmentId: [{
@@ -4686,7 +4698,8 @@ class NgConfigCatPublicApiUIModule {
             AceEditorComponent,
             FeatureFlagItemComponent,
             DateTimePickerComponent,
-            DependeesDialogComponent], imports: [CommonModule,
+            DependeesDialogComponent,
+            RerouteDialogComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             BrowserAnimationsModule,
@@ -4799,7 +4812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         AceEditorComponent,
                         FeatureFlagItemComponent,
                         DateTimePickerComponent,
-                        DependeesDialogComponent
+                        DependeesDialogComponent,
+                        RerouteDialogComponent
                     ],
                     imports: [
                         CommonModule,