ng-configcat-publicapi-ui 4.0.0 → 4.0.2

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

@@ -6,7 +6,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { forkJoin, throwError, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import * as i3 from '@angular/forms';
-import { Validators, NG_VALUE_ACCESSOR, FormGroup, FormArray, FormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormArray, Validators, NG_VALUE_ACCESSOR, FormGroup, FormArray, FormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/common';
@@ -66,10 +66,10 @@ class Configuration {
         this.basePath = 'https://api.configcat.com';
         this.dashboardBasePath = 'https://app.configcat.com';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Configuration, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Configuration }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: Configuration, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: Configuration }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Configuration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: Configuration, decorators: [{
             type: Injectable
         }] });
 
@@ -135,10 +135,10 @@ class PublicApiService {
     getDashboardBasePath() {
         return this.configuration?.dashboardBasePath ?? 'https://app.configcat.com';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PublicApiService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PublicApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PublicApiService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PublicApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PublicApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PublicApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Configuration, decorators: [{
@@ -173,10 +173,10 @@ class BaseComponent {
     createSegmentsService() {
         return this.publicApiService.createSegmentsService(this.basicAuthUsername, this.basicAuthPassword, this.basePath);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: BaseComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: BaseComponent, selector: "base", inputs: { basePath: "basePath", basicAuthUsername: "basicAuthUsername", basicAuthPassword: "basicAuthPassword" }, ngImport: i0, template: '<div></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BaseComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BaseComponent, selector: "base", inputs: { basePath: "basePath", basicAuthUsername: "basicAuthUsername", basicAuthPassword: "basicAuthPassword" }, ngImport: i0, template: '<div></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'base',
@@ -200,24 +200,79 @@ class PlatformHelper {
 const percentageRegex = '^[0-9]*$';
 const wholeNumberRegex = '^[-+]?[0-9]\\d*$';
 const timeRegex = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
+const featureFlagKeyRegex = '^[a-zA-Z]+[a-zA-Z0-9_-]*$';
 class FormHelper {
     static getErrorMessage(control, hint = '') {
         if (!control || control.valid) {
             return null;
         }
+        if (control.hasError('validateNumberNan')) {
+            return `Invalid value.`;
+        }
+        if (control.hasError('matDatepickerParse')) {
+            return `Invalid date value.`;
+        }
         if (control.hasError('required')) {
-            return `${hint} The field is required.`;
+            if (control instanceof UntypedFormArray) {
+                return 'The list must contain min 1 items.';
+            }
+            else {
+                return hint ? `${hint} The field is required.` : `The field is required.`;
+            }
         }
-        if (control.hasError('pattern')) {
-            return 'Not a valid e-mail address.';
+        if (control.hasError('emails')) {
+            return control.errors.emails;
         }
         if (control.hasError('minlength')) {
-            return 'The field must be at least ' + control.getError('minlength').requiredLength + ' characters long';
+            if (control instanceof UntypedFormArray) {
+                return 'The list must contain min ' + control.errors.minlength.requiredLength + ' items.';
+            }
+            else {
+                return 'The field must be at least ' + control.errors.minlength.requiredLength + ' characters long.';
+            }
         }
         if (control.hasError('maxlength')) {
-            return 'The field must be at max ' + control.getError('maxlength').requiredLength + ' characters long';
+            if (control instanceof UntypedFormArray) {
+                return 'The list must contain max ' + control.errors.maxlength.requiredLength + ' items.';
+            }
+            else {
+                return 'The field must be at max ' + control.errors.maxlength.requiredLength + ' characters long.';
+            }
         }
-        return null;
+        if (control.hasError('serverSide')) {
+            return control.errors.serverSide;
+        }
+        if (control.hasError('pattern') && control.errors.pattern.requiredPattern === percentageRegex) {
+            return 'The percentage value must be a whole number.';
+        }
+        if (control.hasError('pattern') && control.errors.pattern.requiredPattern === wholeNumberRegex) {
+            return 'Please enter a whole number e.g. 42.';
+        }
+        if (control.hasError('pattern') && control.errors.pattern.requiredPattern === timeRegex) {
+            return 'Invalid time value.';
+        }
+        if (control.hasError('pattern') && control.errors.pattern.requiredPattern === featureFlagKeyRegex) {
+            return 'Invalid key. Keys must start with a letter, followed by a combination of numbers, letters, underscores and hyphens.';
+        }
+        if (control.hasError('pattern')) {
+            return 'Not a valid e-mail address.';
+        }
+        if (control.hasError('alreadyExists')) {
+            return control.errors.alreadyExists;
+        }
+        if (control.hasError('validateSemVer')) {
+            return 'Invalid semantic version.';
+        }
+        if (control.hasError('validatePercentageSum')) {
+            return 'The sum of percentages must be equal to 100.';
+        }
+        if (control.hasError('min')) {
+            return 'The value must be greater than ' + (control.errors.min.min - 1) + '.';
+        }
+        if (control.hasError('max')) {
+            return 'The value must be less than ' + (control.errors.max.max + 1) + '.';
+        }
+        return '';
     }
     static handleErrors(formGroup, error) {
         if (error instanceof HttpErrorResponse) {
@@ -321,10 +376,10 @@ class ReasonDialogComponent {
     cancel() {
         this.dialogRef.close({ button: 'cancel' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ReasonDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ReasonDialogComponent, selector: "configcat-reason-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Add notes</h1>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <div mat-dialog-content class=\"container\">\n    <p>This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).</p>\n    <mat-form-field appearance=\"outline\">\n      <mat-label>Note</mat-label>\n      <textarea matInput formControlName=\"reason\" name=\"reason\" placeholder=\"I'm changing settings because...\"\n        rows=\"3\"></textarea>\n      <mat-error *ngIf=\"formGroup.controls.reason.invalid\">The field is required.</mat-error>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px;\" mat-flat-button color=\"primary\">Add notes & Save</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>", styles: [".container>*{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ReasonDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ReasonDialogComponent, selector: "configcat-reason-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Add notes</h1>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <div mat-dialog-content class=\"container\">\n    <p>This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).</p>\n    <mat-form-field appearance=\"outline\">\n      <mat-label>Note</mat-label>\n      <textarea matInput formControlName=\"reason\" name=\"reason\" placeholder=\"I'm changing settings because...\"\n        rows=\"3\"></textarea>\n      <mat-error *ngIf=\"formGroup.controls.reason.invalid\">The field is required.</mat-error>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px;\" mat-flat-button color=\"primary\">Add notes & Save</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>", styles: [".container>*{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.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.1.3", ngImport: i0, type: ReasonDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ReasonDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-reason-dialog', template: "<h1 mat-dialog-title>Add notes</h1>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <div mat-dialog-content class=\"container\">\n    <p>This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).</p>\n    <mat-form-field appearance=\"outline\">\n      <mat-label>Note</mat-label>\n      <textarea matInput formControlName=\"reason\" name=\"reason\" placeholder=\"I'm changing settings because...\"\n        rows=\"3\"></textarea>\n      <mat-error *ngIf=\"formGroup.controls.reason.invalid\">The field is required.</mat-error>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px;\" mat-flat-button color=\"primary\">Add notes & Save</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>", styles: [".container>*{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i3.UntypedFormBuilder }] });
@@ -333,10 +388,10 @@ class SaveSnackbarComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SaveSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SaveSnackbarComponent, selector: "configcat-save-snackbar", ngImport: i0, template: "<p class=\"header\">Settings saved successfully.</p>", styles: ["p{text-align:center;font-weight:700}.header{font-size:1.2em}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SaveSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SaveSnackbarComponent, selector: "configcat-save-snackbar", ngImport: i0, template: "<p class=\"header\">Settings saved successfully.</p>", styles: ["p{text-align:center;font-weight:700}.header{font-size:1.2em}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SaveSnackbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SaveSnackbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-save-snackbar', template: "<p class=\"header\">Settings saved successfully.</p>", styles: ["p{text-align:center;font-weight:700}.header{font-size:1.2em}\n"] }]
         }], ctorParameters: () => [] });
@@ -498,10 +553,10 @@ class SettingListFormHelper {
             ? FormHelper.normalizeNumberStoredAsString(comparisonValue)
             : comparisonValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListFormHelper, deps: [{ token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListFormHelper, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListFormHelper, deps: [{ token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListFormHelper, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListFormHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListFormHelper, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i3.UntypedFormBuilder }] });
@@ -564,10 +619,10 @@ class ExpandDialogComponent {
     close() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ExpandDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i3.UntypedFormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ExpandDialogComponent, selector: "configcat-expand-dialog", ngImport: i0, template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\" *ngIf=\"!readOnly\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\" *ngIf=\"!readOnly\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"close()\">Done</button>\n</div>", styles: [".container>*{width:100%}.container>* .value-field{display:flex;font-size:12px;flex-wrap:nowrap}.container>* .value-field mat-form-field{flex-grow:1}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\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.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.MatLabel, selector: "mat-label" }, { 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: 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ExpandDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i3.UntypedFormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ExpandDialogComponent, selector: "configcat-expand-dialog", ngImport: i0, template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\" *ngIf=\"!readOnly\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\" *ngIf=\"!readOnly\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"close()\">Done</button>\n</div>", styles: [".container>*{width:100%}.container>* .value-field{display:flex;font-size:12px;flex-wrap:nowrap}.container>* .value-field mat-form-field{flex-grow:1}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\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.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.MatLabel, selector: "mat-label" }, { 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: 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.1.3", ngImport: i0, type: ExpandDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ExpandDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-expand-dialog', template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\" *ngIf=\"!readOnly\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\" *ngIf=\"!readOnly\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"close()\">Done</button>\n</div>", styles: [".container>*{width:100%}.container>* .value-field{display:flex;font-size:12px;flex-wrap:nowrap}.container>* .value-field mat-form-field{flex-grow:1}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i3.UntypedFormBuilder }, { type: undefined, decorators: [{
@@ -597,10 +652,10 @@ class InputDisplayNormalizerDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: InputDisplayNormalizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]", host: { listeners: { "blur": "onChange($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: InputDisplayNormalizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]", host: { listeners: { "blur": "onChange($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: InputDisplayNormalizerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: InputDisplayNormalizerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -625,12 +680,12 @@ class ValueComponent {
     formatDecimalNumber(value) {
         return FormHelper.formatNumberForDisplay(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ValueComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ValueComponent, selector: "configcat-value", inputs: { valueFormControl: "valueFormControl", setting: "setting" }, ngImport: i0, template: "<div class=\"flex\">\n  <div class=\"container\" [ngSwitch]=\"setting.settingType\">\n    <div *ngSwitchCase=\"SettingType.String\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"text\"\n             [formControl]=\"valueFormControl\" placeholder=\"my value\" name=\"value\">\n      <div class=\"expand\" (click)=\"popOut()\" matTooltip=\"Pop-out Editor\">\n        <mat-icon>height</mat-icon>\n      </div>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Int\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"42\" name=\"value\" />\n    </div>\n    <div *ngSwitchCase=\"SettingType.Double\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Boolean\" class=\"toggle\">\n      <label class=\"switch\">\n        <input type=\"checkbox\" [formControl]=\"valueFormControl\" name=\"value\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  </div>\n  <div *ngIf=\"setting.settingType === SettingType.Boolean\" class=\"spacer\"></div>\n\n</div>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.flex .container input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 5px;cursor:pointer;color:#888;display:flex;align-items:center}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.flex .expand mat-icon{transform:rotate(45deg)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: 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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ValueComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ValueComponent, selector: "configcat-value", inputs: { valueFormControl: "valueFormControl", setting: "setting" }, ngImport: i0, template: "<div class=\"flex\">\n  <div class=\"container\" [ngSwitch]=\"setting.settingType\">\n    <div *ngSwitchCase=\"SettingType.String\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"text\"\n             [formControl]=\"valueFormControl\" placeholder=\"my value\" name=\"value\">\n      <div class=\"expand\" (click)=\"popOut()\" matTooltip=\"Pop-out Editor\">\n        <mat-icon>height</mat-icon>\n      </div>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Int\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"42\" name=\"value\" digitOnly digitOnlyAllowNegatives=\"true\"/>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Double\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Boolean\" class=\"toggle\">\n      <label class=\"switch\">\n        <input type=\"checkbox\" [formControl]=\"valueFormControl\" name=\"value\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  </div>\n  <div *ngIf=\"setting.settingType === SettingType.Boolean\" class=\"spacer\"></div>\n\n</div>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.flex .container input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 5px;cursor:pointer;color:#888;display:flex;align-items:center}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.flex .expand mat-icon{transform:rotate(45deg)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: 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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-value', template: "<div class=\"flex\">\n  <div class=\"container\" [ngSwitch]=\"setting.settingType\">\n    <div *ngSwitchCase=\"SettingType.String\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"text\"\n             [formControl]=\"valueFormControl\" placeholder=\"my value\" name=\"value\">\n      <div class=\"expand\" (click)=\"popOut()\" matTooltip=\"Pop-out Editor\">\n        <mat-icon>height</mat-icon>\n      </div>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Int\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"42\" name=\"value\" />\n    </div>\n    <div *ngSwitchCase=\"SettingType.Double\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Boolean\" class=\"toggle\">\n      <label class=\"switch\">\n        <input type=\"checkbox\" [formControl]=\"valueFormControl\" name=\"value\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  </div>\n  <div *ngIf=\"setting.settingType === SettingType.Boolean\" class=\"spacer\"></div>\n\n</div>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.flex .container input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 5px;cursor:pointer;color:#888;display:flex;align-items:center}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.flex .expand mat-icon{transform:rotate(45deg)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"] }]
+            args: [{ selector: 'configcat-value', template: "<div class=\"flex\">\n  <div class=\"container\" [ngSwitch]=\"setting.settingType\">\n    <div *ngSwitchCase=\"SettingType.String\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"text\"\n             [formControl]=\"valueFormControl\" placeholder=\"my value\" name=\"value\">\n      <div class=\"expand\" (click)=\"popOut()\" matTooltip=\"Pop-out Editor\">\n        <mat-icon>height</mat-icon>\n      </div>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Int\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"42\" name=\"value\" digitOnly digitOnlyAllowNegatives=\"true\"/>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Double\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Boolean\" class=\"toggle\">\n      <label class=\"switch\">\n        <input type=\"checkbox\" [formControl]=\"valueFormControl\" name=\"value\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  </div>\n  <div *ngIf=\"setting.settingType === SettingType.Boolean\" class=\"spacer\"></div>\n\n</div>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.flex .container input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 5px;cursor:pointer;color:#888;display:flex;align-items:center}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.flex .expand mat-icon{transform:rotate(45deg)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { valueFormControl: [{
                 type: Input
             }], setting: [{
@@ -697,12 +752,12 @@ class RolloutPercentageItemsComponent {
     getPercentageFormControl(rolloutPercentageItem) {
         return rolloutPercentageItem.controls.percentage;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: { formGroup: "formGroup", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup\">\n\n    <div class=\"if\" *ngIf=\"rolloutRules().controls.length > 0\">\n        <mat-chip-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\n    </div>\n    <div class=\"grow\">\n        <div class=\"percentage-row flex\"\n            *ngFor=\"let rolloutPercentageItem of getRolloutPercentageItemFormGroups(); let i = index\">\n            <div class=\"flex\">\n                <input type=\"number\" [formControl]=\"getPercentageFormControl(rolloutPercentageItem)\"\n                    (input)=\"percentageChanged(i)\">%\n                <span class=\"users\">of <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                        rel=\"noopener noreferrer\">users</a>\n                </span>\n            </div>\n\n            <div class=\"delete-option\" matTooltip=\"Remove this % option\"\n                *ngIf=\"!readOnly && rolloutPercentageItems().controls.length > 2\"\n                (click)=\"removeRolloutPercentageItem(i)\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n\n            <span matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\n                *ngIf=\"(i === rolloutPercentageItems().controls.length -1) && (rolloutPercentageItemsSum().invalid)\">\n                <mat-icon color=\"warn\">\n                    error_outline\n                </mat-icon>\n            </span>\n\n            <div class=\"value flex\">\n                <span class=\"value-name\" *ngIf=\"setting().settingType !== SettingType.Boolean\">Served value:</span>\n                <configcat-value class=\"served-value\" [valueFormControl]=\"value(rolloutPercentageItem)\"\n                    [setting]=\"setting()\">\n                </configcat-value>\n            </div>\n            <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\" *ngIf=\"!readOnly\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".percentage-wrapper{border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;background-color:#67b1fc3d}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}input:focus{outline-color:#e5e5e5;outline-offset:-1px}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "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.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: 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: { formGroup: "formGroup", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup\">\n\n    <div class=\"if\" *ngIf=\"rolloutRules().controls.length > 0\">\n        <mat-chip-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\n    </div>\n    <div class=\"grow\">\n        <div class=\"percentage-row flex\"\n            *ngFor=\"let rolloutPercentageItem of getRolloutPercentageItemFormGroups(); let i = index\">\n            <div class=\"flex\">\n                <input type=\"number\" [formControl]=\"getPercentageFormControl(rolloutPercentageItem)\"\n                    (input)=\"percentageChanged(i)\" digitOnly>%\n                <span class=\"users\">of <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                        rel=\"noopener noreferrer\">users</a>\n                </span>\n            </div>\n\n            <div class=\"delete-option\" matTooltip=\"Remove this % option\"\n                *ngIf=\"!readOnly && rolloutPercentageItems().controls.length > 2\"\n                (click)=\"removeRolloutPercentageItem(i)\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n\n            <span matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\n                *ngIf=\"(i === rolloutPercentageItems().controls.length -1) && (rolloutPercentageItemsSum().invalid)\">\n                <mat-icon color=\"warn\">\n                    error_outline\n                </mat-icon>\n            </span>\n\n            <div class=\"value flex\">\n                <span class=\"value-name\" *ngIf=\"setting().settingType !== SettingType.Boolean\">Served value:</span>\n                <configcat-value class=\"served-value\" [valueFormControl]=\"value(rolloutPercentageItem)\"\n                    [setting]=\"setting()\">\n                </configcat-value>\n            </div>\n            <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\" *ngIf=\"!readOnly\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".percentage-wrapper{border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;background-color:#67b1fc3d}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}input:focus{outline-color:#e5e5e5;outline-offset:-1px}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "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.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: 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-rollout-percentage-items', template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup\">\n\n    <div class=\"if\" *ngIf=\"rolloutRules().controls.length > 0\">\n        <mat-chip-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\n    </div>\n    <div class=\"grow\">\n        <div class=\"percentage-row flex\"\n            *ngFor=\"let rolloutPercentageItem of getRolloutPercentageItemFormGroups(); let i = index\">\n            <div class=\"flex\">\n                <input type=\"number\" [formControl]=\"getPercentageFormControl(rolloutPercentageItem)\"\n                    (input)=\"percentageChanged(i)\">%\n                <span class=\"users\">of <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                        rel=\"noopener noreferrer\">users</a>\n                </span>\n            </div>\n\n            <div class=\"delete-option\" matTooltip=\"Remove this % option\"\n                *ngIf=\"!readOnly && rolloutPercentageItems().controls.length > 2\"\n                (click)=\"removeRolloutPercentageItem(i)\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n\n            <span matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\n                *ngIf=\"(i === rolloutPercentageItems().controls.length -1) && (rolloutPercentageItemsSum().invalid)\">\n                <mat-icon color=\"warn\">\n                    error_outline\n                </mat-icon>\n            </span>\n\n            <div class=\"value flex\">\n                <span class=\"value-name\" *ngIf=\"setting().settingType !== SettingType.Boolean\">Served value:</span>\n                <configcat-value class=\"served-value\" [valueFormControl]=\"value(rolloutPercentageItem)\"\n                    [setting]=\"setting()\">\n                </configcat-value>\n            </div>\n            <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\" *ngIf=\"!readOnly\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".percentage-wrapper{border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;background-color:#67b1fc3d}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}input:focus{outline-color:#e5e5e5;outline-offset:-1px}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"] }]
+            args: [{ selector: 'configcat-rollout-percentage-items', template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup\">\n\n    <div class=\"if\" *ngIf=\"rolloutRules().controls.length > 0\">\n        <mat-chip-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\n    </div>\n    <div class=\"grow\">\n        <div class=\"percentage-row flex\"\n            *ngFor=\"let rolloutPercentageItem of getRolloutPercentageItemFormGroups(); let i = index\">\n            <div class=\"flex\">\n                <input type=\"number\" [formControl]=\"getPercentageFormControl(rolloutPercentageItem)\"\n                    (input)=\"percentageChanged(i)\" digitOnly>%\n                <span class=\"users\">of <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                        rel=\"noopener noreferrer\">users</a>\n                </span>\n            </div>\n\n            <div class=\"delete-option\" matTooltip=\"Remove this % option\"\n                *ngIf=\"!readOnly && rolloutPercentageItems().controls.length > 2\"\n                (click)=\"removeRolloutPercentageItem(i)\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n\n            <span matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\n                *ngIf=\"(i === rolloutPercentageItems().controls.length -1) && (rolloutPercentageItemsSum().invalid)\">\n                <mat-icon color=\"warn\">\n                    error_outline\n                </mat-icon>\n            </span>\n\n            <div class=\"value flex\">\n                <span class=\"value-name\" *ngIf=\"setting().settingType !== SettingType.Boolean\">Served value:</span>\n                <configcat-value class=\"served-value\" [valueFormControl]=\"value(rolloutPercentageItem)\"\n                    [setting]=\"setting()\">\n                </configcat-value>\n            </div>\n            <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\" *ngIf=\"!readOnly\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".percentage-wrapper{border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;background-color:#67b1fc3d}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}input:focus{outline-color:#e5e5e5;outline-offset:-1px}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formGroup: [{
                 type: Input
             }], readOnly: [{
@@ -967,10 +1022,10 @@ class RolloutRulesComponent {
     getRolloutRuleSegmentIdFormControl(rolloutRule) {
         return rolloutRule.controls.segmentId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutRulesComponent, deps: [{ token: i1$1.MatDialog }, { token: SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: { formGroup: "formGroup", readOnly: "readOnly", segments: "segments" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n    <div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"readOnly\"\n        [cdkDropListData]=\"rolloutRules().controls\">\n        <div *ngFor=\"let rolloutRule of rolloutRules().controls; trackBy: trackByIndex; let i = index\" cdkDrag>\n            <div class=\"targeting-row\">\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user's</a>\n                    </div>\n\n                    <select class=\"custom-select attribute-select\" matTooltip=\"Comparison attribute\"\n                        matTooltipPosition=\"above\"\n                        (change)=\"attributeChanged($event.target, getRolloutRuleComparisonAttributeFormControl(rolloutRule))\"\n                        [disabled]=\"readOnly\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === getRolloutRuleComparisonAttributeFormControl(rolloutRule).value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n\n\n                    <span class=\"attribute-span\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\n                        [hidden]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) !== -1\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid\">*</span>\n                        <input\n                            [ngClass]=\"{'invalid': getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid}\"\n                            type=\"text\" matInput [matAutocomplete]=\"auto\"\n                            [formControl]=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule)\" class=\"attribute\"\n                            placeholder=\"e.g. Eye color\">\n                    </span>\n\n                    <mat-autocomplete #auto=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of comparisonAttributes()\" [value]=\"option\">\n                            {{option}}\n                        </mat-option>\n                    </mat-autocomplete>\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select\" [formControl]=\"getRolloutRuleComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Comparator\" matTooltipPosition=\"above\"\n                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(16, 18)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(0, 4)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"SEMANTIC VERSION\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(4, 10)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"NUMBER\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(10, 16)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                        </select>\n                        <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n                            <a href=\"https://configcat.com/docs/advanced/targeting/#comparator\" target=\"_blank\"\n                                rel=\"noopener noreferrer\">\n                                <mat-icon>info</mat-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <div class=\"comparison-value\">\n                        <span class=\"error\"\n                            *ngIf=\"getRolloutRuleComparisonValueFormControl(rolloutRule).invalid\">*</span>\n\n                        <input [ngClass]=\"{'invalid': getRolloutRuleComparisonValueFormControl(rolloutRule).invalid}\"\n                            [formControl]=\"getRolloutRuleComparisonValueFormControl(rolloutRule)\"\n                            [type]=\"getComparisonValueType(rolloutRule)\" [placeholder]=\"getPlaceHolder(rolloutRule)\"\n                            matTooltip=\"Comparison value\" matTooltipPosition=\"above\" inputDisplayNormalizer>\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" matTooltipPosition=\"above\"\n                            (click)=\"popOut(rolloutRule)\" *ngIf=\"getComparisonValueType(rolloutRule)==='text'\">\n                            <mat-icon>height</mat-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\n                    </div>\n\n                    <configcat-value class=\"served-value\"\n                        [valueFormControl]=\"getRolloutRuleValueFormControl(rolloutRule)\" [setting]=\"setting()\">\n                    </configcat-value>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid #d5d5d5;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.custom-select:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "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: 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.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: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RolloutRulesComponent, deps: [{ token: i1$1.MatDialog }, { token: SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: { formGroup: "formGroup", readOnly: "readOnly", segments: "segments" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n    <div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"readOnly\"\n        [cdkDropListData]=\"rolloutRules().controls\">\n        <div *ngFor=\"let rolloutRule of rolloutRules().controls; trackBy: trackByIndex; let i = index\" cdkDrag>\n            <div class=\"targeting-row\">\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user's</a>\n                    </div>\n\n                    <select class=\"custom-select attribute-select\" matTooltip=\"Comparison attribute\"\n                        matTooltipPosition=\"above\"\n                        (change)=\"attributeChanged($event.target, getRolloutRuleComparisonAttributeFormControl(rolloutRule))\"\n                        [disabled]=\"readOnly\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === getRolloutRuleComparisonAttributeFormControl(rolloutRule).value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n\n\n                    <span class=\"attribute-span\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\n                        [hidden]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) !== -1\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid\">*</span>\n                        <input\n                            [ngClass]=\"{'invalid': getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid}\"\n                            type=\"text\" matInput [matAutocomplete]=\"auto\"\n                            [formControl]=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule)\" class=\"attribute\"\n                            placeholder=\"e.g. Eye color\">\n                    </span>\n\n                    <mat-autocomplete #auto=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of comparisonAttributes()\" [value]=\"option\">\n                            {{option}}\n                        </mat-option>\n                    </mat-autocomplete>\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select\" [formControl]=\"getRolloutRuleComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Comparator\" matTooltipPosition=\"above\"\n                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(16, 18)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(0, 4)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"SEMANTIC VERSION\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(4, 10)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"NUMBER\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(10, 16)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                        </select>\n                        <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n                            <a href=\"https://configcat.com/docs/advanced/targeting/#comparator\" target=\"_blank\"\n                                rel=\"noopener noreferrer\">\n                                <mat-icon>info</mat-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <div class=\"comparison-value\">\n                        <span class=\"error\"\n                            *ngIf=\"getRolloutRuleComparisonValueFormControl(rolloutRule).invalid\">*</span>\n\n                        <input [ngClass]=\"{'invalid': getRolloutRuleComparisonValueFormControl(rolloutRule).invalid}\"\n                            [formControl]=\"getRolloutRuleComparisonValueFormControl(rolloutRule)\"\n                            [type]=\"getComparisonValueType(rolloutRule)\" [placeholder]=\"getPlaceHolder(rolloutRule)\"\n                            matTooltip=\"Comparison value\" matTooltipPosition=\"above\" inputDisplayNormalizer>\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" matTooltipPosition=\"above\"\n                            (click)=\"popOut(rolloutRule)\" *ngIf=\"getComparisonValueType(rolloutRule)==='text'\">\n                            <mat-icon>height</mat-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\n                    </div>\n\n                    <configcat-value class=\"served-value\"\n                        [valueFormControl]=\"getRolloutRuleValueFormControl(rolloutRule)\" [setting]=\"setting()\">\n                    </configcat-value>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid #d5d5d5;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.custom-select:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "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: 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.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: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutRulesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RolloutRulesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-rollout-rules', template: "<div [formGroup]=\"formGroup\">\n    <div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"readOnly\"\n        [cdkDropListData]=\"rolloutRules().controls\">\n        <div *ngFor=\"let rolloutRule of rolloutRules().controls; trackBy: trackByIndex; let i = index\" cdkDrag>\n            <div class=\"targeting-row\">\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user's</a>\n                    </div>\n\n                    <select class=\"custom-select attribute-select\" matTooltip=\"Comparison attribute\"\n                        matTooltipPosition=\"above\"\n                        (change)=\"attributeChanged($event.target, getRolloutRuleComparisonAttributeFormControl(rolloutRule))\"\n                        [disabled]=\"readOnly\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === getRolloutRuleComparisonAttributeFormControl(rolloutRule).value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n\n\n                    <span class=\"attribute-span\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\n                        [hidden]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) !== -1\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid\">*</span>\n                        <input\n                            [ngClass]=\"{'invalid': getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid}\"\n                            type=\"text\" matInput [matAutocomplete]=\"auto\"\n                            [formControl]=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule)\" class=\"attribute\"\n                            placeholder=\"e.g. Eye color\">\n                    </span>\n\n                    <mat-autocomplete #auto=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of comparisonAttributes()\" [value]=\"option\">\n                            {{option}}\n                        </mat-option>\n                    </mat-autocomplete>\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select\" [formControl]=\"getRolloutRuleComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Comparator\" matTooltipPosition=\"above\"\n                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(16, 18)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(0, 4)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"SEMANTIC VERSION\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(4, 10)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"NUMBER\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(10, 16)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                        </select>\n                        <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\">\n                            <a href=\"https://configcat.com/docs/advanced/targeting/#comparator\" target=\"_blank\"\n                                rel=\"noopener noreferrer\">\n                                <mat-icon>info</mat-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <div class=\"comparison-value\">\n                        <span class=\"error\"\n                            *ngIf=\"getRolloutRuleComparisonValueFormControl(rolloutRule).invalid\">*</span>\n\n                        <input [ngClass]=\"{'invalid': getRolloutRuleComparisonValueFormControl(rolloutRule).invalid}\"\n                            [formControl]=\"getRolloutRuleComparisonValueFormControl(rolloutRule)\"\n                            [type]=\"getComparisonValueType(rolloutRule)\" [placeholder]=\"getPlaceHolder(rolloutRule)\"\n                            matTooltip=\"Comparison value\" matTooltipPosition=\"above\" inputDisplayNormalizer>\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" matTooltipPosition=\"above\"\n                            (click)=\"popOut(rolloutRule)\" *ngIf=\"getComparisonValueType(rolloutRule)==='text'\">\n                            <mat-icon>height</mat-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\n                    </div>\n\n                    <configcat-value class=\"served-value\"\n                        [valueFormControl]=\"getRolloutRuleValueFormControl(rolloutRule)\" [setting]=\"setting()\">\n                    </configcat-value>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid #d5d5d5;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.custom-select:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SettingListFormHelper }], propDecorators: { formGroup: [{
@@ -1075,10 +1130,10 @@ class SettingComponent {
     getDashboardUrl() {
         return this.dashboardBasePath + '/' + this.productId + '/' + this.configId + '/' + this.environmentId + '?settingId=' + this.setting().settingId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingComponent, deps: [{ token: SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SettingComponent, selector: "setting", inputs: { dashboardBasePath: "dashboardBasePath", productId: "productId", environmentId: "environmentId", configId: "configId", formGroup: "formGroup", readOnly: "readOnly", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName", segments: "segments" }, outputs: { deleteSettingRequested: "deleteSettingRequested" }, ngImport: i0, template: "<div class=\"setting-full\" [formGroup]=\"formGroup\">\n  <div class=\"delete\" (click)=\"deleteSetting()\" *ngIf=\"canDeleteSetting\" [matTooltip]=\"deleteSettingText\"\n    data-robot=\"deleteSetting\">\n    <mat-icon>cancel</mat-icon>\n  </div>\n  <div class=\"setting-header\">\n    <div class=\"setting-name\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"setting-content\">\n    <div class=\"setting-details\">\n      <div class=\"setting-key\"><code data-robot=\"settingKey\">{{setting().key}}</code></div>\n      <span *ngIf=\"setting().hint\" class=\"description\">{{setting().hint}}</span>\n      <div class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\" [readOnly]=\"readOnly\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\" [formGroup]=\"formGroup\"\n        [readOnly]=\"readOnly\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <configcat-value class=\"served-value\" [valueFormControl]=\"value()\" [setting]=\"setting()\">\n        </configcat-value>\n      </div>\n      <div class=\"buttons\">\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target specific users' : 'Add new targeting rule'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutPercentageItem()\"\n          *ngIf=\"!readOnly\"\n          [disabled]=\"setting().settingType === SettingType.Boolean && rolloutPercentageItems().length !== 0\">\n          {{rolloutPercentageItems().length === 0 ? 'Target % of users' : 'Add new % option'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;max-width:100%}.setting-full .setting-header .setting-name .edit{margin:5px 0 0 5px;cursor:pointer;visibility:hidden;color:gray}.setting-full .setting-header .setting-name .edit:hover{visibility:visible}.setting-full .setting-header .setting-name .edit mat-icon{font-size:18px}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:.7em;color:gray}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word}.setting-full .setting-content .setting-details .description{font-size:.8em;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .setting-details code{background-color:#d3d3d3;padding:3px 6px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:.7em;margin-left:auto;margin-right:22px;color:gray}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.sige-button{background-color:#d9eadc;color:#363636;cursor:pointer;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;font-size:.75rem;border:1px solid #dbdbdb;box-shadow:none;display:inline-flex;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.sige-button:hover{background-color:#bad0be}.sige-button:disabled{background-color:#fff;color:#b3b3b3}@media (max-width: 1200px){.setting-details{width:300px!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { kind: "component", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly", "segments"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingComponent, deps: [{ token: SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SettingComponent, selector: "setting", inputs: { dashboardBasePath: "dashboardBasePath", productId: "productId", environmentId: "environmentId", configId: "configId", formGroup: "formGroup", readOnly: "readOnly", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName", segments: "segments" }, outputs: { deleteSettingRequested: "deleteSettingRequested" }, ngImport: i0, template: "<div class=\"setting-full\" [formGroup]=\"formGroup\">\n  <div class=\"delete\" (click)=\"deleteSetting()\" *ngIf=\"canDeleteSetting\" [matTooltip]=\"deleteSettingText\"\n    data-robot=\"deleteSetting\">\n    <mat-icon>cancel</mat-icon>\n  </div>\n  <div class=\"setting-header\">\n    <div class=\"setting-name\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"setting-content\">\n    <div class=\"setting-details\">\n      <div class=\"setting-key\"><code data-robot=\"settingKey\">{{setting().key}}</code></div>\n      <span *ngIf=\"setting().hint\" class=\"description\">{{setting().hint}}</span>\n      <div class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\" [readOnly]=\"readOnly\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\" [formGroup]=\"formGroup\"\n        [readOnly]=\"readOnly\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <configcat-value class=\"served-value\" [valueFormControl]=\"value()\" [setting]=\"setting()\">\n        </configcat-value>\n      </div>\n      <div class=\"buttons\">\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target specific users' : 'Add new targeting rule'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutPercentageItem()\"\n          *ngIf=\"!readOnly\"\n          [disabled]=\"setting().settingType === SettingType.Boolean && rolloutPercentageItems().length !== 0\">\n          {{rolloutPercentageItems().length === 0 ? 'Target % of users' : 'Add new % option'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;max-width:100%}.setting-full .setting-header .setting-name .edit{margin:5px 0 0 5px;cursor:pointer;visibility:hidden;color:gray}.setting-full .setting-header .setting-name .edit:hover{visibility:visible}.setting-full .setting-header .setting-name .edit mat-icon{font-size:18px}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:.7em;color:gray}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word}.setting-full .setting-content .setting-details .description{font-size:.8em;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .setting-details code{background-color:#d3d3d3;padding:3px 6px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:.7em;margin-left:auto;margin-right:22px;color:gray}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.sige-button{background-color:#d9eadc;color:#363636;cursor:pointer;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;font-size:.75rem;border:1px solid #dbdbdb;box-shadow:none;display:inline-flex;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.sige-button:hover{background-color:#bad0be}.sige-button:disabled{background-color:#fff;color:#b3b3b3}@media (max-width: 1200px){.setting-details{width:300px!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { kind: "component", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly", "segments"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'setting', template: "<div class=\"setting-full\" [formGroup]=\"formGroup\">\n  <div class=\"delete\" (click)=\"deleteSetting()\" *ngIf=\"canDeleteSetting\" [matTooltip]=\"deleteSettingText\"\n    data-robot=\"deleteSetting\">\n    <mat-icon>cancel</mat-icon>\n  </div>\n  <div class=\"setting-header\">\n    <div class=\"setting-name\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"setting-content\">\n    <div class=\"setting-details\">\n      <div class=\"setting-key\"><code data-robot=\"settingKey\">{{setting().key}}</code></div>\n      <span *ngIf=\"setting().hint\" class=\"description\">{{setting().hint}}</span>\n      <div class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\" [readOnly]=\"readOnly\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\" [formGroup]=\"formGroup\"\n        [readOnly]=\"readOnly\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <configcat-value class=\"served-value\" [valueFormControl]=\"value()\" [setting]=\"setting()\">\n        </configcat-value>\n      </div>\n      <div class=\"buttons\">\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target specific users' : 'Add new targeting rule'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutPercentageItem()\"\n          *ngIf=\"!readOnly\"\n          [disabled]=\"setting().settingType === SettingType.Boolean && rolloutPercentageItems().length !== 0\">\n          {{rolloutPercentageItems().length === 0 ? 'Target % of users' : 'Add new % option'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:700;word-wrap:break-word;max-width:100%}.setting-full .setting-header .setting-name .edit{margin:5px 0 0 5px;cursor:pointer;visibility:hidden;color:gray}.setting-full .setting-header .setting-name .edit:hover{visibility:visible}.setting-full .setting-header .setting-name .edit mat-icon{font-size:18px}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:.7em;color:gray}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word}.setting-full .setting-content .setting-details .description{font-size:.8em;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .setting-details code{background-color:#d3d3d3;padding:3px 6px}.setting-full .setting-content .rules-list{width:100%;padding:0 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:.7em;margin-left:auto;margin-right:22px;color:gray}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.sige-button{background-color:#d9eadc;color:#363636;cursor:pointer;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;font-size:.75rem;border:1px solid #dbdbdb;box-shadow:none;display:inline-flex;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.sige-button:hover{background-color:#bad0be}.sige-button:disabled{background-color:#fff;color:#b3b3b3}@media (max-width: 1200px){.setting-details{width:300px!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"] }]
         }], ctorParameters: () => [{ type: SettingListFormHelper }], propDecorators: { dashboardBasePath: [{
@@ -1252,10 +1307,10 @@ class SettingListComponent {
             config: this.settingValues.config
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListComponent, deps: [{ token: SettingListFormHelper }, { token: i2$1.MatSnackBar }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SettingListComponent, selector: "configcat-setting-list", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", dashboardBasePath: "dashboardBasePath", canDeleteSetting: "canDeleteSetting", onSave: "onSave", loadSettingValues: "loadSettingValues", loadSegments: "loadSegments", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { loadSucceeded: "loadSucceeded", deleteSettingRequested: "deleteSettingRequested", formValuesChanged: "formValuesChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canDeleteSetting]=\"canDeleteSetting\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\" [segments]=\"segments\" [productId]=\"productId\" [configId]=\"configId\"\n      [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3}.save>*{margin-right:.6em;margin-top:.3em;margin-bottom:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SettingComponent, selector: "setting", inputs: ["dashboardBasePath", "productId", "environmentId", "configId", "formGroup", "readOnly", "canDeleteSetting", "deleteSettingText", "showEnvironmentName", "segments"], outputs: ["deleteSettingRequested"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListComponent, deps: [{ token: SettingListFormHelper }, { token: i2$1.MatSnackBar }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SettingListComponent, selector: "configcat-setting-list", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", dashboardBasePath: "dashboardBasePath", canDeleteSetting: "canDeleteSetting", onSave: "onSave", loadSettingValues: "loadSettingValues", loadSegments: "loadSegments", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { loadSucceeded: "loadSucceeded", deleteSettingRequested: "deleteSettingRequested", formValuesChanged: "formValuesChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canDeleteSetting]=\"canDeleteSetting\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\" [segments]=\"segments\" [productId]=\"productId\" [configId]=\"configId\"\n      [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3}.save>*{margin-right:.6em;margin-top:.3em;margin-bottom:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SettingComponent, selector: "setting", inputs: ["dashboardBasePath", "productId", "environmentId", "configId", "formGroup", "readOnly", "canDeleteSetting", "deleteSettingText", "showEnvironmentName", "segments"], outputs: ["deleteSettingRequested"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-setting-list', template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canDeleteSetting]=\"canDeleteSetting\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\" [segments]=\"segments\" [productId]=\"productId\" [configId]=\"configId\"\n      [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3}.save>*{margin-right:.6em;margin-top:.3em;margin-bottom:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\n"] }]
         }], ctorParameters: () => [{ type: SettingListFormHelper }, { type: i2$1.MatSnackBar }, { type: i1$1.MatDialog }], propDecorators: { productId: [{
@@ -1361,10 +1416,10 @@ class SettingItemComponent extends BaseComponent {
     onFormValuesChanged() {
         this.formValuesChanged.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingItemComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SettingItemComponent, selector: "configcat-setting-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", evaluationVersion: "evaluationVersion", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<configcat-setting-list [canDeleteSetting]=\"canDeleteSetting\" [onSave]=\"handleSave\"\n    [loadSettingValues]=\"loadSettingValues\" [loadSegments]=\"loadSegments\" (loadSucceeded)=\"itemLoadSucceeded()\"\n    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n    [showEnvironmentName]=\"showEnvironmentName\" (formValuesChanged)=\"onFormValuesChanged()\" [productId]=\"productId\"\n    [configId]=\"configId\" [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n</configcat-setting-list>", styles: [".container{font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.container .setting-full{position:relative;display:flex;flex-wrap:nowrap}.container .setting-full .setting-details{display:flex;flex-direction:column;width:400px;padding:1em 0 1em 1em}.container .setting-full .setting-details>*{margin:.5em}.container .setting-full .setting-details .setting-name{flex-direction:row}.container .setting-full .setting-details .setting-name .name{font-weight:700;word-wrap:break-word;max-width:100%}.container .setting-full .setting-details .setting-key{word-wrap:break-word}.container .setting-full .setting-details .description{font-size:.8em}.container .setting-full .setting-details code{background-color:#d3d3d3;padding:3px 6px}.container .setting-full .rules-list{width:100%;padding:1em}.container .setting-full .targeting-button{margin-left:1rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media (max-width: 1200px){.setting-full .setting-details{width:300px}}@media (max-width: 700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "configcat-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingItemComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SettingItemComponent, selector: "configcat-setting-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", evaluationVersion: "evaluationVersion", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<configcat-setting-list [canDeleteSetting]=\"canDeleteSetting\" [onSave]=\"handleSave\"\n    [loadSettingValues]=\"loadSettingValues\" [loadSegments]=\"loadSegments\" (loadSucceeded)=\"itemLoadSucceeded()\"\n    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n    [showEnvironmentName]=\"showEnvironmentName\" (formValuesChanged)=\"onFormValuesChanged()\" [productId]=\"productId\"\n    [configId]=\"configId\" [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n</configcat-setting-list>", styles: [".container{font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.container .setting-full{position:relative;display:flex;flex-wrap:nowrap}.container .setting-full .setting-details{display:flex;flex-direction:column;width:400px;padding:1em 0 1em 1em}.container .setting-full .setting-details>*{margin:.5em}.container .setting-full .setting-details .setting-name{flex-direction:row}.container .setting-full .setting-details .setting-name .name{font-weight:700;word-wrap:break-word;max-width:100%}.container .setting-full .setting-details .setting-key{word-wrap:break-word}.container .setting-full .setting-details .description{font-size:.8em}.container .setting-full .setting-details code{background-color:#d3d3d3;padding:3px 6px}.container .setting-full .rules-list{width:100%;padding:1em}.container .setting-full .targeting-button{margin-left:1rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media (max-width: 1200px){.setting-full .setting-details{width:300px}}@media (max-width: 700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "configcat-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-setting-item', template: "<configcat-setting-list [canDeleteSetting]=\"canDeleteSetting\" [onSave]=\"handleSave\"\n    [loadSettingValues]=\"loadSettingValues\" [loadSegments]=\"loadSegments\" (loadSucceeded)=\"itemLoadSucceeded()\"\n    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n    [showEnvironmentName]=\"showEnvironmentName\" (formValuesChanged)=\"onFormValuesChanged()\" [productId]=\"productId\"\n    [configId]=\"configId\" [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n</configcat-setting-list>", styles: [".container{font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.container .setting-full{position:relative;display:flex;flex-wrap:nowrap}.container .setting-full .setting-details{display:flex;flex-direction:column;width:400px;padding:1em 0 1em 1em}.container .setting-full .setting-details>*{margin:.5em}.container .setting-full .setting-details .setting-name{flex-direction:row}.container .setting-full .setting-details .setting-name .name{font-weight:700;word-wrap:break-word;max-width:100%}.container .setting-full .setting-details .setting-key{word-wrap:break-word}.container .setting-full .setting-details .description{font-size:.8em}.container .setting-full .setting-details code{background-color:#d3d3d3;padding:3px 6px}.container .setting-full .rules-list{width:100%;padding:1em}.container .setting-full .targeting-button{margin-left:1rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media (max-width: 1200px){.setting-full .setting-details{width:300px}}@media (max-width: 700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"] }]
         }], ctorParameters: () => [{ type: PublicApiService }], propDecorators: { productId: [{
@@ -1406,10 +1461,10 @@ class BaseSelectComponent extends BaseComponent {
     openChanged(event) {
         this.dropdownOpened.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: BaseSelectComponent, selector: "base-select", inputs: { customDropdown: "customDropdown" }, outputs: { dropdownOpened: "dropdownOpened" }, usesInheritance: true, ngImport: i0, template: '<div></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BaseSelectComponent, selector: "base-select", inputs: { customDropdown: "customDropdown" }, outputs: { dropdownOpened: "dropdownOpened" }, usesInheritance: true, ngImport: i0, template: '<div></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: BaseSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BaseSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'base-select',
@@ -1446,10 +1501,10 @@ class SettingSelectComponent extends BaseSelectComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SettingSelectComponent, selector: "configcat-setting-select", inputs: { valueFormControl: "valueFormControl", configId: "configId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\" matTooltip=\"{{setting.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\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.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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SettingSelectComponent, selector: "configcat-setting-select", inputs: { valueFormControl: "valueFormControl", configId: "configId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\" matTooltip=\"{{setting.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\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.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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-setting-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\" matTooltip=\"{{setting.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: PublicApiService }], propDecorators: { valueFormControl: [{
@@ -1478,10 +1533,10 @@ class ProductSelectComponent extends BaseSelectComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ProductSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ProductSelectComponent, selector: "configcat-product-select", inputs: { valueFormControl: "valueFormControl" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\" matTooltip=\"{{product.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ProductSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ProductSelectComponent, selector: "configcat-product-select", inputs: { valueFormControl: "valueFormControl" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\" matTooltip=\"{{product.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ProductSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ProductSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-product-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\" matTooltip=\"{{product.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: PublicApiService }], propDecorators: { valueFormControl: [{
@@ -1513,8 +1568,8 @@ class ConfigSelectComponent extends BaseSelectComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConfigSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ConfigSelectComponent, selector: "configcat-config-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConfigSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ConfigSelectComponent, selector: "configcat-config-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ConfigSelectComponent),
@@ -1522,7 +1577,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
             }
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"configs\">\n    <mat-label>Config</mat-label>\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" name=\"value\" disableOptionCentering\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let config of configs\" [value]=\"config.configId\" matTooltip=\"{{config.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{config.name}}</mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\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.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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConfigSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConfigSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-config-select', providers: [
                         {
@@ -1562,10 +1617,10 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EnvironmentSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EnvironmentSelectComponent, selector: "configcat-environment-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\"\n            matTooltip=\"{{environment.name}}\" [matTooltipShowDelay]=\"1000\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\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.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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: EnvironmentSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: EnvironmentSelectComponent, selector: "configcat-environment-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\"\n            matTooltip=\"{{environment.name}}\" [matTooltipShowDelay]=\"1000\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\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.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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-environment-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\"\n            matTooltip=\"{{environment.name}}\" [matTooltipShowDelay]=\"1000\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: PublicApiService }], propDecorators: { valueFormControl: [{
@@ -1610,10 +1665,10 @@ class AuthorizationComponent {
     getPublicApiUrl() {
         return this.publicApiService.getDashboardBasePath() + '/my-account/public-api-credentials';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AuthorizationComponent, deps: [{ token: i3.UntypedFormBuilder }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AuthorizationComponent, selector: "configcat-authorization", inputs: { basePath: "basePath", integrationName: "integrationName" }, outputs: { authorized: "authorized", error: "error" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"container\">\n        <div class=\"form\">\n            <p>\n                In order to use {{integrationName}} you have to authorize first with your ConfigCat Public API\n                credentials.\n            </p>\n            <ul>\n                <li>\n                    <a [href]=\"getPublicApiUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        Get your Basic Auth user name and password</a> to access ConfigCat Public API.\n                    <br />\n                    <b>Note!</b> Your ConfigCat account's email address and password will not work here.\n                </li>\n                <li>\n                    Type your credentials here and click the Authorize button.\n                </li>\n            </ul>\n\n            <mat-form-field class=\"form-field\" appearance=\"outline\">\n                <mat-label>Basic auth user name</mat-label>\n                <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthUsername.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername)}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"form-field\" appearance=\"outline\">\n                <mat-label>Basic auth password</mat-label>\n                <input matInput placeholder=\"Basic auth password\" formControlName=\"basicAuthPassword\" type=\"password\"\n                    autocomplete=\"current-password\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthPassword.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword)}}\n                </mat-error>\n            </mat-form-field>\n            <div>\n                <button mat-flat-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n                <mat-error *ngIf=\"formGroup.invalid && formGroup.errors && formGroup.errors.invalidAuthorization\">\n                    {{formGroup.errors.invalidAuthorization}}</mat-error>\n            </div>\n        </div>\n    </div>\n</form>", styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AuthorizationComponent, deps: [{ token: i3.UntypedFormBuilder }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: AuthorizationComponent, selector: "configcat-authorization", inputs: { basePath: "basePath", integrationName: "integrationName" }, outputs: { authorized: "authorized", error: "error" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"container\">\n        <div class=\"form\">\n            <p>\n                In order to use {{integrationName}} you have to authorize first with your ConfigCat Public API\n                credentials.\n            </p>\n            <ul>\n                <li>\n                    <a [href]=\"getPublicApiUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        Get your Basic Auth user name and password</a> to access ConfigCat Public API.\n                    <br />\n                    <b>Note!</b> Your ConfigCat account's email address and password will not work here.\n                </li>\n                <li>\n                    Type your credentials here and click the Authorize button.\n                </li>\n            </ul>\n\n            <mat-form-field class=\"form-field\" appearance=\"outline\">\n                <mat-label>Basic auth user name</mat-label>\n                <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthUsername.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername)}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"form-field\" appearance=\"outline\">\n                <mat-label>Basic auth password</mat-label>\n                <input matInput placeholder=\"Basic auth password\" formControlName=\"basicAuthPassword\" type=\"password\"\n                    autocomplete=\"current-password\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthPassword.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword)}}\n                </mat-error>\n            </mat-form-field>\n            <div>\n                <button mat-flat-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n                <mat-error *ngIf=\"formGroup.invalid && formGroup.errors && formGroup.errors.invalidAuthorization\">\n                    {{formGroup.errors.invalidAuthorization}}</mat-error>\n            </div>\n        </div>\n    </div>\n</form>", styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AuthorizationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AuthorizationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-authorization', template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"container\">\n        <div class=\"form\">\n            <p>\n                In order to use {{integrationName}} you have to authorize first with your ConfigCat Public API\n                credentials.\n            </p>\n            <ul>\n                <li>\n                    <a [href]=\"getPublicApiUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        Get your Basic Auth user name and password</a> to access ConfigCat Public API.\n                    <br />\n                    <b>Note!</b> Your ConfigCat account's email address and password will not work here.\n                </li>\n                <li>\n                    Type your credentials here and click the Authorize button.\n                </li>\n            </ul>\n\n            <mat-form-field class=\"form-field\" appearance=\"outline\">\n                <mat-label>Basic auth user name</mat-label>\n                <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthUsername.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername)}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"form-field\" appearance=\"outline\">\n                <mat-label>Basic auth password</mat-label>\n                <input matInput placeholder=\"Basic auth password\" formControlName=\"basicAuthPassword\" type=\"password\"\n                    autocomplete=\"current-password\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthPassword.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword)}}\n                </mat-error>\n            </mat-form-field>\n            <div>\n                <button mat-flat-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n                <mat-error *ngIf=\"formGroup.invalid && formGroup.errors && formGroup.errors.invalidAuthorization\">\n                    {{formGroup.errors.invalidAuthorization}}</mat-error>\n            </div>\n        </div>\n    </div>\n</form>", styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"] }]
         }], ctorParameters: () => [{ type: i3.UntypedFormBuilder }, { type: PublicApiService }], propDecorators: { basePath: [{
@@ -1637,10 +1692,10 @@ class DeleteSettingDialogComponent {
     cancel() {
         this.dialogRef.close({ button: 'cancel' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DeleteSettingDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DeleteSettingDialogComponent, selector: "app-delete-setting-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{data.system}}</h1>\n<div mat-dialog-actions class=\"container\">\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"remove()\">Remove from {{data.ticketType}}</button>\n    <button type=\"button\" mat-raised-button (click)=\"cancel()\">Cancel</button>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DeleteSettingDialogComponent, 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: DeleteSettingDialogComponent, selector: "app-delete-setting-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{data.system}}</h1>\n<div mat-dialog-actions class=\"container\">\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"remove()\">Remove from {{data.ticketType}}</button>\n    <button type=\"button\" mat-raised-button (click)=\"cancel()\">Cancel</button>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DeleteSettingDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DeleteSettingDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-delete-setting-dialog', template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{data.system}}</h1>\n<div mat-dialog-actions class=\"container\">\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"remove()\">Remove from {{data.ticketType}}</button>\n    <button type=\"button\" mat-raised-button (click)=\"cancel()\">Cancel</button>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
@@ -2094,10 +2149,10 @@ class FormGenerator {
         listValueFormArray.markAsTouched();
         listValueFormArray.markAsDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FormGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FormGenerator }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FormGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FormGenerator }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FormGenerator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FormGenerator, decorators: [{
             type: Injectable
         }] });
 
@@ -2164,10 +2219,10 @@ class AppDateAdapter extends NativeDateAdapter {
         }
         return DateHelper.formatDate(date, 'yyyy. MM. dd');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AppDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AppDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AppDateAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -2182,10 +2237,10 @@ class ConfirmationDialogComponent {
     cancel() {
         this.dialogRef.close('cancel');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n    [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n    data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConfirmationDialogComponent, 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: ConfirmationDialogComponent, selector: "app-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n    [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n    data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-confirmation-dialog', template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n    [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n    data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
@@ -2193,6 +2248,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
+class RerouteDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    yes() {
+        this.dialogRef.close('yes');
+    }
+    cancel() {
+        this.dialogRef.close('cancel');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RerouteDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RerouteDialogComponent, selector: "app-reroute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <a href=\"{{data.yesButtonLink}}\" class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n      data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  </a>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", styles: [".hidden-link:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RerouteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-reroute-dialog', template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <a href=\"{{data.yesButtonLink}}\" class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n      data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  </a>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", styles: [".hidden-link:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class InfoDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
@@ -2205,10 +2282,10 @@ class InfoDialogComponent {
         this.data.secondaryButtonAction();
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: InfoDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: InfoDialogComponent, selector: "app-info-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">Ok</button>\n  <button type=\"button\" mat-stroked-button *ngIf=\"data.secondaryButtonLabel\" (click)=\"secondaryButtonAction()\">{{data.secondaryButtonLabel}}</button>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: InfoDialogComponent, 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: InfoDialogComponent, selector: "app-info-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">Ok</button>\n  <button type=\"button\" mat-stroked-button *ngIf=\"data.secondaryButtonLabel\" (click)=\"secondaryButtonAction()\">{{data.secondaryButtonLabel}}</button>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: InfoDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: InfoDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-info-dialog', template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">Ok</button>\n  <button type=\"button\" mat-stroked-button *ngIf=\"data.secondaryButtonLabel\" (click)=\"secondaryButtonAction()\">{{data.secondaryButtonLabel}}</button>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
@@ -2278,10 +2355,10 @@ class ComparisonValueListHelper {
         }
         return { comparisonValueList: parseResult.data.flat().map(p => ({ value: p })).filter(v => !!v.value) };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ComparisonValueListHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ComparisonValueListHelper }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ComparisonValueListHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ComparisonValueListHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ComparisonValueListHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ComparisonValueListHelper, decorators: [{
             type: Injectable
         }] });
 
@@ -2301,10 +2378,10 @@ class MessagingService {
     dismissCurrentSnack() {
         this.snackBar.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MessagingService, deps: [{ token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MessagingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MessagingService, deps: [{ token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MessagingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MessagingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MessagingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2$1.MatSnackBar }] });
 
@@ -2408,8 +2485,8 @@ class AceEditorComponent {
     registerOnTouched() {
         /* unused */
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AceEditorComponent, selector: "app-ace-editor", inputs: { value: "value", readOnly: "readOnly" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: AceEditorComponent, selector: "app-ace-editor", inputs: { value: "value", readOnly: "readOnly" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AceEditorComponent),
@@ -2417,7 +2494,7 @@ class AceEditorComponent {
             }
         ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["aceEditor"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ace-editor-container\" #aceEditor></div>", styles: [".ace-editor-container{width:100%;height:100%;border:thin solid #83b2ff;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AceEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: AceEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ace-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2486,10 +2563,10 @@ class PopoutTextEditorDialogComponent {
     close() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PopoutTextEditorDialogComponent, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n    <p class=\"description\">\n        {{data.description}}\n    </p>\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n        <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <mat-form-field *ngIf=\"format === 'text'\" appearance=\"outline\" class=\"editor-container editor-clear\"\n        subscriptSizing=\"dynamic\">\n        <textarea matInput autofocus focus [formControl]=\"control\" rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n            cdkAutosizeMaxRows=\"26\"></textarea>\n        <mat-error *ngIf=\"control.invalid\">\n            {{formHelper.getErrorMessage(control)}}\n        </mat-error>\n        <mat-hint *ngIf=\"data.maxValueLength && (data.maxValueLength - control.value?.length > -1)\">\n            Remaining characters:\n            {{data.maxValueLength - control.value?.length}}</mat-hint>\n    </mat-form-field>\n\n    <div class=\"editor-container\" *ngIf=\"format === 'json'\">\n        <app-ace-editor [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\"\n            [readOnly]=\"data.readOnly\"></app-ace-editor>\n        <span *ngIf=\"control.invalid\" class=\"error mat-mdc-form-field-error\">\n            {{formHelper.getErrorMessage(control)}}</span>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\"\n        [disabled]=\"!control.touched || !control.valid\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: 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.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.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: i7$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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"], 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: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PopoutTextEditorDialogComponent, 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: PopoutTextEditorDialogComponent, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n    <p class=\"description\">\n        {{data.description}}\n    </p>\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n        <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <mat-form-field *ngIf=\"format === 'text'\" appearance=\"outline\" class=\"editor-container editor-clear\"\n        subscriptSizing=\"dynamic\">\n        <textarea matInput autofocus focus [formControl]=\"control\" rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n            cdkAutosizeMaxRows=\"26\"></textarea>\n        <mat-error *ngIf=\"control.invalid\">\n            {{formHelper.getErrorMessage(control)}}\n        </mat-error>\n        <mat-hint *ngIf=\"data.maxValueLength && (data.maxValueLength - control.value?.length > -1)\">\n            Remaining characters:\n            {{data.maxValueLength - control.value?.length}}</mat-hint>\n    </mat-form-field>\n\n    <div class=\"editor-container\" *ngIf=\"format === 'json'\">\n        <app-ace-editor [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\"\n            [readOnly]=\"data.readOnly\"></app-ace-editor>\n        <span *ngIf=\"control.invalid\" class=\"error mat-mdc-form-field-error\">\n            {{formHelper.getErrorMessage(control)}}</span>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\"\n        [disabled]=\"!control.touched || !control.valid\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: 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.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.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: i7$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-popout-text-editor-dialog', template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n    <p class=\"description\">\n        {{data.description}}\n    </p>\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n        <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <mat-form-field *ngIf=\"format === 'text'\" appearance=\"outline\" class=\"editor-container editor-clear\"\n        subscriptSizing=\"dynamic\">\n        <textarea matInput autofocus focus [formControl]=\"control\" rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n            cdkAutosizeMaxRows=\"26\"></textarea>\n        <mat-error *ngIf=\"control.invalid\">\n            {{formHelper.getErrorMessage(control)}}\n        </mat-error>\n        <mat-hint *ngIf=\"data.maxValueLength && (data.maxValueLength - control.value?.length > -1)\">\n            Remaining characters:\n            {{data.maxValueLength - control.value?.length}}</mat-hint>\n    </mat-form-field>\n\n    <div class=\"editor-container\" *ngIf=\"format === 'json'\">\n        <app-ace-editor [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\"\n            [readOnly]=\"data.readOnly\"></app-ace-editor>\n        <span *ngIf=\"control.invalid\" class=\"error mat-mdc-form-field-error\">\n            {{formHelper.getErrorMessage(control)}}</span>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\"\n        [disabled]=\"!control.touched || !control.valid\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
@@ -2526,12 +2603,12 @@ class FeatureFlagValueComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FeatureFlagValueComponent, deps: [{ token: i1$1.MatDialog }, { token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: { formGroup: "formGroup", flagState: "flagState", featureFlagLimitations: "featureFlagLimitations", isPrerequisite: "isPrerequisite", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"targeting-rule-component smallest-form-field grow\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.stringValue\">\n        <input matInput type=\"text\" [formControl]=\"formGroup.controls.stringValue\" [matTooltip]=\"tooltip\"\n            placeholder=\"Add text ...\" />\n        <button matSuffix class=\"expand-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.stringValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.stringValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.intValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.intValue\"\n            onkeypress=\"return (event.charCode !==8 && event.charCode ===0 || (event.charCode >= 48 && event.charCode <= 57) || event.charCode === 45 || event.charCode === 43)\"\n            inputDisplayNormalizer [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.intValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.intValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.doubleValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.doubleValue\" inputDisplayNormalizer\n            [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.doubleValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.doubleValue)}}\n        </mat-error>\n    </mat-form-field>\n    <div *ngIf=\"formGroup.controls.boolValue\" class=\"bool\" [class.readonly]=\"flagState.readOnly\">\n        <label class=\"switch\" [matTooltip]=\"tooltip\">\n            <input type=\"checkbox\" [formControl]=\"formGroup.controls.boolValue\" />\n            <span class=\"slider round\"></span>\n        </label>\n    </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", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.targeting-rule-component{display:flex;flex-grow:1}.targeting-rule-component .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.targeting-rule-component .readonly{opacity:.6}.targeting-rule-component .expand-button{color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.targeting-rule-component .expand-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}.targeting-rule-component .expand-button .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.targeting-rule-component .expand-button mat-icon{font-size:20px;height:20px;width:20px}.targeting-rule-component .variationId{margin:0 4px 0 5px;cursor:pointer;color:#9b9b9b;display:flex;align-items:center}\n"], dependencies: [{ 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagValueComponent, deps: [{ token: i1$1.MatDialog }, { token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: { formGroup: "formGroup", flagState: "flagState", featureFlagLimitations: "featureFlagLimitations", isPrerequisite: "isPrerequisite", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"targeting-rule-component smallest-form-field grow\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.stringValue\">\n        <input matInput type=\"text\" [formControl]=\"formGroup.controls.stringValue\" [matTooltip]=\"tooltip\"\n            placeholder=\"Add text ...\" />\n        <button matSuffix class=\"expand-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.stringValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.stringValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.intValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.intValue\"\n            digitOnly digitOnlyAllowNegatives=\"true\"\n            inputDisplayNormalizer [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.intValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.intValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.doubleValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.doubleValue\" inputDisplayNormalizer\n            [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.doubleValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.doubleValue)}}\n        </mat-error>\n    </mat-form-field>\n    <div *ngIf=\"formGroup.controls.boolValue\" class=\"bool\" [class.readonly]=\"flagState.readOnly\">\n        <label class=\"switch\" [matTooltip]=\"tooltip\">\n            <input type=\"checkbox\" [formControl]=\"formGroup.controls.boolValue\" />\n            <span class=\"slider round\"></span>\n        </label>\n    </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", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.targeting-rule-component{display:flex;flex-grow:1}.targeting-rule-component .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.targeting-rule-component .readonly{opacity:.6}.targeting-rule-component .expand-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}.targeting-rule-component .expand-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}.targeting-rule-component .expand-button mat-icon{font-size:20px;height:20px;width:20px}.targeting-rule-component .variationId{margin:0 4px 0 5px;cursor:pointer;color:#9b9b9b;display:flex;align-items:center}\n"], dependencies: [{ 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feature-flag-value', template: "<div class=\"targeting-rule-component smallest-form-field grow\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.stringValue\">\n        <input matInput type=\"text\" [formControl]=\"formGroup.controls.stringValue\" [matTooltip]=\"tooltip\"\n            placeholder=\"Add text ...\" />\n        <button matSuffix class=\"expand-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.stringValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.stringValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.intValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.intValue\"\n            onkeypress=\"return (event.charCode !==8 && event.charCode ===0 || (event.charCode >= 48 && event.charCode <= 57) || event.charCode === 45 || event.charCode === 43)\"\n            inputDisplayNormalizer [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.intValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.intValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.doubleValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.doubleValue\" inputDisplayNormalizer\n            [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.doubleValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.doubleValue)}}\n        </mat-error>\n    </mat-form-field>\n    <div *ngIf=\"formGroup.controls.boolValue\" class=\"bool\" [class.readonly]=\"flagState.readOnly\">\n        <label class=\"switch\" [matTooltip]=\"tooltip\">\n            <input type=\"checkbox\" [formControl]=\"formGroup.controls.boolValue\" />\n            <span class=\"slider round\"></span>\n        </label>\n    </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", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.targeting-rule-component{display:flex;flex-grow:1}.targeting-rule-component .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.targeting-rule-component .readonly{opacity:.6}.targeting-rule-component .expand-button{color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.targeting-rule-component .expand-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}.targeting-rule-component .expand-button .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.targeting-rule-component .expand-button mat-icon{font-size:20px;height:20px;width:20px}.targeting-rule-component .variationId{margin:0 4px 0 5px;cursor:pointer;color:#9b9b9b;display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'app-feature-flag-value', template: "<div class=\"targeting-rule-component smallest-form-field grow\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.stringValue\">\n        <input matInput type=\"text\" [formControl]=\"formGroup.controls.stringValue\" [matTooltip]=\"tooltip\"\n            placeholder=\"Add text ...\" />\n        <button matSuffix class=\"expand-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.stringValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.stringValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.intValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.intValue\"\n            digitOnly digitOnlyAllowNegatives=\"true\"\n            inputDisplayNormalizer [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.intValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.intValue)}}\n        </mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" *ngIf=\"formGroup.controls.doubleValue\">\n        <input matInput type=\"number\" [formControl]=\"formGroup.controls.doubleValue\" inputDisplayNormalizer\n            [matTooltip]=\"tooltip\" placeholder=\"Add number ...\" />\n        <mat-error *ngIf=\"formGroup.controls.doubleValue.invalid\">\n            {{FormHelper.getErrorMessage(formGroup.controls.doubleValue)}}\n        </mat-error>\n    </mat-form-field>\n    <div *ngIf=\"formGroup.controls.boolValue\" class=\"bool\" [class.readonly]=\"flagState.readOnly\">\n        <label class=\"switch\" [matTooltip]=\"tooltip\">\n            <input type=\"checkbox\" [formControl]=\"formGroup.controls.boolValue\" />\n            <span class=\"slider round\"></span>\n        </label>\n    </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", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ff5252;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.targeting-rule-component{display:flex;flex-grow:1}.targeting-rule-component .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.targeting-rule-component .readonly{opacity:.6}.targeting-rule-component .expand-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}.targeting-rule-component .expand-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}.targeting-rule-component .expand-button mat-icon{font-size:20px;height:20px;width:20px}.targeting-rule-component .variationId{margin:0 4px 0 5px;cursor:pointer;color:#9b9b9b;display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: FormGenerator }], propDecorators: { formGroup: [{
                 type: Input
             }], flagState: [{
@@ -2589,12 +2666,12 @@ class PercentageOptionsComponent {
     getPercentageEvaluationAttribute() {
         return !this.percentageEvaluationAttribute ? 'Identifier' : this.percentageEvaluationAttribute;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PercentageOptionsComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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                    oninput=\"this.value=this.value.replace(/[^0-9]/g,'')\"\n                    onkeypress=\"return (event.charCode !==8 && event.charCode ===0 || (event.charCode >= 48 && event.charCode <= 57))\"\n                    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;align-items:center}.targeting-rule-line .mat-mdc-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-raised-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.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 .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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.ɵ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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
+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                    oninput=\"this.value=this.value.replace(/[^0-9]/g,'')\"\n                    onkeypress=\"return (event.charCode !==8 && event.charCode ===0 || (event.charCode >= 48 && event.charCode <= 57))\"\n                    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;align-items:center}.targeting-rule-line .mat-mdc-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-raised-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.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 .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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/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"] }]
         }], ctorParameters: () => [{ type: FormGenerator }], propDecorators: { formArray: [{
                 type: Input
             }], flagState: [{
@@ -2634,35 +2711,35 @@ class ComparatorDialogComponent {
         this.lastConfidentialValue = true;
         this.confidentialEnabled = true;
         this.UserComparator = UserComparator$1;
-        this.comparisonAttributeTooltip = "User object's value passed to the SDK (Comparison attribute)";
+        this.comparisonAttributeTooltip = "User Object's value passed to the SDK (Comparison attribute)";
         this.comparisonValueTooltip = "Comparison value set on the ConfigCat Dashboard";
         this.comparators = [
-            { value: UserComparator$1.TextEquals, sensitiveValue: UserComparator$1.SensitiveTextEquals, group: ComparatorGroup$1.Text, label: 'EQUALS', description: "Matches when the user object's comparison attribute passed to the SDK is equal to the comparison value set on the ConfigCat Dashboard" },
-            { value: UserComparator$1.TextDoesNotEqual, sensitiveValue: UserComparator$1.SensitiveTextDoesNotEqual, group: ComparatorGroup$1.Text, label: 'NOT EQUALS', description: "Matches when the user object's comparison attribute passed to the SDK is not equal to the comparison value" },
-            { value: UserComparator$1.IsOneOf, sensitiveValue: UserComparator$1.SensitiveIsOneOf, group: ComparatorGroup$1.Text, label: 'IS ONE OF', description: "Matches when the user object's comparison attribute passed to the SDK is equal to any of the comparison values" },
-            { value: UserComparator$1.IsNotOneOf, sensitiveValue: UserComparator$1.SensitiveIsNotOneOf, group: ComparatorGroup$1.Text, label: 'IS NOT ONE OF', description: "Matches when the user object's comparison attribute passed to the SDK is not equal to any of the comparison values" },
-            { value: UserComparator$1.TextStartsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextStartsWithAnyOf, group: ComparatorGroup$1.Text, label: 'STARTS WITH ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK starts with any of the comparison values" },
-            { value: UserComparator$1.TextNotStartsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextNotStartsWithAnyOf, group: ComparatorGroup$1.Text, label: 'NOT STARTS WITH ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK does not start with any of the comparison values" },
-            { value: UserComparator$1.TextEndsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextEndsWithAnyOf, group: ComparatorGroup$1.Text, label: 'ENDS WITH ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK ends with any of the comparison values" },
-            { value: UserComparator$1.TextNotEndsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextNotEndsWithAnyOf, group: ComparatorGroup$1.Text, label: 'NOT ENDS WITH ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK does not end with any of the comparison values" },
-            { value: UserComparator$1.ContainsAnyOf, group: ComparatorGroup$1.Text, label: 'CONTAINS ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK contains any comparison values as a substring" },
-            { value: UserComparator$1.DoesNotContainAnyOf, group: ComparatorGroup$1.Text, label: 'DOES NOT CONTAIN ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK does not contain any comparison values as a substring" },
-            { value: UserComparator$1.NumberEquals, group: ComparatorGroup$1.Number, label: '= (EQUALS)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a decimal number) is equal to the comparison value" },
-            { value: UserComparator$1.NumberDoesNotEqual, group: ComparatorGroup$1.Number, label: '!= (NOT EQUALS)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a decimal number) is not equal to the comparison value" },
-            { value: UserComparator$1.NumberLess, group: ComparatorGroup$1.Number, label: '< (LESS THAN)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a decimal number) is less than the comparison value" },
-            { value: UserComparator$1.NumberLessOrEquals, group: ComparatorGroup$1.Number, label: '<= (LESS THAN OR EQUAL)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a decimal number) is less than or equal to the comparison value" },
-            { value: UserComparator$1.NumberGreater, group: ComparatorGroup$1.Number, label: '> (GREATER THAN)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a decimal number) is greater than the comparison value" },
-            { value: UserComparator$1.NumberGreaterOrEquals, group: ComparatorGroup$1.Number, label: '>= (GRATER THAN OR EQUAL)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a decimal number) is greater than or equal to the comparison value" },
-            { value: UserComparator$1.SemVerIsOneOf, group: ComparatorGroup$1.Semver, label: 'IS ONE OF', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a semantic version) is equal to any of the comparison values" },
-            { value: UserComparator$1.SemVerIsNotOneOf, group: ComparatorGroup$1.Semver, label: 'IS NOT ONE OF', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a semantic version) is not equal to any of the comparison values" },
-            { value: UserComparator$1.SemVerLess, group: ComparatorGroup$1.Semver, label: '< (LESS THAN)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a semantic version) is less than the comparison value" },
-            { value: UserComparator$1.SemVerLessOrEquals, group: ComparatorGroup$1.Semver, label: '<= (LESS THAN OR EQUAL)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a semantic version) is less than or equal to the comparison value" },
-            { value: UserComparator$1.SemVerGreater, group: ComparatorGroup$1.Semver, label: '> (GREATER THAN)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a semantic version) is greater than the comparison value" },
-            { value: UserComparator$1.SemVerGreaterOrEquals, group: ComparatorGroup$1.Semver, label: '>= (GRATER THAN OR EQUAL)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a semantic version) is greater than or equal to the comparison value" },
-            { value: UserComparator$1.DateTimeBefore, group: ComparatorGroup$1.DateTime, label: 'BEFORE (UTC)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as the seconds elapsed since Unix Epoch) is less than the comparison value" },
-            { value: UserComparator$1.DateTimeAfter, group: ComparatorGroup$1.DateTime, label: 'AFTER (UTC)', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as the seconds elapsed since Unix Epoch) is greater than the comparison value.value" },
-            { value: UserComparator$1.ArrayContainsAnyOf, group: ComparatorGroup$1.Array, sensitiveValue: UserComparator$1.SensitiveArrayContainsAnyOf, label: 'ARRAY CONTAINS ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a string list) contains any of the comparison values" },
-            { value: UserComparator$1.ArrayDoesNotContainAnyOf, group: ComparatorGroup$1.Array, sensitiveValue: UserComparator$1.SensitiveArrayDoesNotContainAnyOf, label: 'ARRAY NOT CONTAINS ANY OF', description: "Matches when the user object's comparison attribute passed to the SDK (interpreted as a string list) does not contain any of the comparison values" },
+            { value: UserComparator$1.TextEquals, sensitiveValue: UserComparator$1.SensitiveTextEquals, group: ComparatorGroup$1.Text, label: 'EQUALS', description: "Checks whether the User Object's comparison attribute passed to the SDK is equal to the comparison value set on the ConfigCat Dashboard" },
+            { value: UserComparator$1.TextDoesNotEqual, sensitiveValue: UserComparator$1.SensitiveTextDoesNotEqual, group: ComparatorGroup$1.Text, label: 'NOT EQUALS', description: "Checks whether the User Object's comparison attribute passed to the SDK is not equal to the comparison value" },
+            { value: UserComparator$1.IsOneOf, sensitiveValue: UserComparator$1.SensitiveIsOneOf, group: ComparatorGroup$1.Text, label: 'IS ONE OF', description: "Checks whether the User Object's comparison attribute passed to the SDK is equal to any of the comparison values" },
+            { value: UserComparator$1.IsNotOneOf, sensitiveValue: UserComparator$1.SensitiveIsNotOneOf, group: ComparatorGroup$1.Text, label: 'IS NOT ONE OF', description: "Checks whether the User Object's comparison attribute passed to the SDK is not equal to any of the comparison values" },
+            { value: UserComparator$1.TextStartsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextStartsWithAnyOf, group: ComparatorGroup$1.Text, label: 'STARTS WITH ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK starts with any of the comparison values" },
+            { value: UserComparator$1.TextNotStartsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextNotStartsWithAnyOf, group: ComparatorGroup$1.Text, label: 'NOT STARTS WITH ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK does not start with any of the comparison values" },
+            { value: UserComparator$1.TextEndsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextEndsWithAnyOf, group: ComparatorGroup$1.Text, label: 'ENDS WITH ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK ends with any of the comparison values" },
+            { value: UserComparator$1.TextNotEndsWithAnyOf, sensitiveValue: UserComparator$1.SensitiveTextNotEndsWithAnyOf, group: ComparatorGroup$1.Text, label: 'NOT ENDS WITH ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK does not end with any of the comparison values" },
+            { value: UserComparator$1.ContainsAnyOf, group: ComparatorGroup$1.Text, label: 'CONTAINS ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK contains any comparison values as a substring" },
+            { value: UserComparator$1.DoesNotContainAnyOf, group: ComparatorGroup$1.Text, label: 'DOES NOT CONTAIN ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK does not contain any comparison values as a substring" },
+            { value: UserComparator$1.NumberEquals, group: ComparatorGroup$1.Number, label: '= (EQUALS)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a decimal number) is equal to the comparison value" },
+            { value: UserComparator$1.NumberDoesNotEqual, group: ComparatorGroup$1.Number, label: '!= (NOT EQUALS)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a decimal number) is not equal to the comparison value" },
+            { value: UserComparator$1.NumberLess, group: ComparatorGroup$1.Number, label: '< (LESS THAN)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a decimal number) is less than the comparison value" },
+            { value: UserComparator$1.NumberLessOrEquals, group: ComparatorGroup$1.Number, label: '<= (LESS THAN OR EQUAL)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a decimal number) is less than or equal to the comparison value" },
+            { value: UserComparator$1.NumberGreater, group: ComparatorGroup$1.Number, label: '> (GREATER THAN)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a decimal number) is greater than the comparison value" },
+            { value: UserComparator$1.NumberGreaterOrEquals, group: ComparatorGroup$1.Number, label: '>= (GRATER THAN OR EQUAL)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a decimal number) is greater than or equal to the comparison value" },
+            { value: UserComparator$1.SemVerIsOneOf, group: ComparatorGroup$1.Semver, label: 'IS ONE OF', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a semantic version) is equal to any of the comparison values" },
+            { value: UserComparator$1.SemVerIsNotOneOf, group: ComparatorGroup$1.Semver, label: 'IS NOT ONE OF', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a semantic version) is not equal to any of the comparison values" },
+            { value: UserComparator$1.SemVerLess, group: ComparatorGroup$1.Semver, label: '< (LESS THAN)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a semantic version) is less than the comparison value" },
+            { value: UserComparator$1.SemVerLessOrEquals, group: ComparatorGroup$1.Semver, label: '<= (LESS THAN OR EQUAL)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a semantic version) is less than or equal to the comparison value" },
+            { value: UserComparator$1.SemVerGreater, group: ComparatorGroup$1.Semver, label: '> (GREATER THAN)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a semantic version) is greater than the comparison value" },
+            { value: UserComparator$1.SemVerGreaterOrEquals, group: ComparatorGroup$1.Semver, label: '>= (GRATER THAN OR EQUAL)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a semantic version) is greater than or equal to the comparison value" },
+            { value: UserComparator$1.DateTimeBefore, group: ComparatorGroup$1.DateTime, label: 'BEFORE (UTC)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as the seconds elapsed since Unix Epoch) is less than the comparison value" },
+            { value: UserComparator$1.DateTimeAfter, group: ComparatorGroup$1.DateTime, label: 'AFTER (UTC)', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as the seconds elapsed since Unix Epoch) is greater than the comparison value.value" },
+            { value: UserComparator$1.ArrayContainsAnyOf, group: ComparatorGroup$1.Array, sensitiveValue: UserComparator$1.SensitiveArrayContainsAnyOf, label: 'ARRAY CONTAINS ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a string list) contains any of the comparison values" },
+            { value: UserComparator$1.ArrayDoesNotContainAnyOf, group: ComparatorGroup$1.Array, sensitiveValue: UserComparator$1.SensitiveArrayDoesNotContainAnyOf, label: 'ARRAY NOT CONTAINS ANY OF', description: "Checks whether the User Object's comparison attribute passed to the SDK (interpreted as a string list) does not contain any of the comparison values" },
         ];
     }
     ngOnInit() {
@@ -2704,12 +2781,12 @@ class ComparatorDialogComponent {
         const result = this.isConfidential && selected.sensitiveValue ? selected.sensitiveValue : selected.value;
         this.dialogRef.close(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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.1.3", 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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> DOES NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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"], 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.ɵ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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
+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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> DOES NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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> match\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/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"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2931,12 +3008,12 @@ class PopoutListEditorDialogComponent {
         };
         fileReader.readAsText(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialogRef }, { token: ComparisonValueListHelper }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PopoutListEditorDialogComponent, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "setPaginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\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 (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#ffa726}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .actions .mat-mdc-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;margin-top:16px;display:flex;align-items:center}.container .error .mat-mdc-button .mat-mdc-button-touch-target,.container .error .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .error .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .error .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .error span{margin-left:4px}.container .grey-button{color:#999}\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.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.MatLabel, selector: "mat-label" }, { 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: "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: "directive", type: i7$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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"], 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: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialogRef }, { token: ComparisonValueListHelper }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PopoutListEditorDialogComponent, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "setPaginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\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 (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#5c6bc0}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--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;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}.container .grey-button{color:#999}\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.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.MatLabel, selector: "mat-label" }, { 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: "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: "directive", type: i7$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-popout-list-editor-dialog', template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\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 (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#ffa726}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .actions .mat-mdc-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;margin-top:16px;display:flex;align-items:center}.container .error .mat-mdc-button .mat-mdc-button-touch-target,.container .error .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .error .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .error .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .error span{margin-left:4px}.container .grey-button{color:#999}\n"] }]
+            args: [{ selector: 'app-popout-list-editor-dialog', template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\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 (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#5c6bc0}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--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;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}.container .grey-button{color:#999}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }, { type: i1$1.MatDialogRef }, { type: ComparisonValueListHelper }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2953,10 +3030,10 @@ class ConditionChipComponent {
                 ? 'IF'
                 : 'ELSE IF';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConditionChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ConditionChipComponent, selector: "app-condition-chip", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex" }, ngImport: i0, template: "<div class=\"chip-container fixed-width\">\n    <div *ngIf=\"conditionIndex > 0\" class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <mat-chip-set>\n        <mat-chip disabled>{{chipText}}</mat-chip>\n    </mat-chip-set>\n</div>", styles: [".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConditionChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ConditionChipComponent, selector: "app-condition-chip", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex" }, ngImport: i0, template: "<div class=\"chip-container fixed-width\">\n    <div *ngIf=\"conditionIndex > 0\" class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <mat-chip-set>\n        <mat-chip disabled>{{chipText}}</mat-chip>\n    </mat-chip-set>\n</div>", styles: [".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConditionChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConditionChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-condition-chip', template: "<div class=\"chip-container fixed-width\">\n    <div *ngIf=\"conditionIndex > 0\" class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <mat-chip-set>\n        <mat-chip disabled>{{chipText}}</mat-chip>\n    </mat-chip-set>\n</div>", styles: [".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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"] }]
         }], propDecorators: { targetingRuleIndex: [{
@@ -3038,8 +3115,8 @@ class DateTimePickerComponent {
     validate() {
         return this.formGroup.errors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: { dateTooltip: "dateTooltip", timeTooltip: "timeTooltip" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: { dateTooltip: "dateTooltip", timeTooltip: "timeTooltip" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimePickerComponent),
@@ -3053,7 +3130,7 @@ class DateTimePickerComponent {
             { provide: DateAdapter, useClass: AppDateAdapter }
         ], ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"component date\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-icon-button\">\n            <input matInput [formControl]=\"formGroup.controls.dateValue\" [matDatepicker]=\"datepicker\"\n                [matTooltip]=\"dateTooltip\">\n            <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\n            <mat-datepicker #datepicker></mat-datepicker>\n            <mat-error *ngIf=\"formGroup.controls.dateValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.dateValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n    <div class=\"component\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"time\" [formControl]=\"formGroup.controls.timeValue\" [matTooltip]=\"timeTooltip\" />\n            <mat-error *ngIf=\"formGroup.controls.timeValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.timeValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</div>", styles: [".outer{display:flex;flex-wrap:wrap}.outer .component{width:140px;margin:2px 0}.outer .component.date{margin-right:8px}.outer .component mat-form-field{width:100%;font-size:12px}\n"], dependencies: [{ 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.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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i6$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-time-picker', providers: [
                         {
@@ -3469,16 +3546,16 @@ class UserConditionComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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.1.3", type: UserConditionComponent, selector: "app-user-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", readOnly: "readOnly", featureFlagLimitations: "featureFlagLimitations", formGroup: "formGroup" }, providers: [
+    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}.targeting-rule-line .mat-mdc-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-raised-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-outlined-button .mat-mdc-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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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/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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: UserConditionComponent, decorators: [{
+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}.targeting-rule-line .mat-mdc-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-raised-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-outlined-button .mat-mdc-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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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/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"] }]
         }], ctorParameters: () => [{ type: FormGenerator }, { type: i1$1.MatDialog }, { type: ComparisonValueListHelper }, { type: i5$2.Clipboard }, { type: MessagingService }, { type: i0.ChangeDetectorRef }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{
@@ -3495,10 +3572,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             }] } });
 
 class TrackingDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TrackingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: TrackingDirective, selector: "[track]", inputs: { track: "track" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: TrackingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: TrackingDirective, selector: "[track]", inputs: { track: "track" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TrackingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: TrackingDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3521,12 +3598,12 @@ class SegmentConditionComponent {
     createSegment() {
         this.createSegmentRequested.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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.ɵ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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SegmentConditionComponent, decorators: [{
+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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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/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"] }]
         }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{
@@ -3587,10 +3664,10 @@ class PrerequisiteFlagConditionComponent {
                 throw new Error('Invalid SettingType');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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.ɵ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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
+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"] }]
         }], ctorParameters: () => [{ type: FormGenerator }], propDecorators: { targetingRuleIndex: [{
@@ -3666,12 +3743,12 @@ class ConditionsComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConditionsComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ConditionsComponent, selector: "app-conditions", inputs: { formArray: "formArray", segments: "segments", flagState: "flagState", targetingRuleIndex: "targetingRuleIndex", canManageSegments: "canManageSegments", featureFlagLimitations: "featureFlagLimitations" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", lastConditionDeleted: "lastConditionDeleted", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div *ngFor=\"let condition of formArray.controls; let i = index\" class=\"condition\">\n    <app-user-condition class=\"grow\" *ngIf=\"condition.controls.userCondition\" [readOnly]=\"flagState.readOnly\"\n        [formGroup]=\"condition.controls.userCondition\" [featureFlagLimitations]=\"featureFlagLimitations\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" [conditionIndex]=\"i\"></app-user-condition>\n    <app-segment-condition class=\"grow\" *ngIf=\"condition.controls.segmentCondition\"\n        [formGroup]=\"condition.controls.segmentCondition\" [segments]=\"segments\" [canManageSegments]=\"canManageSegments\"\n        (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-segment-condition>\n    <app-prerequisite-flag-condition class=\"grow\" *ngIf=\"condition.controls.prerequisiteFlagCondition\"\n        [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n        [prerequisiteSettings]=\"flagState.prerequisiteSettings\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-prerequisite-flag-condition>\n    <div class=\"delete-button\" *ngIf=\"formArray.controls.length > 1 && !flagState.readOnly\">\n        <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n    </div>\n</div>\n\n<div class=\"add-cond\" *ngIf=\"formArray.controls.length && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div [matMenuTriggerFor]=\"andmenu\" matTooltip=\"Add AND condition\" class=\"add-btn add-and\">+ AND</div>\n</div>\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add flag condition (prerequisite)\n        </a>\n    </div>\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", "html{--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-mdc-button .mat-mdc-button-touch-target,.mat-mdc-raised-button .mat-mdc-button-touch-target,.mat-mdc-unelevated-button .mat-mdc-button-touch-target,.mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.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}.mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:3px 2px 2px 5px}\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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: UserConditionComponent, selector: "app-user-condition", inputs: ["targetingRuleIndex", "conditionIndex", "readOnly", "featureFlagLimitations", "formGroup"] }, { kind: "component", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "segments", "canManageSegments"], outputs: ["createSegmentRequested", "manageSegmentsRequested"] }, { kind: "component", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "prerequisiteSettings", "featureFlagLimitations"], outputs: ["prerequisiteConditionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConditionsComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: ConditionsComponent, selector: "app-conditions", inputs: { formArray: "formArray", segments: "segments", flagState: "flagState", targetingRuleIndex: "targetingRuleIndex", canManageSegments: "canManageSegments", featureFlagLimitations: "featureFlagLimitations" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", lastConditionDeleted: "lastConditionDeleted", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div *ngFor=\"let condition of formArray.controls; let i = index\" class=\"condition\">\n    <app-user-condition class=\"grow\" *ngIf=\"condition.controls.userCondition\" [readOnly]=\"flagState.readOnly\"\n        [formGroup]=\"condition.controls.userCondition\" [featureFlagLimitations]=\"featureFlagLimitations\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" [conditionIndex]=\"i\"></app-user-condition>\n    <app-segment-condition class=\"grow\" *ngIf=\"condition.controls.segmentCondition\"\n        [formGroup]=\"condition.controls.segmentCondition\" [segments]=\"segments\" [canManageSegments]=\"canManageSegments\"\n        (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-segment-condition>\n    <app-prerequisite-flag-condition class=\"grow\" *ngIf=\"condition.controls.prerequisiteFlagCondition\"\n        [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n        [prerequisiteSettings]=\"flagState.prerequisiteSettings\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-prerequisite-flag-condition>\n    <div class=\"delete-button\" *ngIf=\"formArray.controls.length > 1 && !flagState.readOnly\">\n        <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n    </div>\n</div>\n\n<div class=\"add-cond\" *ngIf=\"formArray.controls.length && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div [matMenuTriggerFor]=\"andmenu\" matTooltip=\"Add AND condition\" class=\"add-btn add-and\">+ AND</div>\n</div>\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add flag condition (prerequisite)\n        </a>\n    </div>\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", "html{--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}html{--mat-icon-button-touch-target-display: none}.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}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:3px 2px 2px 5px}\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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: UserConditionComponent, selector: "app-user-condition", inputs: ["targetingRuleIndex", "conditionIndex", "readOnly", "featureFlagLimitations", "formGroup"] }, { kind: "component", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "segments", "canManageSegments"], outputs: ["createSegmentRequested", "manageSegmentsRequested"] }, { kind: "component", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "prerequisiteSettings", "featureFlagLimitations"], outputs: ["prerequisiteConditionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ConditionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ConditionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-conditions', template: "<div *ngFor=\"let condition of formArray.controls; let i = index\" class=\"condition\">\n    <app-user-condition class=\"grow\" *ngIf=\"condition.controls.userCondition\" [readOnly]=\"flagState.readOnly\"\n        [formGroup]=\"condition.controls.userCondition\" [featureFlagLimitations]=\"featureFlagLimitations\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" [conditionIndex]=\"i\"></app-user-condition>\n    <app-segment-condition class=\"grow\" *ngIf=\"condition.controls.segmentCondition\"\n        [formGroup]=\"condition.controls.segmentCondition\" [segments]=\"segments\" [canManageSegments]=\"canManageSegments\"\n        (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-segment-condition>\n    <app-prerequisite-flag-condition class=\"grow\" *ngIf=\"condition.controls.prerequisiteFlagCondition\"\n        [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n        [prerequisiteSettings]=\"flagState.prerequisiteSettings\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-prerequisite-flag-condition>\n    <div class=\"delete-button\" *ngIf=\"formArray.controls.length > 1 && !flagState.readOnly\">\n        <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n    </div>\n</div>\n\n<div class=\"add-cond\" *ngIf=\"formArray.controls.length && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div [matMenuTriggerFor]=\"andmenu\" matTooltip=\"Add AND condition\" class=\"add-btn add-and\">+ AND</div>\n</div>\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add flag condition (prerequisite)\n        </a>\n    </div>\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", "html{--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-mdc-button .mat-mdc-button-touch-target,.mat-mdc-raised-button .mat-mdc-button-touch-target,.mat-mdc-unelevated-button .mat-mdc-button-touch-target,.mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.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}.mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:3px 2px 2px 5px}\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-conditions', template: "<div *ngFor=\"let condition of formArray.controls; let i = index\" class=\"condition\">\n    <app-user-condition class=\"grow\" *ngIf=\"condition.controls.userCondition\" [readOnly]=\"flagState.readOnly\"\n        [formGroup]=\"condition.controls.userCondition\" [featureFlagLimitations]=\"featureFlagLimitations\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" [conditionIndex]=\"i\"></app-user-condition>\n    <app-segment-condition class=\"grow\" *ngIf=\"condition.controls.segmentCondition\"\n        [formGroup]=\"condition.controls.segmentCondition\" [segments]=\"segments\" [canManageSegments]=\"canManageSegments\"\n        (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-segment-condition>\n    <app-prerequisite-flag-condition class=\"grow\" *ngIf=\"condition.controls.prerequisiteFlagCondition\"\n        [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n        [prerequisiteSettings]=\"flagState.prerequisiteSettings\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" [targetingRuleIndex]=\"targetingRuleIndex\"\n        [conditionIndex]=\"i\"></app-prerequisite-flag-condition>\n    <div class=\"delete-button\" *ngIf=\"formArray.controls.length > 1 && !flagState.readOnly\">\n        <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n    </div>\n</div>\n\n<div class=\"add-cond\" *ngIf=\"formArray.controls.length && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div [matMenuTriggerFor]=\"andmenu\" matTooltip=\"Add AND condition\" class=\"add-btn add-and\">+ AND</div>\n</div>\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add flag condition (prerequisite)\n        </a>\n    </div>\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", "html{--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}html{--mat-icon-button-touch-target-display: none}.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}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:3px 2px 2px 5px}\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
             }], segments: [{
@@ -3775,12 +3852,12 @@ class TargetingRuleComponent {
     subscriptionLimitReachedCalled() {
         this.subscriptionLimitReached.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TargetingRuleComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: { formGroup: "formGroup", segments: "segments", flagState: "flagState", targetingRuleIndex: "targetingRuleIndex", featureFlagLimitations: "featureFlagLimitations", canManageSegments: "canManageSegments", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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-mdc-button .mat-mdc-button-touch-target,.mat-mdc-raised-button .mat-mdc-button-touch-target,.mat-mdc-unelevated-button .mat-mdc-button-touch-target,.mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#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 6px}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested"] }, { kind: "component", type: ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: TargetingRuleComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: { formGroup: "formGroup", segments: "segments", flagState: "flagState", targetingRuleIndex: "targetingRuleIndex", featureFlagLimitations: "featureFlagLimitations", canManageSegments: "canManageSegments", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#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 6px}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: 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.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested"] }, { kind: "component", type: ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: TargetingRuleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: TargetingRuleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-targeting-rule', template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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-mdc-button .mat-mdc-button-touch-target,.mat-mdc-raised-button .mat-mdc-button-touch-target,.mat-mdc-unelevated-button .mat-mdc-button-touch-target,.mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#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 6px}\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-targeting-rule', template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#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 6px}\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: { formGroup: [{
                 type: Input
             }], segments: [{
@@ -3981,12 +4058,12 @@ class EvaluationFormulaComponent {
             prerequisiteIds: prerequisiteIds
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EvaluationFormulaComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: { formGroup: "formGroup", segments: "segments", flagState: "flagState", showVariationId: "showVariationId", featureFlagLimitations: "featureFlagLimitations", canManageSegments: "canManageSegments", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.renderTopAddButtons && !flagState.readOnly\">\n    <div class=\"grow vertical-center add-box pad-bottom left-align\">\n        <div class=\"add-btn add-if\" [matMenuTriggerFor]=\"ormenu\" \n            matTooltip=\"Add targeting rule\">+ IF</div>\n        <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" matTooltip=\"Target a percentage of users\" \n            *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n    </div>\n</div>\n\n<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"flagState.readOnly\" [cdkDropListSortPredicate]=\"sortPredicate()\">\n    <div *ngFor=\"let targetingRule of formGroup.controls.targetingRules.controls; trackBy: trackByIndex; let i = index\">\n        <div class=\"targeting-rule-outer grow\" cdkDrag [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n            [cdkDragData]=\"targetingRule\">\n            <div class=\"drag-handle\">\n                <div *ngIf=\"!isDragDisabled(targetingRule)\" cdkDragHandle matTooltip=\"Drag here to reorder\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>drag_indicator</mat-icon>\n                </div>\n            </div>\n            <div class=\"white-box grow\">\n                <app-targeting-rule class=\"grow\" [formGroup]=\"targetingRule\" [segments]=\"segments\"\n                    [flagState]=\"flagState\" [targetingRuleIndex]=\"i\"\n                    (removedAllRules)=\"remove(i)\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n                    (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n                    [percentageEvaluationAttribute]=\"formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"></app-targeting-rule>\n                <div class=\"delete\">\n                    <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\"\n                        *ngIf=\"!flagState.readOnly\">\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showAddRuleButtons && !flagState.readOnly\">\n            <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n                <div class=\"add-btn add-if\" \n                    [matMenuTriggerFor]=\"ormenu\" \n                    matTooltip=\"Add targeting rule\" \n                    *ngIf=\"!flagState.readOnly\">+ OR</div>\n                <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" \n                    matTooltip=\"Target a percentage of users\" \n                    *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showOrChip\">\n            <div class=\"chip-container\">\n                <mat-chip-set>\n                    <mat-chip disabled>OR</mat-chip>\n                </mat-chip-set>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.renderSeparationArea\"></div>\n    </div>\n</div>\n\n<div class=\"targeting-rule-outer\">\n    <div class=\"drag-handle\"></div>\n    <div class=\"white-box grow side-padd vertical-center\">\n        <div class=\"chip-container fixed-width\" [ngClass]=\"flagState.addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n            <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n        <app-feature-flag-value class=\"value grow\" [flagState]=\"flagState\"\n            tooltip=\"Served value\" [formGroup]=\"formGroup.controls.defaultValue\"\n            [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n    </div>\n</div>\n\n<mat-menu #ormenu class=\"menu-long-text-or\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add rule with user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add rule with segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add rule with flag condition (prerequisite)\n        </a>\n    </div>\n</mat-menu>", styles: ["html{--mdc-text-button-container-height: 28px;--mdc-filled-button-container-height: 28px;--mdc-outlined-button-container-height: 28px;--mdc-protected-button-container-height: 28px}.mat-mdc-button .mat-mdc-button-touch-target,.mat-mdc-raised-button .mat-mdc-button-touch-target,.mat-mdc-unelevated-button .mat-mdc-button-touch-target,.mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.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}.mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:gray}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:#f2f4f8;display:flex;flex-wrap:wrap;border:1px solid #c9c9c9;padding:8px 0;position:relative}.targeting-rule-outer .white-box .delete{color:#b1b1b1;position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:#f3f3f3;border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:42px;padding:5px 2px 5px 0;justify-content:center;text-align:center;color:#8b8b8b;border:1px dashed rgb(168,168,168);background-color:#f2f4f8;border-radius:50px}.targeting-rule-outer .add-box .add-if:hover{background-color:#e5e8f0}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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.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: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: ["formGroup", "segments", "flagState", "targetingRuleIndex", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: EvaluationFormulaComponent, deps: [{ token: FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: { formGroup: "formGroup", segments: "segments", flagState: "flagState", showVariationId: "showVariationId", featureFlagLimitations: "featureFlagLimitations", canManageSegments: "canManageSegments", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.renderTopAddButtons && !flagState.readOnly\">\n    <div class=\"grow vertical-center add-box pad-bottom left-align\">\n        <div class=\"add-btn add-if\" [matMenuTriggerFor]=\"ormenu\" \n            matTooltip=\"Add targeting rule\">+ IF</div>\n        <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" matTooltip=\"Target a percentage of users\" \n            *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n    </div>\n</div>\n\n<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"flagState.readOnly\" [cdkDropListSortPredicate]=\"sortPredicate()\">\n    <div *ngFor=\"let targetingRule of formGroup.controls.targetingRules.controls; trackBy: trackByIndex; let i = index\">\n        <div class=\"targeting-rule-outer grow\" cdkDrag [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n            [cdkDragData]=\"targetingRule\">\n            <div class=\"drag-handle\">\n                <div *ngIf=\"!isDragDisabled(targetingRule)\" cdkDragHandle matTooltip=\"Drag here to reorder\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>drag_indicator</mat-icon>\n                </div>\n            </div>\n            <div class=\"white-box grow\">\n                <app-targeting-rule class=\"grow\" [formGroup]=\"targetingRule\" [segments]=\"segments\"\n                    [flagState]=\"flagState\" [targetingRuleIndex]=\"i\"\n                    (removedAllRules)=\"remove(i)\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n                    (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n                    [percentageEvaluationAttribute]=\"formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"></app-targeting-rule>\n                <div class=\"delete\">\n                    <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\"\n                        *ngIf=\"!flagState.readOnly\">\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showAddRuleButtons && !flagState.readOnly\">\n            <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n                <div class=\"add-btn add-if\" \n                    [matMenuTriggerFor]=\"ormenu\" \n                    matTooltip=\"Add targeting rule\" \n                    *ngIf=\"!flagState.readOnly\">+ OR</div>\n                <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" \n                    matTooltip=\"Target a percentage of users\" \n                    *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showOrChip\">\n            <div class=\"chip-container\">\n                <mat-chip-set>\n                    <mat-chip disabled>OR</mat-chip>\n                </mat-chip-set>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.renderSeparationArea\"></div>\n    </div>\n</div>\n\n<div class=\"targeting-rule-outer\">\n    <div class=\"drag-handle\"></div>\n    <div class=\"white-box grow side-padd vertical-center\">\n        <div class=\"chip-container fixed-width\" [ngClass]=\"flagState.addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n            <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n        <app-feature-flag-value class=\"value grow\" [flagState]=\"flagState\"\n            tooltip=\"Served value\" [formGroup]=\"formGroup.controls.defaultValue\"\n            [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n    </div>\n</div>\n\n<mat-menu #ormenu class=\"menu-long-text-or\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add rule with user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add rule with segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add rule with flag condition (prerequisite)\n        </a>\n    </div>\n</mat-menu>", styles: ["html{--mdc-text-button-container-height: 28px;--mdc-filled-button-container-height: 28px;--mdc-outlined-button-container-height: 28px;--mdc-protected-button-container-height: 28px;--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}html{--mat-icon-button-touch-target-display: none}.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}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:gray}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:#f2f4f8;display:flex;flex-wrap:wrap;border:1px solid #c9c9c9;padding:8px 0;position:relative}.targeting-rule-outer .white-box .delete{color:#b1b1b1;position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:#f3f3f3;border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:42px;padding:5px 2px 5px 0;justify-content:center;text-align:center;color:#8b8b8b;border:1px dashed rgb(168,168,168);background-color:#f2f4f8;border-radius:50px}.targeting-rule-outer .add-box .add-if:hover{background-color:#e5e8f0}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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.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: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: ["formGroup", "segments", "flagState", "targetingRuleIndex", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EvaluationFormulaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: EvaluationFormulaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-evaluation-formula', template: "<div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.renderTopAddButtons && !flagState.readOnly\">\n    <div class=\"grow vertical-center add-box pad-bottom left-align\">\n        <div class=\"add-btn add-if\" [matMenuTriggerFor]=\"ormenu\" \n            matTooltip=\"Add targeting rule\">+ IF</div>\n        <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" matTooltip=\"Target a percentage of users\" \n            *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n    </div>\n</div>\n\n<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"flagState.readOnly\" [cdkDropListSortPredicate]=\"sortPredicate()\">\n    <div *ngFor=\"let targetingRule of formGroup.controls.targetingRules.controls; trackBy: trackByIndex; let i = index\">\n        <div class=\"targeting-rule-outer grow\" cdkDrag [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n            [cdkDragData]=\"targetingRule\">\n            <div class=\"drag-handle\">\n                <div *ngIf=\"!isDragDisabled(targetingRule)\" cdkDragHandle matTooltip=\"Drag here to reorder\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>drag_indicator</mat-icon>\n                </div>\n            </div>\n            <div class=\"white-box grow\">\n                <app-targeting-rule class=\"grow\" [formGroup]=\"targetingRule\" [segments]=\"segments\"\n                    [flagState]=\"flagState\" [targetingRuleIndex]=\"i\"\n                    (removedAllRules)=\"remove(i)\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n                    (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n                    [percentageEvaluationAttribute]=\"formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"></app-targeting-rule>\n                <div class=\"delete\">\n                    <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\"\n                        *ngIf=\"!flagState.readOnly\">\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showAddRuleButtons && !flagState.readOnly\">\n            <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n                <div class=\"add-btn add-if\" \n                    [matMenuTriggerFor]=\"ormenu\" \n                    matTooltip=\"Add targeting rule\" \n                    *ngIf=\"!flagState.readOnly\">+ OR</div>\n                <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" \n                    matTooltip=\"Target a percentage of users\" \n                    *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showOrChip\">\n            <div class=\"chip-container\">\n                <mat-chip-set>\n                    <mat-chip disabled>OR</mat-chip>\n                </mat-chip-set>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.renderSeparationArea\"></div>\n    </div>\n</div>\n\n<div class=\"targeting-rule-outer\">\n    <div class=\"drag-handle\"></div>\n    <div class=\"white-box grow side-padd vertical-center\">\n        <div class=\"chip-container fixed-width\" [ngClass]=\"flagState.addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n            <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n        <app-feature-flag-value class=\"value grow\" [flagState]=\"flagState\"\n            tooltip=\"Served value\" [formGroup]=\"formGroup.controls.defaultValue\"\n            [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n    </div>\n</div>\n\n<mat-menu #ormenu class=\"menu-long-text-or\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add rule with user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add rule with segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add rule with flag condition (prerequisite)\n        </a>\n    </div>\n</mat-menu>", styles: ["html{--mdc-text-button-container-height: 28px;--mdc-filled-button-container-height: 28px;--mdc-outlined-button-container-height: 28px;--mdc-protected-button-container-height: 28px}.mat-mdc-button .mat-mdc-button-touch-target,.mat-mdc-raised-button .mat-mdc-button-touch-target,.mat-mdc-unelevated-button .mat-mdc-button-touch-target,.mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.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}.mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:gray}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:#f2f4f8;display:flex;flex-wrap:wrap;border:1px solid #c9c9c9;padding:8px 0;position:relative}.targeting-rule-outer .white-box .delete{color:#b1b1b1;position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:#f3f3f3;border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:42px;padding:5px 2px 5px 0;justify-content:center;text-align:center;color:#8b8b8b;border:1px dashed rgb(168,168,168);background-color:#f2f4f8;border-radius:50px}.targeting-rule-outer .add-box .add-if:hover{background-color:#e5e8f0}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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-evaluation-formula', template: "<div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.renderTopAddButtons && !flagState.readOnly\">\n    <div class=\"grow vertical-center add-box pad-bottom left-align\">\n        <div class=\"add-btn add-if\" [matMenuTriggerFor]=\"ormenu\" \n            matTooltip=\"Add targeting rule\">+ IF</div>\n        <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" matTooltip=\"Target a percentage of users\" \n            *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n    </div>\n</div>\n\n<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"flagState.readOnly\" [cdkDropListSortPredicate]=\"sortPredicate()\">\n    <div *ngFor=\"let targetingRule of formGroup.controls.targetingRules.controls; trackBy: trackByIndex; let i = index\">\n        <div class=\"targeting-rule-outer grow\" cdkDrag [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n            [cdkDragData]=\"targetingRule\">\n            <div class=\"drag-handle\">\n                <div *ngIf=\"!isDragDisabled(targetingRule)\" cdkDragHandle matTooltip=\"Drag here to reorder\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>drag_indicator</mat-icon>\n                </div>\n            </div>\n            <div class=\"white-box grow\">\n                <app-targeting-rule class=\"grow\" [formGroup]=\"targetingRule\" [segments]=\"segments\"\n                    [flagState]=\"flagState\" [targetingRuleIndex]=\"i\"\n                    (removedAllRules)=\"remove(i)\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n                    (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n                    [percentageEvaluationAttribute]=\"formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"></app-targeting-rule>\n                <div class=\"delete\">\n                    <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\"\n                        *ngIf=\"!flagState.readOnly\">\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div class=\"targeting-rule-outer\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showAddRuleButtons && !flagState.readOnly\">\n            <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n                <div class=\"add-btn add-if\" \n                    [matMenuTriggerFor]=\"ormenu\" \n                    matTooltip=\"Add targeting rule\" \n                    *ngIf=\"!flagState.readOnly\">+ OR</div>\n                <div class=\"add-btn add-if pad-left\" (click)=\"addPercentageOptions()\" \n                    matTooltip=\"Target a percentage of users\" \n                    *ngIf=\"!flagState.addButtonRenderState.hasPercentageOnlyRule\">+ %</div>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.showOrChip\">\n            <div class=\"chip-container\">\n                <mat-chip-set>\n                    <mat-chip disabled>OR</mat-chip>\n                </mat-chip-set>\n            </div>\n        </div>\n        <div class=\"or-chip\" *ngIf=\"flagState.addButtonRenderState.addRuleButtonTracker[i]?.renderSeparationArea\"></div>\n    </div>\n</div>\n\n<div class=\"targeting-rule-outer\">\n    <div class=\"drag-handle\"></div>\n    <div class=\"white-box grow side-padd vertical-center\">\n        <div class=\"chip-container fixed-width\" [ngClass]=\"flagState.addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n            <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n        <app-feature-flag-value class=\"value grow\" [flagState]=\"flagState\"\n            tooltip=\"Served value\" [formGroup]=\"formGroup.controls.defaultValue\"\n            [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n    </div>\n</div>\n\n<mat-menu #ormenu class=\"menu-long-text-or\">\n    <a mat-menu-item (click)=\"addUserCondition()\"><mat-icon>track_changes</mat-icon>Add rule with user condition</a>\n    <a mat-menu-item (click)=\"addSegmentCondition()\"><mat-icon>pie_chart</mat-icon>Add rule with segment condition</a>\n    <div matTooltip=\"There's no other flag in the Config to select as a prerequisite.\"\n        [matTooltipDisabled]=\"flagState.prerequisiteSettings.length > 0\">\n        <a mat-menu-item (click)=\"addPrerequisiteFlagCondition()\" [disabled]=\"!flagState.prerequisiteSettings.length\">\n            <mat-icon>account_tree</mat-icon>Add rule with flag condition (prerequisite)\n        </a>\n    </div>\n</mat-menu>", styles: ["html{--mdc-text-button-container-height: 28px;--mdc-filled-button-container-height: 28px;--mdc-outlined-button-container-height: 28px;--mdc-protected-button-container-height: 28px;--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}html{--mat-icon-button-touch-target-display: none}.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}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:gray}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:#f2f4f8;display:flex;flex-wrap:wrap;border:1px solid #c9c9c9;padding:8px 0;position:relative}.targeting-rule-outer .white-box .delete{color:#b1b1b1;position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:#f3f3f3;border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:42px;padding:5px 2px 5px 0;justify-content:center;text-align:center;color:#8b8b8b;border:1px dashed rgb(168,168,168);background-color:#f2f4f8;border-radius:50px}.targeting-rule-outer .add-box .add-if:hover{background-color:#e5e8f0}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#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: { formGroup: [{
                 type: Input
             }], segments: [{
@@ -4060,10 +4137,10 @@ class PercentageEvaluationAttributeDialogComponent {
         }
         this.dialogRef.close({ percentageEvaluationAttribute: this.formControl.value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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.1.3", 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.ɵ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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
+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"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: FormGenerator }, { type: undefined, decorators: [{
@@ -4082,10 +4159,10 @@ class DependeesDialogComponent {
             this.data.productId, this.data.configId, this.data.environmentId, settingId]);
         return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DependeesDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.Router }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DependeesDialogComponent, selector: "app-dependees-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n  <p>\n    <strong>{{data.name}}</strong> is the prerequisite of the following feature flags:\n  </p>\n  <ul *ngFor=\"let dependee of data.dependees\">\n    <li><a [href]=\"getDashboardUrl(dependee.settingId)\" rel=\"noopener noreferrer\" target=\"_blank\">{{dependee.name}}\n        ({{dependee.key}})</a></li>\n  </ul>\n</div>\n\n<div mat-dialog-actions>\n  <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DependeesDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.Router }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: DependeesDialogComponent, selector: "app-dependees-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n  <p>\n    <strong>{{data.name}}</strong> is the prerequisite of the following feature flags:\n  </p>\n  <ul *ngFor=\"let dependee of data.dependees\">\n    <li><a [href]=\"getDashboardUrl(dependee.settingId)\" rel=\"noopener noreferrer\" target=\"_blank\">{{dependee.name}}\n        ({{dependee.key}})</a></li>\n  </ul>\n</div>\n\n<div mat-dialog-actions>\n  <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DependeesDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DependeesDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dependees-dialog', template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n  <p>\n    <strong>{{data.name}}</strong> is the prerequisite of the following feature flags:\n  </p>\n  <ul *ngFor=\"let dependee of data.dependees\">\n    <li><a [href]=\"getDashboardUrl(dependee.settingId)\" rel=\"noopener noreferrer\" target=\"_blank\">{{dependee.name}}\n        ({{dependee.key}})</a></li>\n  </ul>\n</div>\n\n<div mat-dialog-actions>\n  <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -4104,6 +4181,7 @@ class FeatureFlagComponent {
         this.environmentName = "";
         this.showEnvironmentName = false;
         this.deleteSettingText = 'Delete setting';
+        this.canDeleteSetting = false;
         this.addSegmentConditionRequestedWithoutSegments = new EventEmitter();
         this.expandedChanged = new EventEmitter();
         this.deleteSettingRequested = new EventEmitter();
@@ -4198,9 +4276,6 @@ class FeatureFlagComponent {
         }
         return '+ ' + count + ' rule' + (count > 1 ? 's' : '');
     }
-    openInConfigCat() {
-        window.open(this.getDashboardUrl(), '_blank');
-    }
     copyDirectLink() {
         try {
             this.clipboard.copy(this.getDashboardUrl());
@@ -4227,12 +4302,12 @@ class FeatureFlagComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FeatureFlagComponent, deps: [{ token: i1$1.MatDialog }, { token: MessagingService }, { token: FormGenerator }, { token: i1$2.Router }, { token: PublicApiService }, { token: i5$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <div mat-menu-item data-robot=\"history\" (click)=\"openInConfigCat()\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>Open in ConfigCat</span>\n    </div>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <mat-divider></mat-divider>\n    <div mat-menu-item data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{deleteSettingText}}</span>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;border-left-width:0px;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagComponent, deps: [{ token: i1$1.MatDialog }, { token: MessagingService }, { token: FormGenerator }, { token: i1$2.Router }, { token: PublicApiService }, { token: i5$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText", canDeleteSetting: "canDeleteSetting" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FeatureFlagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <div mat-menu-item data-robot=\"history\" (click)=\"openInConfigCat()\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>Open in ConfigCat</span>\n    </div>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <mat-divider></mat-divider>\n    <div mat-menu-item data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{deleteSettingText}}</span>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;border-left-width:0px;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
+            args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: MessagingService }, { type: FormGenerator }, { type: i1$2.Router }, { type: PublicApiService }, { type: i5$2.Clipboard }], propDecorators: { formGroup: [{
                 type: Input
             }], flagState: [{
@@ -4249,6 +4324,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                 type: Input
             }], deleteSettingText: [{
                 type: Input
+            }], canDeleteSetting: [{
+                type: Input
             }], addSegmentConditionRequestedWithoutSegments: [{
                 type: Output
             }], expandedChanged: [{
@@ -4283,6 +4360,7 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.showFeedBackMessage = false;
         this.hasSettingValues = false;
         this.hasOtherEnvironment = false;
+        this.dashboardBasePath = publicApiService.getDashboardBasePath();
     }
     ngOnInit() {
         this.reloadSettingValues();
@@ -4476,14 +4554,23 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.deleteSettingRequested.emit({ config: this.settingFormula.config, environment: this.settingFormula.environment, setting: setting.setting });
     }
     subscriptionLimitReachedCalled() {
-        // TODO this.subscriptionLimitReached(this.constellation, this.dialog);
+        this.dialog.open(RerouteDialogComponent, {
+            data: {
+                title: 'You have reached the limits of your plan',
+                body: ` Upgrade your plan or join our <a href="https://configcat.com/referrals" target="_blank" rel="noopener noreferrer">referral program</a> to increase your limits.`,
+                yesButtonLabel: `See plans`,
+                yesButtonLink: this.dashboardBasePath + "/organization/plans",
+                noButtonLabel: `Close`
+            }
+        });
     }
     addSegmentConditionRequestedWithoutSegments() {
-        this.dialog.open(ConfirmationDialogComponent, {
+        this.dialog.open(RerouteDialogComponent, {
             data: {
                 title: 'There are no segments in this product yet.',
                 body: `Go ahead to the ConfiCat Dashboard and create your first user segment before adding it to a targeting rule.`,
-                yesButtonLabel: `I understand`
+                yesButtonLabel: `Go to the dashboard`,
+                yesButtonLink: this.dashboardBasePath + "/product/" + this.productId + "/segments"
             }
         });
     }
@@ -4528,12 +4615,12 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.flagState.panelExpanded = expandedState;
         this.expandedStateChanged.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FeatureFlagItemComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialog }, { token: i2$1.MatSnackBar }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .mat-mdc-button .mat-mdc-button-touch-target,.container .expand-collapse .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .expand-collapse .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .expand-collapse .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagItemComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialog }, { token: i2$1.MatSnackBar }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .mat-mdc-button .mat-mdc-button-touch-target,.container .expand-collapse .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .expand-collapse .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .expand-collapse .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
+            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }, { type: i1$1.MatDialog }, { type: i2$1.MatSnackBar }, { type: PublicApiService }], propDecorators: { productId: [{
                 type: Input
             }], environmentId: [{
@@ -4572,8 +4659,8 @@ class NgConfigCatPublicApiUIModule {
         };
     }
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NgConfigCatPublicApiUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: NgConfigCatPublicApiUIModule, declarations: [BaseComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NgConfigCatPublicApiUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: NgConfigCatPublicApiUIModule, declarations: [BaseComponent,
             BaseSelectComponent,
             ProductSelectComponent,
             ConfigSelectComponent,
@@ -4611,7 +4698,8 @@ class NgConfigCatPublicApiUIModule {
             AceEditorComponent,
             FeatureFlagItemComponent,
             DateTimePickerComponent,
-            DependeesDialogComponent], imports: [CommonModule,
+            DependeesDialogComponent,
+            RerouteDialogComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             BrowserAnimationsModule,
@@ -4646,7 +4734,7 @@ class NgConfigCatPublicApiUIModule {
             InputDisplayNormalizerDirective,
             DeleteSettingDialogComponent,
             FeatureFlagItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NgConfigCatPublicApiUIModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NgConfigCatPublicApiUIModule, providers: [
             {
                 provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
                 useValue: { disableTooltipInteractivity: true },
@@ -4682,7 +4770,7 @@ class NgConfigCatPublicApiUIModule {
             MatTableModule,
             MatRadioModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NgConfigCatPublicApiUIModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NgConfigCatPublicApiUIModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4724,7 +4812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                         AceEditorComponent,
                         FeatureFlagItemComponent,
                         DateTimePickerComponent,
-                        DependeesDialogComponent
+                        DependeesDialogComponent,
+                        RerouteDialogComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4786,5 +4875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthorizationComponent, ConfigSelectComponent, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagItemComponent, FormHelper, InputDisplayNormalizerDirective, NgConfigCatPublicApiUIModule, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, percentageRegex, timeRegex, wholeNumberRegex };
+export { AuthorizationComponent, ConfigSelectComponent, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagItemComponent, FormHelper, InputDisplayNormalizerDirective, NgConfigCatPublicApiUIModule, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, featureFlagKeyRegex, percentageRegex, timeRegex, wholeNumberRegex };
 //# sourceMappingURL=ng-configcat-publicapi-ui.mjs.map