npm - ng-configcat-publicapi-ui - Versions diffs - 4.0.2 → 4.0.3 - Mend

ng-configcat-publicapi-ui 4.0.2 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -2667,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: [{
@@ -2782,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]
@@ -3540,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()
             }
@@ -3549,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: [{
@@ -3599,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: [{
@@ -3665,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: [{
@@ -4138,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]