ng-configcat-publicapi-ui 5.3.0 → 5.3.2

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

@@ -3470,6 +3470,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             args: [{ selector: "app-copyable-value", imports: [MatTooltip, CdkCopyToClipboard, MatRipple, MatIcon], template: "<div class=\"container themed\" [class.dark]=\"dark()\">\n  @if (!!name()) {\n    <div class=\"name\">{{ name() }}</div>\n  }\n  <div\n    class=\"control\"\n    [matTooltip]=\"tooltip() ?? 'Copy to clipboard'\"\n    [matTooltipClass]=\"tooltipClass() ?? []\"\n    [class.small]=\"small()\"\n    [class.smallest]=\"smallest()\"\n    [class.borderless]=\"borderless()\"\n    [class.whole-copyable]=\"wholeControlCopyable()\"\n    [matTooltipDisabled]=\"!wholeControlCopyable()\">\n    @if (!wholeControlCopyable()) {\n      <input\n        #content\n        class=\"value\"\n        readonly\n        [value]=\"value()\"\n        [class.bold]=\"bold()\"\n        [class.borderless]=\"borderless()\" />\n    } @else {\n      <div class=\"value\" [cdkCopyToClipboard]=\"value()\" (cdkCopyToClipboardCopied)=\"copied()\">\n        {{ value() }}\n      </div>\n    }\n    <div\n      class=\"icon-container\"\n      matRipple\n      matTooltip=\"Copy to clipboard\"\n      [class.borderless]=\"borderless()\"\n      [class.dark]=\"dark()\"\n      [cdkCopyToClipboard]=\"value()\"\n      [matRippleUnbounded]=\"borderless()\"\n      [matRippleCentered]=\"borderless()\"\n      [matTooltipDisabled]=\"wholeControlCopyable()\"\n      (cdkCopyToClipboardCopied)=\"copied()\">\n      <mat-icon>file_copy</mat-icon>\n    </div>\n  </div>\n  @if (!!hint()) {\n    <div class=\"hint\" [class.hint-warn]=\"warnHint()\">{{ hint() }}</div>\n  }\n</div>\n", styles: [".themed{--text-color: var(--copyable-text-color);--border-color: var(--copyable-border-color);--background-color: var(--copyable-background-color)}.themed.dark{--border-color: var(--copyable-border-color-darker);--background-color: var(--copyable-background-color-darker)}.container{line-height:normal}.container .control,.container .small,.container .smallest{display:flex;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;flex-wrap:nowrap}.container .control .value,.container .small .value,.container .smallest .value{width:100%;border:none;background-color:transparent;outline:none;padding:0 0 0 10px;min-width:0;overflow:hidden;font-size:13px;font-family:monospace;color:var(--text-color)}.container .control .icon-container,.container .small .icon-container,.container .smallest .icon-container{display:flex;border-left:1px solid var(--border-color);border-top-right-radius:3px;border-bottom-right-radius:3px;align-items:center;flex-shrink:0;margin-left:auto;padding:10px;cursor:pointer}.container .control .icon-container mat-icon,.container .small .icon-container mat-icon,.container .smallest .icon-container mat-icon{opacity:var(--copyable-icon-opacity);width:16px;height:16px;font-size:16px}.container .control .dark.icon-container mat-icon,.container .small .dark.icon-container mat-icon,.container .smallest .dark.icon-container mat-icon{opacity:calc(var(--copyable-icon-opacity) - .1)}.container .control .icon-container:hover mat-icon,.container .small .icon-container:hover mat-icon,.container .smallest .icon-container:hover mat-icon{opacity:calc(var(--copyable-icon-opacity) + .1)}.container .control .dark.icon-container:hover mat-icon,.container .small .dark.icon-container:hover mat-icon,.container .smallest .dark.icon-container:hover mat-icon{opacity:var(--copyable-icon-opacity)}.container .control.whole-copyable,.container .whole-copyable.small,.container .whole-copyable.smallest{cursor:pointer}.container .control.whole-copyable .value,.container .whole-copyable.small .value,.container .whole-copyable.smallest .value{padding:0 10px;text-overflow:ellipsis}.container .small .value,.container .smallest .value{padding:0 0 0 4px}.container .small.whole-copyable .value,.container .whole-copyable.smallest .value{padding:0 5px 0 4px}.container .small .value.borderless,.container .smallest .value.borderless{padding:0}.container .small .icon-container,.container .smallest .icon-container{padding:4px}.container .smallest .value{font-size:12px}.container .smallest .icon-container{padding:3px}.container .smallest .icon-container mat-icon{width:14px;height:14px;font-size:14px}.container .bold{font-weight:700}.container .name{font-weight:700;margin-bottom:5px}.container .hint,.container .hint-warn{display:flex;align-items:center;font-size:11px;color:var(--text-color);margin-top:5px}.container .hint:before,.container .hint-warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);font-size:18px;margin-right:4px;transform:rotate(.03deg)}.container .hint-warn:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.container .borderless{border:none!important;background-color:transparent!important}\n"] }]
         }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], warnHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "warnHint", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], bold: [{ type: i0.Input, args: [{ isSignal: true, alias: "bold", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], smallest: [{ type: i0.Input, args: [{ isSignal: true, alias: "smallest", required: false }] }], dark: [{ type: i0.Input, args: [{ isSignal: true, alias: "dark", required: false }] }], wholeControlCopyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "wholeControlCopyable", required: false }] }], inputControl: [{ type: i0.ViewChild, args: ["content", { isSignal: true }] }] } });
 
+class PastedDataTrimmerDirective {
+    constructor() {
+        this.dialog = inject(MatDialog);
+    }
+    onPaste(event) {
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) {
+            return;
+        }
+        const pastedText = clipboardData.getData("text");
+        if (pastedText !== pastedText.trim()) {
+            event.preventDefault();
+            const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+                data: {
+                    title: "Trim extra spaces?",
+                    body: "The pasted value contains extra spaces at the beginning or end.<br/>This may cause unexpected behavior, for example when comparing values.",
+                    yesButtonLabel: "Trim extra spaces",
+                    cancelButtonLabel: "Keep spaces",
+                },
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                const trimmedText = result === "yes" ? pastedText.trim() : pastedText;
+                const target = event.target;
+                if (target) {
+                    const start = target.selectionStart ?? 0;
+                    const end = target.selectionEnd ?? 0;
+                    const currentValue = target.value;
+                    // Insert the trimmed text at the cursor position
+                    const newValue = currentValue.substring(0, start) + trimmedText + currentValue.substring(end);
+                    target.value = newValue;
+                    // Set the cursor position after the inserted text
+                    const newCursorPosition = start + trimmedText.length;
+                    target.setSelectionRange(newCursorPosition, newCursorPosition);
+                    // Trigger input event to ensure change detection works
+                    target.dispatchEvent(new Event("input", { bubbles: true }));
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PastedDataTrimmerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: PastedDataTrimmerDirective, isStandalone: true, selector: "[appPastedDataTrimmer]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PastedDataTrimmerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[appPastedDataTrimmer]",
+                    standalone: true,
+                }]
+        }], propDecorators: { onPaste: [{
+                type: HostListener,
+                args: ["paste", ["$event"]]
+            }] } });
+
 class PopoutTextEditorDialogComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
@@ -3513,7 +3566,7 @@ class PopoutTextEditorDialogComponent {
         this.dialogRef.close({ value: this.control.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PopoutTextEditorDialogComponent, isStandalone: true, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PopoutTextEditorDialogComponent, isStandalone: true, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        appPastedDataTrimmer\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
             type: Component,
@@ -3536,7 +3589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         MatDialogActions,
                         MatButton,
                         MatDialogClose,
-                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
+                        PastedDataTrimmerDirective,
+                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        appPastedDataTrimmer\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
         }] });
 
 class VariationsDialogComponent {
@@ -3952,7 +4006,7 @@ class FeatureFlagValueComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n      @let variationName = selectedPredefinedVariation?.name;\n      @let variationHint = selectedPredefinedVariation?.hint;\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field select-suffixed\"\n        subscriptSizing=\"dynamic\"\n        [matTooltip]=\"\n             `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n            `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <mat-select disableOptionCentering [formControl]=\"formGroupValue.controls.predefinedVariationId\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      <button\n        matSuffix\n        class=\"input-suffix-button\"\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Advanced editor\"\n        (click)=\"expandText()\">\n        <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n      </button>\n      @if (formGroupValue.controls.stringValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.intValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        appDigitOnly\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\n        [digitOnlyAllowNegatives]=\"true\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.intValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.doubleValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.doubleValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.doubleValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.boolValue) {\n    <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n      <label\n        class=\"switch\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n        @let variationName = selectedPredefinedVariation?.name;\n        @let variationHint = selectedPredefinedVariation?.hint;\n        <mat-select\n          disableOptionCentering\n          [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n          [matTooltip]=\"\n            `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n            `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        appPastedDataTrimmer\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      <button\n        matSuffix\n        class=\"input-suffix-button\"\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Advanced editor\"\n        (click)=\"expandText()\">\n        <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n      </button>\n      @if (formGroupValue.controls.stringValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.intValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        appDigitOnly\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\n        [digitOnlyAllowNegatives]=\"true\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.intValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.doubleValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.doubleValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.doubleValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.boolValue) {\n    <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n      <label\n        class=\"switch\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
             type: Component,
@@ -3973,7 +4027,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         MatOption$1,
                         NgClass,
                         MatSelectTrigger,
-                    ], template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n      @let variationName = selectedPredefinedVariation?.name;\n      @let variationHint = selectedPredefinedVariation?.hint;\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field select-suffixed\"\n        subscriptSizing=\"dynamic\"\n        [matTooltip]=\"\n             `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n            `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <mat-select disableOptionCentering [formControl]=\"formGroupValue.controls.predefinedVariationId\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      <button\n        matSuffix\n        class=\"input-suffix-button\"\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Advanced editor\"\n        (click)=\"expandText()\">\n        <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n      </button>\n      @if (formGroupValue.controls.stringValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.intValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        appDigitOnly\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\n        [digitOnlyAllowNegatives]=\"true\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.intValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.doubleValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.doubleValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.doubleValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.boolValue) {\n    <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n      <label\n        class=\"switch\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
+                        PastedDataTrimmerDirective,
+                    ], template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n        @let variationName = selectedPredefinedVariation?.name;\n        @let variationHint = selectedPredefinedVariation?.hint;\n        <mat-select\n          disableOptionCentering\n          [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n          [matTooltip]=\"\n            `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n            `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        appPastedDataTrimmer\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      <button\n        matSuffix\n        class=\"input-suffix-button\"\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Advanced editor\"\n        (click)=\"expandText()\">\n        <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n      </button>\n      @if (formGroupValue.controls.stringValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.intValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        appDigitOnly\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\n        [digitOnlyAllowNegatives]=\"true\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.intValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.doubleValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.doubleValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.doubleValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.boolValue) {\n    <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n      <label\n        class=\"switch\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
         }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], notAvailablePredefinedVariationIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "notAvailablePredefinedVariationIds", required: false }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], isPrerequisite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPrerequisite", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
 
 class ConditionChipComponent {
@@ -4046,7 +4101,7 @@ class PrerequisiteFlagConditionComponent {
         this.filterText.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite flag key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option\n              [value]=\"prerequisiteSetting.settingId\"\n              [matTooltip]=\"prerequisiteSetting.name\"\n              [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              {{ prerequisiteSetting.key }}\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            [matTooltip]=\"\n              `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n            \"\n            [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite flag key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <mat-select-trigger>\n            @if (settingValue) {\n              {{ settingValue.name }} ({{ settingValue.key }})\n            }\n          </mat-select-trigger>\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              <div class=\"feature-flag-selector-item\">\n                @switch (prerequisiteSetting.settingType) {\n                  @case (SettingType.Boolean) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/feature_flag.svg\"\n                      alt=\"feature flag\" />\n                  }\n                  @case (SettingType.String) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/text.svg\"\n                      alt=\"text setting\" />\n                  }\n                  @case (SettingType.Int) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/whole.svg\"\n                      alt=\"whole number setting\" />\n                  }\n                  @case (SettingType.Double) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/decimal.svg\"\n                      alt=\"decimal number setting\" />\n                  }\n                }\n                <div class=\"item-text-wrapper\">\n                  <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n                  <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n                    {{ prerequisiteSetting.key }}\n                  </code>\n                </div>\n              </div>\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            [matTooltip]=\"\n              `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n            \"\n            [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
             type: Component,
@@ -4067,7 +4122,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         MatIconButton,
                         MatSuffix,
                         MatInput,
-                    ], template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite flag key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option\n              [value]=\"prerequisiteSetting.settingId\"\n              [matTooltip]=\"prerequisiteSetting.name\"\n              [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              {{ prerequisiteSetting.key }}\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            [matTooltip]=\"\n              `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n            \"\n            [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
+                        MatSelectTrigger,
+                    ], template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite flag key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <mat-select-trigger>\n            @if (settingValue) {\n              {{ settingValue.name }} ({{ settingValue.key }})\n            }\n          </mat-select-trigger>\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              <div class=\"feature-flag-selector-item\">\n                @switch (prerequisiteSetting.settingType) {\n                  @case (SettingType.Boolean) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/feature_flag.svg\"\n                      alt=\"feature flag\" />\n                  }\n                  @case (SettingType.String) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/text.svg\"\n                      alt=\"text setting\" />\n                  }\n                  @case (SettingType.Int) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/whole.svg\"\n                      alt=\"whole number setting\" />\n                  }\n                  @case (SettingType.Double) {\n                    <img\n                      class=\"feature-flag-selector-img\"\n                      src=\"../../../../../assets/images/setting-types/decimal.svg\"\n                      alt=\"decimal number setting\" />\n                  }\n                }\n                <div class=\"item-text-wrapper\">\n                  <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n                  <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n                    {{ prerequisiteSetting.key }}\n                  </code>\n                </div>\n              </div>\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            [matTooltip]=\"\n              `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n            \"\n            [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], prerequisiteSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "prerequisiteSettings", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
 
 class SegmentConditionComponent {
@@ -4713,7 +4769,7 @@ class PopoutListEditorDialogComponent {
         fileReader.readAsText(file);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PopoutListEditorDialogComponent, isStandalone: true, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Table\"\n        [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n        Table\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Json\"\n        [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n        JSON\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Csv\"\n        [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n        CSV with hints\n      </mat-button-toggle>\n      <mat-button-toggle\n        [value]=\"VisualizationType.Csl\"\n        [disabled]=\"\n          (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n        \"\n        [matTooltip]=\"\n          currentlyHasHints\n            ? 'There are hints set to your values so the CSV without hints view is not available'\n            : 'Can not switch between views while there are errors in the current view.'\n        \"\n        [matTooltipDisabled]=\"\n          (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n        \">\n        CSV without hints\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n    <p class=\"description\">\n      Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n    </p>\n    <div class=\"controls\">\n      <div>\n        <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n          <mat-label>Filter</mat-label>\n          <input\n            matInput\n            placeholder=\"Filter values and hints.\"\n            [(ngModel)]=\"filterValue\"\n            (ngModelChange)=\"applyFilter()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"control-button-container\">\n        <div\n          class=\"add-btn-container\"\n          matTooltip=\"Add item\"\n          [matTooltipDisabled]=\"\n            listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n          \">\n          <div\n            [matTooltip]=\"\n              'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n            \"\n            [matTooltipDisabled]=\"\n              listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n            \">\n            @if (!data.readOnly) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"add-btn\"\n                [disabled]=\"\n                  listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n                \"\n                (click)=\"add()\">\n                <mat-icon>add_circle</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n\n        @if (!data.readOnly) {\n          <button\n            type=\"button\"\n            class=\"action-icon-button\"\n            mat-icon-button\n            matTooltip=\"Remove all\"\n            (click)=\"removeAll()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n    <table mat-table [dataSource]=\"dataSource\">\n      <ng-container matColumnDef=\"value\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n        <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n                <input matInput focus [formControl]=\"row.controls.value\" />\n              } @else {\n                <input matInput [formControl]=\"row.controls.value\" />\n              }\n              @if (row.controls.value.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.value) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"hint\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Hint</th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              <input matInput [formControl]=\"row.controls.hint\" />\n              @if (row.controls.hint.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"actions\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header></th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          @if (!data.readOnly) {\n            <button mat-icon-button type=\"button\" matTooltip=\"Remove item\" (click)=\"remove(row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </td>\n      </ng-container>\n      <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n      <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n    </table>\n    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\" />\n  </div>\n\n  @if (visualizationType === VisualizationType.Json) {\n    <div class=\"json-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a JSON text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.json\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              class=\"action-icon-button\"\n              mat-icon-button\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <div class=\"json-editor\">\n        <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\" />\n      </div>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csv) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values and hints) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csl) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values only) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  }\n\n  @if (visualizationType !== VisualizationType.Table && comparisonValueListParseResult) {\n    <div>\n      @if (!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length) {\n        <p class=\"small-chip-input\">\n          Preview ({{ comparisonValueListParseResult.comparisonValueList.length }} items)\n          <mat-chip-set>\n            @for (listValueItem of comparisonValueListParseResult.comparisonValueList | slice: 0 : 10; track $index) {\n              <span class=\"chip-container\" [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\">\n                <mat-chip-row>\n                  {{ listValueItem.value }}\n                </mat-chip-row>\n              </span>\n            }\n            @if (comparisonValueListParseResult.comparisonValueList.length > 10) {\n              <mat-chip-row>\n                {{ comparisonValueListParseResult.comparisonValueList.length - 10 }} remaining items...\n              </mat-chip-row>\n            }\n          </mat-chip-set>\n        </p>\n      }\n      @if (comparisonValueListParseResult.error) {\n        <mat-error class=\"error\">\n          <mat-icon>warning</mat-icon>\n          <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n      }\n    </div>\n  }\n  @if (listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>{{ FormHelper.getErrorMessage(listValueFormArray) }}</span>\n    </mat-error>\n  }\n  @if (!valueChanged && listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>Invalid items.&nbsp;</span>\n      <div>\n        @if (visualizationType !== VisualizationType.Table || (paginator?.getNumberOfPages() ?? 0) > 1) {\n          <button type=\"button\" mat-stroked-button color=\"primary\" class=\"jump\" (click)=\"focusInvalid()\">\n            Jump to fix\n          </button>\n        }\n      </div>\n    </mat-error>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-bottom:10px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:var(--input-outline-focused-color)}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:var(--diabled-button-color)}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .actions{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.container .error{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .error{margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i2.FileControlDirective, selector: "input[type=file]", inputs: ["writeFile", "extension", "fileSize", "file"] }, { kind: "directive", type: i2.ImageFileControlDirective, selector: "input[type=file]", inputs: ["image"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PopoutListEditorDialogComponent, isStandalone: true, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Table\"\n        [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n        Table\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Json\"\n        [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n        JSON\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Csv\"\n        [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n        CSV with hints\n      </mat-button-toggle>\n      <mat-button-toggle\n        [value]=\"VisualizationType.Csl\"\n        [disabled]=\"\n          (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n        \"\n        [matTooltip]=\"\n          currentlyHasHints\n            ? 'There are hints set to your values so the CSV without hints view is not available'\n            : 'Can not switch between views while there are errors in the current view.'\n        \"\n        [matTooltipDisabled]=\"\n          (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n        \">\n        CSV without hints\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n    <p class=\"description\">\n      Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n    </p>\n    <div class=\"controls\">\n      <div>\n        <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n          <mat-label>Filter</mat-label>\n          <input\n            matInput\n            placeholder=\"Filter values and hints.\"\n            [(ngModel)]=\"filterValue\"\n            (ngModelChange)=\"applyFilter()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"control-button-container\">\n        <div\n          class=\"add-btn-container\"\n          matTooltip=\"Add item\"\n          [matTooltipDisabled]=\"\n            listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n          \">\n          <div\n            [matTooltip]=\"\n              'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n            \"\n            [matTooltipDisabled]=\"\n              listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n            \">\n            @if (!data.readOnly) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"add-btn\"\n                [disabled]=\"\n                  listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n                \"\n                (click)=\"add()\">\n                <mat-icon>add_circle</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n\n        @if (!data.readOnly) {\n          <button\n            type=\"button\"\n            class=\"action-icon-button\"\n            mat-icon-button\n            matTooltip=\"Remove all\"\n            (click)=\"removeAll()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n    <table mat-table [dataSource]=\"dataSource\">\n      <ng-container matColumnDef=\"value\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n        <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n                <input matInput focus appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n              } @else {\n                <input matInput appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n              }\n              @if (row.controls.value.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.value) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"hint\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Hint</th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              <input matInput [formControl]=\"row.controls.hint\" />\n              @if (row.controls.hint.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"actions\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header></th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          @if (!data.readOnly) {\n            <button mat-icon-button type=\"button\" matTooltip=\"Remove item\" (click)=\"remove(row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </td>\n      </ng-container>\n      <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n      <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n    </table>\n    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\" />\n  </div>\n\n  @if (visualizationType === VisualizationType.Json) {\n    <div class=\"json-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a JSON text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.json\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              class=\"action-icon-button\"\n              mat-icon-button\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <div class=\"json-editor\">\n        <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\" />\n      </div>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csv) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values and hints) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csl) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values only) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  }\n\n  @if (visualizationType !== VisualizationType.Table && comparisonValueListParseResult) {\n    <div>\n      @if (!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length) {\n        <p class=\"small-chip-input\">\n          Preview ({{ comparisonValueListParseResult.comparisonValueList.length }} items)\n          <mat-chip-set>\n            @for (listValueItem of comparisonValueListParseResult.comparisonValueList | slice: 0 : 10; track $index) {\n              <span class=\"chip-container\" [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\">\n                <mat-chip-row>\n                  {{ listValueItem.value }}\n                </mat-chip-row>\n              </span>\n            }\n            @if (comparisonValueListParseResult.comparisonValueList.length > 10) {\n              <mat-chip-row>\n                {{ comparisonValueListParseResult.comparisonValueList.length - 10 }} remaining items...\n              </mat-chip-row>\n            }\n          </mat-chip-set>\n        </p>\n      }\n      @if (comparisonValueListParseResult.error) {\n        <mat-error class=\"error\">\n          <mat-icon>warning</mat-icon>\n          <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n      }\n    </div>\n  }\n  @if (listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>{{ FormHelper.getErrorMessage(listValueFormArray) }}</span>\n    </mat-error>\n  }\n  @if (!valueChanged && listValueFormArray.touched && listValueFormArray.invalid) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>Invalid items.&nbsp;</span>\n      <div>\n        @if (visualizationType !== VisualizationType.Table || (paginator?.getNumberOfPages() ?? 0) > 1) {\n          <button type=\"button\" mat-stroked-button color=\"primary\" class=\"jump\" (click)=\"focusInvalid()\">\n            Jump to fix\n          </button>\n        }\n      </div>\n    </mat-error>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-bottom:10px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:var(--input-outline-focused-color)}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:var(--diabled-button-color)}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .actions{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.container .error{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .error{margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: i2.FileControlDirective, selector: "input[type=file]", inputs: ["writeFile", "extension", "fileSize", "file"] }, { kind: "directive", type: i2.ImageFileControlDirective, selector: "input[type=file]", inputs: ["image"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
             type: Component,
@@ -4753,7 +4809,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         MatDialogActions,
                         MatDialogClose,
                         SlicePipe,
-                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Table\"\n        [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n        Table\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Json\"\n        [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n        JSON\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Csv\"\n        [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n        CSV with hints\n      </mat-button-toggle>\n      <mat-button-toggle\n        [value]=\"VisualizationType.Csl\"\n        [disabled]=\"\n          (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n        \"\n        [matTooltip]=\"\n          currentlyHasHints\n            ? 'There are hints set to your values so the CSV without hints view is not available'\n            : 'Can not switch between views while there are errors in the current view.'\n        \"\n        [matTooltipDisabled]=\"\n          (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n        \">\n        CSV without hints\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n    <p class=\"description\">\n      Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n    </p>\n    <div class=\"controls\">\n      <div>\n        <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n          <mat-label>Filter</mat-label>\n          <input\n            matInput\n            placeholder=\"Filter values and hints.\"\n            [(ngModel)]=\"filterValue\"\n            (ngModelChange)=\"applyFilter()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"control-button-container\">\n        <div\n          class=\"add-btn-container\"\n          matTooltip=\"Add item\"\n          [matTooltipDisabled]=\"\n            listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n          \">\n          <div\n            [matTooltip]=\"\n              'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n            \"\n            [matTooltipDisabled]=\"\n              listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n            \">\n            @if (!data.readOnly) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"add-btn\"\n                [disabled]=\"\n                  listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n                \"\n                (click)=\"add()\">\n                <mat-icon>add_circle</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n\n        @if (!data.readOnly) {\n          <button\n            type=\"button\"\n            class=\"action-icon-button\"\n            mat-icon-button\n            matTooltip=\"Remove all\"\n            (click)=\"removeAll()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n    <table mat-table [dataSource]=\"dataSource\">\n      <ng-container matColumnDef=\"value\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n        <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n                <input matInput focus [formControl]=\"row.controls.value\" />\n              } @else {\n                <input matInput [formControl]=\"row.controls.value\" />\n              }\n              @if (row.controls.value.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.value) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"hint\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Hint</th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              <input matInput [formControl]=\"row.controls.hint\" />\n              @if (row.controls.hint.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"actions\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header></th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          @if (!data.readOnly) {\n            <button mat-icon-button type=\"button\" matTooltip=\"Remove item\" (click)=\"remove(row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </td>\n      </ng-container>\n      <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n      <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n    </table>\n    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\" />\n  </div>\n\n  @if (visualizationType === VisualizationType.Json) {\n    <div class=\"json-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a JSON text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.json\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              class=\"action-icon-button\"\n              mat-icon-button\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <div class=\"json-editor\">\n        <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\" />\n      </div>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csv) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values and hints) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csl) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values only) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  }\n\n  @if (visualizationType !== VisualizationType.Table && comparisonValueListParseResult) {\n    <div>\n      @if (!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length) {\n        <p class=\"small-chip-input\">\n          Preview ({{ comparisonValueListParseResult.comparisonValueList.length }} items)\n          <mat-chip-set>\n            @for (listValueItem of comparisonValueListParseResult.comparisonValueList | slice: 0 : 10; track $index) {\n              <span class=\"chip-container\" [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\">\n                <mat-chip-row>\n                  {{ listValueItem.value }}\n                </mat-chip-row>\n              </span>\n            }\n            @if (comparisonValueListParseResult.comparisonValueList.length > 10) {\n              <mat-chip-row>\n                {{ comparisonValueListParseResult.comparisonValueList.length - 10 }} remaining items...\n              </mat-chip-row>\n            }\n          </mat-chip-set>\n        </p>\n      }\n      @if (comparisonValueListParseResult.error) {\n        <mat-error class=\"error\">\n          <mat-icon>warning</mat-icon>\n          <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n      }\n    </div>\n  }\n  @if (listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>{{ FormHelper.getErrorMessage(listValueFormArray) }}</span>\n    </mat-error>\n  }\n  @if (!valueChanged && listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>Invalid items.&nbsp;</span>\n      <div>\n        @if (visualizationType !== VisualizationType.Table || (paginator?.getNumberOfPages() ?? 0) > 1) {\n          <button type=\"button\" mat-stroked-button color=\"primary\" class=\"jump\" (click)=\"focusInvalid()\">\n            Jump to fix\n          </button>\n        }\n      </div>\n    </mat-error>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-bottom:10px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:var(--input-outline-focused-color)}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:var(--diabled-button-color)}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .actions{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.container .error{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .error{margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}\n"] }]
+                        PastedDataTrimmerDirective,
+                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Table\"\n        [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">\n        Table\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Json\"\n        [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">\n        JSON\n      </mat-button-toggle>\n      <mat-button-toggle\n        matTooltip=\"Can not switch between views while there are errors in the current view.\"\n        [value]=\"VisualizationType.Csv\"\n        [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n        [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">\n        CSV with hints\n      </mat-button-toggle>\n      <mat-button-toggle\n        [value]=\"VisualizationType.Csl\"\n        [disabled]=\"\n          (visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\n        \"\n        [matTooltip]=\"\n          currentlyHasHints\n            ? 'There are hints set to your values so the CSV without hints view is not available'\n            : 'Can not switch between views while there are errors in the current view.'\n        \"\n        [matTooltipDisabled]=\"\n          (visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\n        \">\n        CSV without hints\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"table-format\" [hidden]=\"visualizationType !== VisualizationType.Table\">\n    <p class=\"description\">\n      Modify the items within the list of comparison values. The hint helps you label the value for easier reference.\n    </p>\n    <div class=\"controls\">\n      <div>\n        <mat-form-field appearance=\"outline\" class=\"small-density-form-field\" subscriptSizing=\"dynamic\">\n          <mat-label>Filter</mat-label>\n          <input\n            matInput\n            placeholder=\"Filter values and hints.\"\n            [(ngModel)]=\"filterValue\"\n            (ngModelChange)=\"applyFilter()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"control-button-container\">\n        <div\n          class=\"add-btn-container\"\n          matTooltip=\"Add item\"\n          [matTooltipDisabled]=\"\n            listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n          \">\n          <div\n            [matTooltip]=\"\n              'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\n            \"\n            [matTooltipDisabled]=\"\n              listValueFormArray.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\n            \">\n            @if (!data.readOnly) {\n              <button\n                mat-icon-button\n                type=\"button\"\n                class=\"add-btn\"\n                [disabled]=\"\n                  listValueFormArray.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\n                \"\n                (click)=\"add()\">\n                <mat-icon>add_circle</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n\n        @if (!data.readOnly) {\n          <button\n            type=\"button\"\n            class=\"action-icon-button\"\n            mat-icon-button\n            matTooltip=\"Remove all\"\n            (click)=\"removeAll()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n    <table mat-table [dataSource]=\"dataSource\">\n      <ng-container matColumnDef=\"value\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Comparison value</th>\n        <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              @if (paginator.pageIndex * paginator.pageSize + i === focusIndex) {\n                <input matInput focus appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n              } @else {\n                <input matInput appPastedDataTrimmer [formControl]=\"row.controls.value\" />\n              }\n              @if (row.controls.value.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.value) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"hint\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header>Hint</th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          <div class=\"value-field\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n              <input matInput [formControl]=\"row.controls.hint\" />\n              @if (row.controls.hint.invalid) {\n                <mat-error>\n                  {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                </mat-error>\n              }\n            </mat-form-field>\n          </div>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"actions\">\n        <th *matHeaderCellDef mat-header-cell mat-sort-header></th>\n        <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n          @if (!data.readOnly) {\n            <button mat-icon-button type=\"button\" matTooltip=\"Remove item\" (click)=\"remove(row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </td>\n      </ng-container>\n      <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n      <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n    </table>\n    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\" />\n  </div>\n\n  @if (visualizationType === VisualizationType.Json) {\n    <div class=\"json-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a JSON text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.json\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              class=\"action-icon-button\"\n              mat-icon-button\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <div class=\"json-editor\">\n        <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\" />\n      </div>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csv) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values and hints) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  } @else if (visualizationType === VisualizationType.Csl) {\n    <div class=\"csv-format\">\n      <div class=\"actions\">\n        <div>Modify the items via a CSV (values only) text.</div>\n        @if (!data.readOnly) {\n          <div>\n            <input\n              #fileInput\n              hidden=\"true\"\n              type=\"file\"\n              accept=\".txt,.csv\"\n              (click)=\"fileInput.value = ''\"\n              (change)=\"loadFile($event)\" />\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"action-icon-button\"\n              matTooltip=\"Load from file (your values will be overwritten)\"\n              (click)=\"fileInput.click()\">\n              <mat-icon>upload_file</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n        <textarea\n          matInput\n          autofocus\n          focus\n          rows=\"17\"\n          cdkTextareaAutosize\n          cdkAutosizeMinRows=\"17\"\n          cdkAutosizeMaxRows=\"17\"\n          spellcheck=\"false\"\n          [readonly]=\"data.readOnly\"\n          [(ngModel)]=\"plainText\"\n          (ngModelChange)=\"textValueChanged()\"></textarea>\n      </mat-form-field>\n    </div>\n  }\n\n  @if (visualizationType !== VisualizationType.Table && comparisonValueListParseResult) {\n    <div>\n      @if (!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length) {\n        <p class=\"small-chip-input\">\n          Preview ({{ comparisonValueListParseResult.comparisonValueList.length }} items)\n          <mat-chip-set>\n            @for (listValueItem of comparisonValueListParseResult.comparisonValueList | slice: 0 : 10; track $index) {\n              <span class=\"chip-container\" [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\">\n                <mat-chip-row>\n                  {{ listValueItem.value }}\n                </mat-chip-row>\n              </span>\n            }\n            @if (comparisonValueListParseResult.comparisonValueList.length > 10) {\n              <mat-chip-row>\n                {{ comparisonValueListParseResult.comparisonValueList.length - 10 }} remaining items...\n              </mat-chip-row>\n            }\n          </mat-chip-set>\n        </p>\n      }\n      @if (comparisonValueListParseResult.error) {\n        <mat-error class=\"error\">\n          <mat-icon>warning</mat-icon>\n          <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n      }\n    </div>\n  }\n  @if (listValueFormArray.touched && listValueFormArray.invalid && listValueFormArray.errors) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>{{ FormHelper.getErrorMessage(listValueFormArray) }}</span>\n    </mat-error>\n  }\n  @if (!valueChanged && listValueFormArray.touched && listValueFormArray.invalid) {\n    <mat-error class=\"error\">\n      <mat-icon>warning</mat-icon>\n      <span>Invalid items.&nbsp;</span>\n      <div>\n        @if (visualizationType !== VisualizationType.Table || (paginator?.getNumberOfPages() ?? 0) > 1) {\n          <button type=\"button\" mat-stroked-button color=\"primary\" class=\"jump\" (click)=\"focusInvalid()\">\n            Jump to fix\n          </button>\n        }\n      </div>\n    </mat-error>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-bottom:10px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:var(--input-outline-focused-color)}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:var(--diabled-button-color)}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .actions{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.container .error{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.container .error{margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}\n"] }]
         }], propDecorators: { paginator: [{ type: i0.ViewChild, args: ["paginator", { isSignal: true }] }] } });
 
 class ListValueErrorStateMatcher {
@@ -5216,6 +5273,11 @@ class UserConditionComponent {
                 this.formGroup().controls.comparisonValue.updateValueAndValidity();
                 this.formGroup().controls.comparisonValue.markAllAsTouched();
                 this.formGroup().controls.comparisonValue.markAsDirty();
+                // As we are overriding the control that is used in a @for,
+                // the change detection cannot detect it, so we have to call .detectChanges() on it.
+                // The chips were not updated without this .detectChanges().
+                // When we switch to signal forms in angular, this can be probably removed.
+                this.changeDetectorRef.detectChanges();
             }
         });
     }
@@ -5314,7 +5376,7 @@ class UserConditionComponent {
         return !compVal.doubleValue && !compVal.listValue && !compVal.stringValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: UserConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          appPastedDataTrimmer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: UserConditionComponent, decorators: [{
             type: Component,
@@ -5349,7 +5411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SlicePipe,
                         KeyValuePipe,
                         MatDivider,
-                    ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"] }]
+                        PastedDataTrimmerDirective,
+                    ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          appPastedDataTrimmer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], matChipGrid: [{ type: i0.ViewChild, args: ["chipGrid", { isSignal: true }] }] } });
 
 class ConditionsComponent {
@@ -6115,7 +6178,7 @@ class FeatureFlagComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n  <div class=\"wrapper\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n      <div class=\"expandcollapse\">\n        @if (flagStateValue.panelExpanded) {\n          <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_up</mat-icon>\n          </div>\n        } @else {\n          <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_down</mat-icon>\n          </div>\n        }\n      </div>\n      <div class=\"header\">\n        <div class=\"top\">\n          <div class=\"left\">\n            <div class=\"name-key\">\n              <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n                {{ flagStateValue.settingValue.setting.name }}\n              </span>\n              @if (showEnvironmentName()) {\n                <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n              }\n              <div class=\"key\">\n                <app-copyable-value\n                  [tooltip]=\"\n                    `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n                  \"\n                  [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n                  [value]=\"flagStateValue.settingValue.setting.key\"\n                  [smallest]=\"true\"\n                  [dark]=\"true\"\n                  [wholeControlCopyable]=\"true\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"line\">\n              @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n                <button\n                  type=\"button\"\n                  class=\"prereq-button\"\n                  mat-icon-button\n                  [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                  [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n                  (click)=\"openDependeesDialog()\">\n                  <mat-icon>account_tree</mat-icon>\n                </button>\n              }\n              <button\n                type=\"button\"\n                class=\"more-button\"\n                mat-icon-button\n                matTooltip=\"More\"\n                [matMenuTriggerFor]=\"moreMenu\"\n                [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"description-container\">\n          <div class=\"description-tags\">\n            @if (flagStateValue.settingValue.setting.hint) {\n              <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n                {{ flagStateValue.settingValue.setting.hint }}\n              </div>\n            }\n\n            @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n              <app-feature-flag-value\n                class=\"glance\"\n                tooltip=\"Served value\"\n                [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n                [setting]=\"flagStateValue.settingValue.setting\"\n                [formGroup]=\"formGroup().controls.defaultValue\"\n                [featureFlagLimitations]=\"featureFlagLimitations()\"\n                [canCreateOrUpdateSetting]=\"true\"\n                (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n            }\n\n            @if (getGlance(); as glance) {\n              <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n                <div class=\"container\" [ngClass]=\"glance.class\">\n                  @if (glance.percentageText) {\n                    <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n                  }\n                  @if (glance.ruleText) {\n                    <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (flagStateValue.panelExpanded) {\n        <div class=\"eval-formula-wrapper\">\n          <app-evaluation-formula\n            [formGroup]=\"formGroup()\"\n            [flagState]=\"flagStateValue\"\n            [segments]=\"segments()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\"\n            [canManageSegments]=\"false\"\n            [canCreateOrUpdateSetting]=\"true\"\n            [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n            (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n            (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n            (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n            (recalcAddButtons)=\"recalcAddButtons.emit()\"\n            (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n  <div\n    mat-menu-item\n    data-robot=\"history\"\n    [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n    [disabled]=\"flagStateValue.readOnly\"\n    (click)=\"changePercentageEvaluationAttribute()\">\n    <mat-icon>percent</mat-icon>\n    <span>Change percentage attribute</span>\n  </div>\n  <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n    <div mat-menu-item data-robot=\"history\">\n      <mat-icon>open_in_new</mat-icon>\n      <span>Open in ConfigCat</span>\n    </div>\n  </a>\n  <div\n    mat-menu-item\n    data-robot=\"renameSetting\"\n    [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n    (click)=\"copyDirectLink()\">\n    <mat-icon>content_copy</mat-icon>\n    <span>Copy direct link</span>\n  </div>\n  @if (canDeleteSetting()) {\n    <div>\n      <mat-divider />\n      <div\n        mat-menu-item\n        data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n        (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{ deleteSettingText() }}</span>\n      </div>\n    </div>\n  }\n  @if (predefinedVariationsEnabled()) {\n    @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n      <mat-divider />\n      <div\n        mat-menu-item\n        [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n        (click)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\n        <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n        <span>Manage predefined variations</span>\n        <!-- @if (permissions().canCreateOrUpdateSetting) {\n          <span>Manage predefined variations</span>\n        } @else {\n          <span>View predefined variations</span>\n        } -->\n      </div>\n    }\n  }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:relative;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n  <div class=\"wrapper\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n      <div class=\"expandcollapse\">\n        @if (flagStateValue.panelExpanded) {\n          <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_up</mat-icon>\n          </div>\n        } @else {\n          <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_down</mat-icon>\n          </div>\n        }\n      </div>\n      <div class=\"header\">\n        <div class=\"top\">\n          <div class=\"left\">\n            <div class=\"name-key\">\n              <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n                {{ flagStateValue.settingValue.setting.name }}\n              </span>\n              @if (showEnvironmentName()) {\n                <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n              }\n              <div class=\"key\">\n                <app-copyable-value\n                  [tooltip]=\"\n                    `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n                  \"\n                  [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n                  [value]=\"flagStateValue.settingValue.setting.key\"\n                  [smallest]=\"true\"\n                  [dark]=\"true\"\n                  [wholeControlCopyable]=\"true\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"line\">\n              @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n                <button\n                  type=\"button\"\n                  class=\"prereq-button\"\n                  mat-icon-button\n                  [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                  [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n                  (click)=\"openDependeesDialog()\">\n                  <mat-icon>account_tree</mat-icon>\n                </button>\n              }\n              <button\n                type=\"button\"\n                class=\"more-button\"\n                mat-icon-button\n                matTooltip=\"More\"\n                [matMenuTriggerFor]=\"moreMenu\"\n                [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"description-container\">\n          <div class=\"description-tags\">\n            @if (flagStateValue.settingValue.setting.hint) {\n              <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n                {{ flagStateValue.settingValue.setting.hint }}\n              </div>\n            }\n\n            @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n              <app-feature-flag-value\n                class=\"glance\"\n                tooltip=\"Served value\"\n                [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n                [setting]=\"flagStateValue.settingValue.setting\"\n                [formGroup]=\"formGroup().controls.defaultValue\"\n                [featureFlagLimitations]=\"featureFlagLimitations()\"\n                [canCreateOrUpdateSetting]=\"true\"\n                (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n            }\n\n            @if (getGlance(); as glance) {\n              <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n                <div class=\"container\" [ngClass]=\"glance.class\">\n                  @if (glance.percentageText) {\n                    <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n                  }\n                  @if (glance.ruleText) {\n                    <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (flagStateValue.panelExpanded) {\n        <div class=\"eval-formula-wrapper\">\n          <app-evaluation-formula\n            [formGroup]=\"formGroup()\"\n            [flagState]=\"flagStateValue\"\n            [segments]=\"segments()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\"\n            [canManageSegments]=\"false\"\n            [canCreateOrUpdateSetting]=\"true\"\n            [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n            (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n            (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n            (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n            (recalcAddButtons)=\"recalcAddButtons.emit()\"\n            (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n  <div\n    mat-menu-item\n    data-robot=\"history\"\n    [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n    [disabled]=\"flagStateValue.readOnly\"\n    (click)=\"changePercentageEvaluationAttribute()\">\n    <mat-icon>percent</mat-icon>\n    <span>Change percentage attribute</span>\n  </div>\n  <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n    <div mat-menu-item data-robot=\"history\">\n      <mat-icon>open_in_new</mat-icon>\n      <span>Open in ConfigCat</span>\n    </div>\n  </a>\n  <div\n    mat-menu-item\n    data-robot=\"renameSetting\"\n    [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n    (click)=\"copyDirectLink()\">\n    <mat-icon>content_copy</mat-icon>\n    <span>Copy direct link</span>\n  </div>\n  @if (canDeleteSetting()) {\n    <div>\n      <mat-divider />\n      <div\n        mat-menu-item\n        data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n        (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{ deleteSettingText() }}</span>\n      </div>\n    </div>\n  }\n  @if (predefinedVariationsEnabled()) {\n    @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n      <mat-divider />\n      <div\n        mat-menu-item\n        [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n        (click)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\n        <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n        <span>Manage predefined variations</span>\n        <!-- @if (permissions().canCreateOrUpdateSetting) {\n          <span>Manage predefined variations</span>\n        } @else {\n          <span>View predefined variations</span>\n        } -->\n      </div>\n    }\n  }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FeatureFlagComponent, decorators: [{
             type: Component,
@@ -6135,7 +6198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         MatMenuItem,
                         MatDivider,
                         CopyableValueComponent,
-                    ], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n  <div class=\"wrapper\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n      <div class=\"expandcollapse\">\n        @if (flagStateValue.panelExpanded) {\n          <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_up</mat-icon>\n          </div>\n        } @else {\n          <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_down</mat-icon>\n          </div>\n        }\n      </div>\n      <div class=\"header\">\n        <div class=\"top\">\n          <div class=\"left\">\n            <div class=\"name-key\">\n              <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n                {{ flagStateValue.settingValue.setting.name }}\n              </span>\n              @if (showEnvironmentName()) {\n                <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n              }\n              <div class=\"key\">\n                <app-copyable-value\n                  [tooltip]=\"\n                    `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n                  \"\n                  [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n                  [value]=\"flagStateValue.settingValue.setting.key\"\n                  [smallest]=\"true\"\n                  [dark]=\"true\"\n                  [wholeControlCopyable]=\"true\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"line\">\n              @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n                <button\n                  type=\"button\"\n                  class=\"prereq-button\"\n                  mat-icon-button\n                  [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                  [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n                  (click)=\"openDependeesDialog()\">\n                  <mat-icon>account_tree</mat-icon>\n                </button>\n              }\n              <button\n                type=\"button\"\n                class=\"more-button\"\n                mat-icon-button\n                matTooltip=\"More\"\n                [matMenuTriggerFor]=\"moreMenu\"\n                [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"description-container\">\n          <div class=\"description-tags\">\n            @if (flagStateValue.settingValue.setting.hint) {\n              <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n                {{ flagStateValue.settingValue.setting.hint }}\n              </div>\n            }\n\n            @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n              <app-feature-flag-value\n                class=\"glance\"\n                tooltip=\"Served value\"\n                [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n                [setting]=\"flagStateValue.settingValue.setting\"\n                [formGroup]=\"formGroup().controls.defaultValue\"\n                [featureFlagLimitations]=\"featureFlagLimitations()\"\n                [canCreateOrUpdateSetting]=\"true\"\n                (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n            }\n\n            @if (getGlance(); as glance) {\n              <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n                <div class=\"container\" [ngClass]=\"glance.class\">\n                  @if (glance.percentageText) {\n                    <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n                  }\n                  @if (glance.ruleText) {\n                    <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (flagStateValue.panelExpanded) {\n        <div class=\"eval-formula-wrapper\">\n          <app-evaluation-formula\n            [formGroup]=\"formGroup()\"\n            [flagState]=\"flagStateValue\"\n            [segments]=\"segments()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\"\n            [canManageSegments]=\"false\"\n            [canCreateOrUpdateSetting]=\"true\"\n            [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n            (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n            (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n            (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n            (recalcAddButtons)=\"recalcAddButtons.emit()\"\n            (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n  <div\n    mat-menu-item\n    data-robot=\"history\"\n    [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n    [disabled]=\"flagStateValue.readOnly\"\n    (click)=\"changePercentageEvaluationAttribute()\">\n    <mat-icon>percent</mat-icon>\n    <span>Change percentage attribute</span>\n  </div>\n  <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n    <div mat-menu-item data-robot=\"history\">\n      <mat-icon>open_in_new</mat-icon>\n      <span>Open in ConfigCat</span>\n    </div>\n  </a>\n  <div\n    mat-menu-item\n    data-robot=\"renameSetting\"\n    [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n    (click)=\"copyDirectLink()\">\n    <mat-icon>content_copy</mat-icon>\n    <span>Copy direct link</span>\n  </div>\n  @if (canDeleteSetting()) {\n    <div>\n      <mat-divider />\n      <div\n        mat-menu-item\n        data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n        (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{ deleteSettingText() }}</span>\n      </div>\n    </div>\n  }\n  @if (predefinedVariationsEnabled()) {\n    @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n      <mat-divider />\n      <div\n        mat-menu-item\n        [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n        (click)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\n        <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n        <span>Manage predefined variations</span>\n        <!-- @if (permissions().canCreateOrUpdateSetting) {\n          <span>Manage predefined variations</span>\n        } @else {\n          <span>View predefined variations</span>\n        } -->\n      </div>\n    }\n  }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:relative;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
+                    ], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n  <div class=\"wrapper\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n      <div class=\"expandcollapse\">\n        @if (flagStateValue.panelExpanded) {\n          <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_up</mat-icon>\n          </div>\n        } @else {\n          <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n            <mat-icon>arrow_drop_down</mat-icon>\n          </div>\n        }\n      </div>\n      <div class=\"header\">\n        <div class=\"top\">\n          <div class=\"left\">\n            <div class=\"name-key\">\n              <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n                {{ flagStateValue.settingValue.setting.name }}\n              </span>\n              @if (showEnvironmentName()) {\n                <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n              }\n              <div class=\"key\">\n                <app-copyable-value\n                  [tooltip]=\"\n                    `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n                  \"\n                  [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n                  [value]=\"flagStateValue.settingValue.setting.key\"\n                  [smallest]=\"true\"\n                  [dark]=\"true\"\n                  [wholeControlCopyable]=\"true\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"line\">\n              @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n                <button\n                  type=\"button\"\n                  class=\"prereq-button\"\n                  mat-icon-button\n                  [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                  [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n                  (click)=\"openDependeesDialog()\">\n                  <mat-icon>account_tree</mat-icon>\n                </button>\n              }\n              <button\n                type=\"button\"\n                class=\"more-button\"\n                mat-icon-button\n                matTooltip=\"More\"\n                [matMenuTriggerFor]=\"moreMenu\"\n                [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"description-container\">\n          <div class=\"description-tags\">\n            @if (flagStateValue.settingValue.setting.hint) {\n              <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n                {{ flagStateValue.settingValue.setting.hint }}\n              </div>\n            }\n\n            @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n              <app-feature-flag-value\n                class=\"glance\"\n                tooltip=\"Served value\"\n                [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n                [setting]=\"flagStateValue.settingValue.setting\"\n                [formGroup]=\"formGroup().controls.defaultValue\"\n                [featureFlagLimitations]=\"featureFlagLimitations()\"\n                [canCreateOrUpdateSetting]=\"true\"\n                (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n            }\n\n            @if (getGlance(); as glance) {\n              <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n                <div class=\"container\" [ngClass]=\"glance.class\">\n                  @if (glance.percentageText) {\n                    <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n                  }\n                  @if (glance.ruleText) {\n                    <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (flagStateValue.panelExpanded) {\n        <div class=\"eval-formula-wrapper\">\n          <app-evaluation-formula\n            [formGroup]=\"formGroup()\"\n            [flagState]=\"flagStateValue\"\n            [segments]=\"segments()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\"\n            [canManageSegments]=\"false\"\n            [canCreateOrUpdateSetting]=\"true\"\n            [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n            (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n            (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n            (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n            (recalcAddButtons)=\"recalcAddButtons.emit()\"\n            (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n  <div\n    mat-menu-item\n    data-robot=\"history\"\n    [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n    [disabled]=\"flagStateValue.readOnly\"\n    (click)=\"changePercentageEvaluationAttribute()\">\n    <mat-icon>percent</mat-icon>\n    <span>Change percentage attribute</span>\n  </div>\n  <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n    <div mat-menu-item data-robot=\"history\">\n      <mat-icon>open_in_new</mat-icon>\n      <span>Open in ConfigCat</span>\n    </div>\n  </a>\n  <div\n    mat-menu-item\n    data-robot=\"renameSetting\"\n    [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n    (click)=\"copyDirectLink()\">\n    <mat-icon>content_copy</mat-icon>\n    <span>Copy direct link</span>\n  </div>\n  @if (canDeleteSetting()) {\n    <div>\n      <mat-divider />\n      <div\n        mat-menu-item\n        data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n        (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{ deleteSettingText() }}</span>\n      </div>\n    </div>\n  }\n  @if (predefinedVariationsEnabled()) {\n    @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n      <mat-divider />\n      <div\n        mat-menu-item\n        [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n        (click)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\n        <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n        <span>Manage predefined variations</span>\n        <!-- @if (permissions().canCreateOrUpdateSetting) {\n          <span>Manage predefined variations</span>\n        } @else {\n          <span>View predefined variations</span>\n        } -->\n      </div>\n    }\n  }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
         }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], hasOtherEnvironment: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOtherEnvironment", required: true }] }], environmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentName", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], predefinedVariationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "predefinedVariationsEnabled", required: true }] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], expandedChanged: [{ type: i0.Output, args: ["expandedChanged"] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], recalcAddButtons: [{ type: i0.Output, args: ["recalcAddButtons"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
 
 class FeatureFlagItemComponent extends BaseComponent {