ng-configcat-publicapi-ui 5.6.4 → 5.6.6

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

@@ -1,30 +1,30 @@
 import { OVERLAY_DEFAULT_CONFIG, Overlay } from '@angular/cdk/overlay';
 import { DatePipe, NgClass, NgTemplateOutlet, SlicePipe, KeyValuePipe } from '@angular/common';
+import { HttpErrorResponse, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, ChangeDetectionStrategy, Component, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, signal, computed, viewChildren, linkedSignal, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Injectable, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, signal, computed, viewChildren, linkedSignal, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepicker, MatDatepickerToggle, MatDatepickerInput } from '@angular/material/datepicker';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
+import { MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle } from '@angular/material/dialog';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormField, MatLabel, MatError, MatHint, MatSuffix, MatPrefix } from '@angular/material/form-field';
 import { MAT_MENU_SCROLL_STRATEGY, MatMenuTrigger, MatMenu, MatMenuContent, MatMenuItem } from '@angular/material/menu';
 import { MAT_SELECT_CONFIG, MAT_SELECT_SCROLL_STRATEGY, MatSelect, MatSelectTrigger, MatOption as MatOption$1 } from '@angular/material/select';
 import { MAT_TIMEPICKER_SCROLL_STRATEGY, MatTimepicker, MatTimepickerInput, MatTimepickerToggle } from '@angular/material/timepicker';
 import { MAT_TOOLTIP_DEFAULT_OPTIONS, MAT_TOOLTIP_SCROLL_STRATEGY, MatTooltip } from '@angular/material/tooltip';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { throwError, timer, Subject, forkJoin, of, tap, catchError as catchError$1, distinctUntilChanged } from 'rxjs';
+import { retry, catchError, map } from 'rxjs/operators';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatButton, MatIconButton } from '@angular/material/button';
 import { MeService, Configuration, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, OrganizationsService, ChangeRequestsApprovalFlowScheduledChangesBetaService, UserComparator, SettingType, PrerequisiteComparator, SegmentComparator, RolloutRuleComparator, EvaluationVersion } from 'ng-configcat-publicapi';
 import * as i1 from '@angular/forms';
 import { FormArray, Validators, FormGroup, FormControl, FormBuilder, NonNullableFormBuilder, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { NativeDateAdapter, MatOption, DateAdapter, MatRipple, MatOptgroup } from '@angular/material/core';
-import { CdkScrollable } from '@angular/cdk/scrolling';
-import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatSnackBarRef, MAT_SNACK_BAR_DATA, MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel, MatSnackBar } from '@angular/material/snack-bar';
 import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
-import { timer, Subject, forkJoin, of, tap, catchError as catchError$1, distinctUntilChanged, throwError } from 'rxjs';
 import Papa from 'papaparse';
 import { valid } from 'semver';
-import { map, catchError } from 'rxjs/operators';
 import * as i2 from '@rxweb/reactive-form-validators';
 import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';
 import { Router } from '@angular/router';
@@ -45,6 +45,56 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
 import { MatPaginator } from '@angular/material/paginator';
 
+class RateLimitDialogComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RateLimitDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: RateLimitDialogComponent, isStandalone: true, selector: "app-rate-limit-dialog", ngImport: i0, template: "<div mat-dialog-content class=\"content\">\n  <p>You've reached the rate limit of this operation, please try again in a few minutes.</p>\n  <p>\n    If this issue persists, please\n    <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">tell us what happened.</a>\n  </p>\n</div>\n<div class=\"buttons\" mat-dialog-actions>\n  <button type=\"button\" mat-button mat-flat-button color=\"primary\" [mat-dialog-close]>Close</button>\n</div>\n", styles: [".content{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RateLimitDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-rate-limit-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose], template: "<div mat-dialog-content class=\"content\">\n  <p>You've reached the rate limit of this operation, please try again in a few minutes.</p>\n  <p>\n    If this issue persists, please\n    <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">tell us what happened.</a>\n  </p>\n</div>\n<div class=\"buttons\" mat-dialog-actions>\n  <button type=\"button\" mat-button mat-flat-button color=\"primary\" [mat-dialog-close]>Close</button>\n</div>\n", styles: [".content{display:flex;flex-direction:column}\n"] }]
+        }] });
+
+const MAX_RETRIES = 2;
+class TooManyRequestInterceptor {
+    constructor() {
+        this.dialog = inject(MatDialog);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    intercept(req, next) {
+        return next.handle(req).pipe(retry({
+            count: MAX_RETRIES,
+            delay: (error) => {
+                if (!(error instanceof HttpErrorResponse) || error.status !== 429) {
+                    return throwError(() => error);
+                }
+                const retryAfter = error.headers.get("Retry-After");
+                // Retry-After is either delta-seconds or an HTTP date
+                const delayMs = retryAfter
+                    ? isNaN(Number(retryAfter))
+                        ? Math.max(0, new Date(retryAfter).getTime() - Date.now())
+                        : parseInt(retryAfter, 10) * 1000
+                    : 0;
+                if (delayMs > 2000) {
+                    return throwError(() => error);
+                }
+                console.log(`Retrying request after ${delayMs} ms due to 429 Too Many Requests.`);
+                return timer(delayMs);
+            },
+        }), catchError((error) => {
+            if (!(error instanceof HttpErrorResponse) || error.status !== 429) {
+                return throwError(() => error);
+            }
+            this.dialog.open(RateLimitDialogComponent, { width: "400px" });
+            return throwError(() => error);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooManyRequestInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooManyRequestInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooManyRequestInterceptor, decorators: [{
+            type: Injectable
+        }] });
+
 const defaultPublicApiBasePath = "https://api.configcat.com";
 const defaultDashboardBasePath = "https://app.configcat.com";
 class PublicApiService {
@@ -128,9 +178,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             type: Injectable
         }] });
 
-const percentageRegex = "^[0-9]*$";
-const wholeNumberRegex = "^[-+]?[0-9]\\d*$";
-const featureFlagKeyRegex = "^[a-zA-Z]+[a-zA-Z0-9_-]*$";
+// NOTE: In the following cases, we can't directly use `RegExp` objects because we need to check against them
+// in `getErrorMessage`, which only works for strings.
+const percentageRegex = /^\d{1,3}$/.source;
+const wholeNumberRegex = /^[-+]?\d+$/.source;
+const featureFlagKeyRegex = /^[a-zA-Z][a-zA-Z0-9_-]*$/.source;
 const defaultErrorMessageTypes = [
     "email",
     "compare",
@@ -279,7 +331,7 @@ class FormHelper {
                 return "The percentage value must be a whole number.";
             }
             if (patternError.requiredPattern === wholeNumberRegex) {
-                return "Please enter a whole number e.g. 42.";
+                return "Please enter a whole number (e.g., 42).";
             }
             if (patternError.requiredPattern === featureFlagKeyRegex) {
                 return "Invalid key. Keys must start with a letter, followed by a combination of numbers, letters, underscores and hyphens.";
@@ -1536,6 +1588,11 @@ function provideConfigCatPublicApiUi() {
             provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
             useValue: { hideSingleSelectionIndicator: true, hideMultipleSelectionIndicator: true },
         },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: TooManyRequestInterceptor,
+            multi: true,
+        },
         { provide: DatePipe },
         AppDateAdapter,
         MessagingService,
@@ -1718,250 +1775,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                     ], template: "<h1 mat-dialog-title>Add notes</h1>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <div mat-dialog-content class=\"container\">\n    <p>This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).</p>\n    <mat-form-field appearance=\"outline\">\n      <mat-label>Note</mat-label>\n      <textarea\n        matInput\n        formControlName=\"reason\"\n        name=\"reason\"\n        placeholder=\"I'm changing the values because...\"\n        rows=\"3\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"3\"></textarea>\n      @if (formGroup.controls.reason.invalid) {\n        <mat-error>The field is required.</mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">Add notes & Save</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>\n", styles: [".container>*{width:100%}\n"] }]
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class DigitOnlyDirective {
-    constructor() {
-        this.el = inject(ElementRef);
-        this.document = inject(DOCUMENT);
-        this.hasDecimalPoint = false;
-        this.hasNegativeSign = false;
-        this.navigationKeys = [
-            "Backspace",
-            "Delete",
-            "Tab",
-            "Escape",
-            "Enter",
-            "Home",
-            "End",
-            "ArrowLeft",
-            "ArrowRight",
-            "Clear",
-            "Copy",
-            "Paste",
-        ];
-        this.digitOnlyDecimal = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "digitOnlyDecimal" }] : /* istanbul ignore next */ []));
-        this.digitOnlyDecimalSeparator = input(".", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "digitOnlyDecimalSeparator" }] : /* istanbul ignore next */ []));
-        this.digitOnlyAllowNegatives = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "digitOnlyAllowNegatives" }] : /* istanbul ignore next */ []));
-        this.digitOnlyAllowPaste = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "digitOnlyAllowPaste" }] : /* istanbul ignore next */ []));
-        this.digitOnlyNegativeSign = input("-", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "digitOnlyNegativeSign" }] : /* istanbul ignore next */ []));
-        this.digitOnlyMin = -Infinity;
-        this.digitOnlyMax = Infinity;
-        const el = this.el;
-        this.inputElement = el.nativeElement;
-    }
-    onBeforeInput(e) {
-        if (isNaN(Number(e.data))) {
-            if (e.data === this.digitOnlyDecimalSeparator()
-                || (e.data === this.digitOnlyNegativeSign() && this.digitOnlyAllowNegatives())) {
-                return; // go on
-            }
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-    onKeyDown(e) {
-        if (this.navigationKeys.includes(e.key) // Allow: navigation keys: backspace, delete, arrows etc.
-            || ((e.key === "a" || e.code === "KeyA") && e.ctrlKey) // Allow: Ctrl+A
-            || ((e.key === "c" || e.code === "KeyC") && e.ctrlKey) // Allow: Ctrl+C
-            || ((e.key === "v" || e.code === "KeyV") && e.ctrlKey) // Allow: Ctrl+V
-            || ((e.key === "x" || e.code === "KeyX") && e.ctrlKey) // Allow: Ctrl+X
-            || ((e.key === "a" || e.code === "KeyA") && e.metaKey) // Allow: Cmd+A (Mac)
-            || ((e.key === "c" || e.code === "KeyC") && e.metaKey) // Allow: Cmd+C (Mac)
-            || ((e.key === "v" || e.code === "KeyV") && e.metaKey) // Allow: Cmd+V (Mac)
-            || ((e.key === "x" || e.code === "KeyX") && e.metaKey) // Allow: Cmd+X (Mac)
-        ) {
-            // let it happen, don't do anything
-            return;
-        }
-        let newValue = "";
-        const digitOnlyDecimalSeparator = this.digitOnlyDecimalSeparator();
-        if (this.digitOnlyDecimal() && e.key === digitOnlyDecimalSeparator) {
-            newValue = this.forecastValue(e.key);
-            if (newValue.split(digitOnlyDecimalSeparator).length > 2) {
-                // has two or more decimal points
-                e.preventDefault();
-                return;
-            }
-            else {
-                this.hasDecimalPoint = newValue.includes(digitOnlyDecimalSeparator);
-                return; // Allow: only one decimal point
-            }
-        }
-        const digitOnlyNegativeSign = this.digitOnlyNegativeSign();
-        if (e.key === digitOnlyNegativeSign && this.digitOnlyAllowNegatives()) {
-            newValue = this.forecastValue(e.key);
-            if (!newValue.startsWith(digitOnlyNegativeSign) || newValue.split(digitOnlyNegativeSign).length > 2) {
-                e.preventDefault();
-                return;
-            }
-            else {
-                this.hasNegativeSign = newValue.split(digitOnlyNegativeSign).length > -1;
-                return;
-            }
-        }
-        // Ensure that it is a number and stop the keypress
-        if (e.key === " " || isNaN(Number(e.key))) {
-            e.preventDefault();
-            return;
-        }
-        newValue = newValue || this.forecastValue(e.key);
-        const newNumber = Number(newValue);
-        if (newNumber > this.digitOnlyMax || newNumber < this.digitOnlyMin) {
-            e.preventDefault();
-        }
-    }
-    onPaste(event) {
-        if (this.digitOnlyAllowPaste()) {
-            let pastedInput = "";
-            if (this.document.defaultView.clipboardData) {
-                // Browser is IE
-                pastedInput = this.document.defaultView.clipboardData.getData("text");
-            }
-            else if (event.clipboardData?.getData) {
-                // Other browsers
-                pastedInput = event.clipboardData.getData("text/plain");
-            }
-            this.pasteData(pastedInput);
-            event.preventDefault();
-        }
-        else {
-            // this prevents the paste
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    onDrop(event) {
-        const textData = event.dataTransfer?.getData("text") ?? "";
-        this.inputElement.focus();
-        this.pasteData(textData);
-        event.preventDefault();
-    }
-    pasteData(pastedContent) {
-        const sanitizedContent = this.sanitizeInput(pastedContent);
-        const digitOnlyNegativeSign = this.digitOnlyNegativeSign();
-        if (sanitizedContent.includes(digitOnlyNegativeSign)
-            && this.hasNegativeSign
-            && !this.getSelection().includes(digitOnlyNegativeSign)) {
-            return;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-deprecated, sonarjs/deprecation
-        const pasted = document.execCommand("insertText", false, sanitizedContent);
-        if (!pasted) {
-            if (this.inputElement.setRangeText) {
-                const { selectionStart: start, selectionEnd: end } = this.inputElement;
-                this.inputElement.setRangeText(sanitizedContent, start ?? 0, end ?? 0, "end");
-                // Angular's Reactive Form relies on "input" event, but on Firefox, the setRangeText method doesn't trigger it
-                // so we have to trigger it ourself.
-                if (typeof window["InstallTrigger"] !== "undefined") {
-                    this.inputElement.dispatchEvent(new Event("input", { cancelable: true }));
-                }
-            }
-            else {
-                // Browser does not support setRangeText, e.g. IE
-                this.insertAtCursor(this.inputElement, sanitizedContent);
-            }
-        }
-        if (this.digitOnlyDecimal()) {
-            this.hasDecimalPoint = this.inputElement.value.includes(this.digitOnlyDecimalSeparator());
-        }
-        this.hasNegativeSign = this.inputElement.value.includes(digitOnlyNegativeSign);
-    }
-    // The following 2 methods were added from the below article for browsers that do not support setRangeText
-    // https://stackoverflow.com/questions/11076975/how-to-insert-text-into-the-textarea-at-the-current-cursor-position
-    insertAtCursor(myField, myValue) {
-        const startPos = myField.selectionStart ?? 0;
-        const endPos = myField.selectionEnd ?? 0;
-        myField.value =
-            myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
-        const pos = startPos + myValue.length;
-        myField.focus();
-        myField.setSelectionRange(pos, pos);
-        this.triggerEvent(myField, "input");
-    }
-    triggerEvent(el, type) {
-        if ("createEvent" in document) {
-            // modern browsers, IE9+
-            const e = document.createEvent("HTMLEvents");
-            // eslint-disable-next-line @typescript-eslint/no-deprecated, sonarjs/deprecation
-            e.initEvent(type, false, true);
-            el.dispatchEvent(e);
-        }
-    }
-    // end stack overflow code
-    sanitizeInput(input) {
-        let result = "";
-        let regex;
-        if (this.digitOnlyDecimal() && this.isValidDecimal(input)) {
-            regex = new RegExp(`${this.getNegativeSignRegExp()}[^0-9${this.digitOnlyDecimalSeparator()}]`, "g");
-        }
-        else {
-            regex = new RegExp(`${this.getNegativeSignRegExp()}[^0-9]`, "g");
-        }
-        result = input.replace(regex, "");
-        const maxLength = this.inputElement.maxLength;
-        if (maxLength > 0) {
-            // the input element has maxLength limit
-            const allowedLength = maxLength - this.inputElement.value.length + (result.includes(this.digitOnlyNegativeSign()) ? 1 : 0);
-            result = allowedLength > 0 ? result.substring(0, allowedLength) : "";
-        }
-        return result;
-    }
-    getNegativeSignRegExp() {
-        const digitOnlyNegativeSign = this.digitOnlyNegativeSign();
-        return this.digitOnlyAllowNegatives()
-            && (!this.hasNegativeSign || this.getSelection().includes(digitOnlyNegativeSign))
-            ? `(?!^${digitOnlyNegativeSign})`
-            : "";
-    }
-    isValidDecimal(string) {
-        if (!this.hasDecimalPoint) {
-            return string.split(this.digitOnlyDecimalSeparator()).length <= 2;
-        }
-        else {
-            // the input element already has a decimal separator
-            const selectedText = this.getSelection();
-            if (selectedText.includes(this.digitOnlyDecimalSeparator())) {
-                return string.split(this.digitOnlyDecimalSeparator()).length <= 2;
-            }
-            else {
-                return !string.includes(this.digitOnlyDecimalSeparator());
-            }
-        }
-    }
-    getSelection() {
-        return this.inputElement.value.substring(this.inputElement.selectionStart ?? 0, this.inputElement.selectionEnd ?? 0);
-    }
-    forecastValue(key) {
-        const selectionStart = this.inputElement.selectionStart ?? 0;
-        const selectionEnd = this.inputElement.selectionEnd ?? 0;
-        const oldValue = this.inputElement.value;
-        return oldValue.substring(0, selectionStart) + key + oldValue.substring(selectionEnd);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DigitOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: DigitOnlyDirective, isStandalone: true, selector: "[appDigitOnly]", inputs: { digitOnlyDecimal: { classPropertyName: "digitOnlyDecimal", publicName: "digitOnlyDecimal", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyDecimalSeparator: { classPropertyName: "digitOnlyDecimalSeparator", publicName: "digitOnlyDecimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyAllowNegatives: { classPropertyName: "digitOnlyAllowNegatives", publicName: "digitOnlyAllowNegatives", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyAllowPaste: { classPropertyName: "digitOnlyAllowPaste", publicName: "digitOnlyAllowPaste", isSignal: true, isRequired: false, transformFunction: null }, digitOnlyNegativeSign: { classPropertyName: "digitOnlyNegativeSign", publicName: "digitOnlyNegativeSign", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "beforeinput": "onBeforeInput($event)", "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DigitOnlyDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: "[appDigitOnly]" }]
-        }], ctorParameters: () => [], propDecorators: { digitOnlyDecimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyDecimal", required: false }] }], digitOnlyDecimalSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyDecimalSeparator", required: false }] }], digitOnlyAllowNegatives: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyAllowNegatives", required: false }] }], digitOnlyAllowPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyAllowPaste", required: false }] }], digitOnlyNegativeSign: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitOnlyNegativeSign", required: false }] }], onBeforeInput: [{
-                type: HostListener,
-                args: ["beforeinput", ["$event"]]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ["keydown", ["$event"]]
-            }], onPaste: [{
-                type: HostListener,
-                args: ["paste", ["$event"]]
-            }], onDrop: [{
-                type: HostListener,
-                args: ["drop", ["$event"]]
-            }] } });
-
 class AutofocusDirective {
     constructor() {
         this.host = inject((ElementRef));
@@ -2222,7 +2035,7 @@ class ValueComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ValueComponent, isStandalone: true, selector: "app-value", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n  <div class=\"container\">\n    @switch (setting().settingType) {\n      @case (SettingType.String) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"text\"\n            placeholder=\"my value\"\n            name=\"value\"\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n          <div class=\"expand\" matTooltip=\"Pop-out editor\" (click)=\"popOut()\">\n            <mat-icon>height</mat-icon>\n          </div>\n        </div>\n      }\n      @case (SettingType.Int) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"42\"\n            name=\"value\"\n            appDigitOnly\n            [digitOnlyAllowNegatives]=\"true\"\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Double) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"3.14\"\n            name=\"value\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Boolean) {\n        <div class=\"toggle\">\n          <label class=\"switch\">\n            <input type=\"checkbox\" name=\"value\" [formControl]=\"valueFormControl()\" />\n            <span class=\"slider\"></span>\n          </label>\n        </div>\n      }\n    }\n  </div>\n  @if (setting().settingType === SettingType.Boolean) {\n    <div class=\"spacer\"></div>\n  }\n</div>\n", styles: [".switch{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", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:11px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;padding:0 30px 0 5px;min-width:150px;margin:0 3px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.flex .container .invalid{border:1px solid var(--flag-validation-error)}.flex .container .error{color:var(--flag-validation-error);margin-right:5px}.flex .variationId{margin:0 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex;align-items:center}.flex .variationId.bool{margin-left:4px}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.flex .expand mat-icon{transform:rotate(45deg)}.flex .toggle{margin-left:4px}@media(max-width:920px){.flex{margin-right:0!important}.flex .spacer{min-width:1px}}@media(max-width:510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ValueComponent, isStandalone: true, selector: "app-value", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n  <div class=\"container\">\n    @switch (setting().settingType) {\n      @case (SettingType.String) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"text\"\n            placeholder=\"my value\"\n            name=\"value\"\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n          <div class=\"expand\" matTooltip=\"Pop-out editor\" (click)=\"popOut()\">\n            <mat-icon>height</mat-icon>\n          </div>\n        </div>\n      }\n      @case (SettingType.Int) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"42\"\n            name=\"value\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Double) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"3.14\"\n            name=\"value\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Boolean) {\n        <div class=\"toggle\">\n          <label class=\"switch\">\n            <input type=\"checkbox\" name=\"value\" [formControl]=\"valueFormControl()\" />\n            <span class=\"slider\"></span>\n          </label>\n        </div>\n      }\n    }\n  </div>\n  @if (setting().settingType === SettingType.Boolean) {\n    <div class=\"spacer\"></div>\n  }\n</div>\n", styles: [".switch{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", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:11px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;padding:0 30px 0 5px;min-width:150px;margin:0 3px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.flex .container .invalid{border:1px solid var(--flag-validation-error)}.flex .container .error{color:var(--flag-validation-error);margin-right:5px}.flex .variationId{margin:0 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex;align-items:center}.flex .variationId.bool{margin-left:4px}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.flex .expand mat-icon{transform:rotate(45deg)}.flex .toggle{margin-left:4px}@media(max-width:920px){.flex{margin-right:0!important}.flex .spacer{min-width:1px}}@media(max-width:510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ValueComponent, decorators: [{
             type: Component,
@@ -2233,9 +2046,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         RxReactiveFormsModule,
                         MatTooltip,
                         MatIcon,
-                        DigitOnlyDirective,
                         InputDisplayNormalizerDirective,
-                    ], template: "<div class=\"flex\">\n  <div class=\"container\">\n    @switch (setting().settingType) {\n      @case (SettingType.String) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"text\"\n            placeholder=\"my value\"\n            name=\"value\"\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n          <div class=\"expand\" matTooltip=\"Pop-out editor\" (click)=\"popOut()\">\n            <mat-icon>height</mat-icon>\n          </div>\n        </div>\n      }\n      @case (SettingType.Int) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"42\"\n            name=\"value\"\n            appDigitOnly\n            [digitOnlyAllowNegatives]=\"true\"\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Double) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"3.14\"\n            name=\"value\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Boolean) {\n        <div class=\"toggle\">\n          <label class=\"switch\">\n            <input type=\"checkbox\" name=\"value\" [formControl]=\"valueFormControl()\" />\n            <span class=\"slider\"></span>\n          </label>\n        </div>\n      }\n    }\n  </div>\n  @if (setting().settingType === SettingType.Boolean) {\n    <div class=\"spacer\"></div>\n  }\n</div>\n", styles: [".switch{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", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:11px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;padding:0 30px 0 5px;min-width:150px;margin:0 3px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.flex .container .invalid{border:1px solid var(--flag-validation-error)}.flex .container .error{color:var(--flag-validation-error);margin-right:5px}.flex .variationId{margin:0 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex;align-items:center}.flex .variationId.bool{margin-left:4px}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.flex .expand mat-icon{transform:rotate(45deg)}.flex .toggle{margin-left:4px}@media(max-width:920px){.flex{margin-right:0!important}.flex .spacer{min-width:1px}}@media(max-width:510px){.flex .container .error{display:none}}\n"] }]
+                    ], template: "<div class=\"flex\">\n  <div class=\"container\">\n    @switch (setting().settingType) {\n      @case (SettingType.String) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"text\"\n            placeholder=\"my value\"\n            name=\"value\"\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n          <div class=\"expand\" matTooltip=\"Pop-out editor\" (click)=\"popOut()\">\n            <mat-icon>height</mat-icon>\n          </div>\n        </div>\n      }\n      @case (SettingType.Int) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"42\"\n            name=\"value\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Double) {\n        <div class=\"with-validation\">\n          @if (valueFormControl().invalid) {\n            <span class=\"error\">*</span>\n          }\n          <input\n            type=\"number\"\n            placeholder=\"3.14\"\n            name=\"value\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: valueFormControl().invalid }\"\n            [formControl]=\"valueFormControl()\" />\n        </div>\n      }\n      @case (SettingType.Boolean) {\n        <div class=\"toggle\">\n          <label class=\"switch\">\n            <input type=\"checkbox\" name=\"value\" [formControl]=\"valueFormControl()\" />\n            <span class=\"slider\"></span>\n          </label>\n        </div>\n      }\n    }\n  </div>\n  @if (setting().settingType === SettingType.Boolean) {\n    <div class=\"spacer\"></div>\n  }\n</div>\n", styles: [".switch{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", ".flex{display:flex;margin-right:10px;align-items:center}.flex .spacer{min-width:11px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;padding:0 30px 0 5px;min-width:150px;margin:0 3px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.flex .container .invalid{border:1px solid var(--flag-validation-error)}.flex .container .error{color:var(--flag-validation-error);margin-right:5px}.flex .variationId{margin:0 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex;align-items:center}.flex .variationId.bool{margin-left:4px}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:var(--action-icon-button-color)}.flex .expand mat-icon{transform:rotate(45deg)}.flex .toggle{margin-left:4px}@media(max-width:920px){.flex{margin-right:0!important}.flex .spacer{min-width:1px}}@media(max-width:510px){.flex .container .error{display:none}}\n"] }]
         }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }] } });
 
 class RolloutPercentageItemsComponent {
@@ -2288,7 +2100,7 @@ class RolloutPercentageItemsComponent {
         this.updateSum();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: RolloutPercentageItemsComponent, isStandalone: true, selector: "app-rollout-percentage-items", inputs: { settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup()\">\n  @if (formGroup().controls.rolloutRules.controls.length > 0) {\n    <div class=\"if\">\n      <mat-chip-set>\n        <mat-chip class=\"chip\">ELSE IF</mat-chip>\n      </mat-chip-set>\n    </div>\n  }\n  <div class=\"grow\">\n    @for (rolloutPercentageItem of formGroup().controls.rolloutPercentageItems.controls; track $index; let i = $index) {\n      <div class=\"percentage-row flex\">\n        <div class=\"flex\">\n          @if (rolloutPercentageItem.controls.percentage.invalid) {\n            <span class=\"attribute-error\">*</span>\n          }\n          <input\n            type=\"number\"\n            appDigitOnly\n            [ngClass]=\"{ invalid: rolloutPercentageItem.controls.percentage.invalid }\"\n            [formControl]=\"rolloutPercentageItem.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          %\n          <span class=\"users\">\n            of\n            <a href=\"https://configcat.com/docs/V1/advanced/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n              users\n            </a>\n          </span>\n        </div>\n        @if (!readOnly() && formGroup().controls.rolloutPercentageItems.controls.length > 2) {\n          <div class=\"delete-option\" matTooltip=\"Remove this % option\" (click)=\"removeRolloutPercentageItem(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n        @if (\n          i === formGroup().controls.rolloutPercentageItems.controls.length - 1 &&\n          formGroup().controls.rolloutPercentageItemsSum.invalid\n        ) {\n          <span matTooltipPosition=\"above\" matTooltip=\"The sum of percentages must be equal to 100.\">\n            <mat-icon color=\"warn\">error_outline</mat-icon>\n          </span>\n        }\n        <div class=\"value flex\">\n          @if (settingModel().settingType !== SettingType.Boolean) {\n            <span class=\"value-name\">Served value:</span>\n          }\n          <app-value\n            class=\"served-value\"\n            [valueFormControl]=\"value(rolloutPercentageItem)\"\n            [setting]=\"settingModel()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\" />\n        </div>\n        @if (!readOnly()) {\n          <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".percentage-wrapper{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:var(--flag-delete);cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:var(--flag-v1-chip-background)}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.percentage-row .invalid{border:1px solid var(--flag-validation-error)}.attribute-error{color:var(--flag-validation-error);margin:0 5px}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.users{margin-left:20px}@media(max-width:920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media(max-width:650px){.users{margin-left:5px}}@media(max-width:540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: RolloutPercentageItemsComponent, isStandalone: true, selector: "app-rollout-percentage-items", inputs: { settingModel: { classPropertyName: "settingModel", publicName: "settingModel", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup()\">\n  @if (formGroup().controls.rolloutRules.controls.length > 0) {\n    <div class=\"if\">\n      <mat-chip-set>\n        <mat-chip class=\"chip\">ELSE IF</mat-chip>\n      </mat-chip-set>\n    </div>\n  }\n  <div class=\"grow\">\n    @for (rolloutPercentageItem of formGroup().controls.rolloutPercentageItems.controls; track $index; let i = $index) {\n      <div class=\"percentage-row flex\">\n        <div class=\"flex\">\n          @if (rolloutPercentageItem.controls.percentage.invalid) {\n            <span class=\"attribute-error\">*</span>\n          }\n          <input\n            type=\"number\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: rolloutPercentageItem.controls.percentage.invalid }\"\n            [formControl]=\"rolloutPercentageItem.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          %\n          <span class=\"users\">\n            of\n            <a href=\"https://configcat.com/docs/V1/advanced/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n              users\n            </a>\n          </span>\n        </div>\n        @if (!readOnly() && formGroup().controls.rolloutPercentageItems.controls.length > 2) {\n          <div class=\"delete-option\" matTooltip=\"Remove this % option\" (click)=\"removeRolloutPercentageItem(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n        @if (\n          i === formGroup().controls.rolloutPercentageItems.controls.length - 1 &&\n          formGroup().controls.rolloutPercentageItemsSum.invalid\n        ) {\n          <span matTooltipPosition=\"above\" matTooltip=\"The sum of percentages must be equal to 100.\">\n            <mat-icon color=\"warn\">error_outline</mat-icon>\n          </span>\n        }\n        <div class=\"value flex\">\n          @if (settingModel().settingType !== SettingType.Boolean) {\n            <span class=\"value-name\">Served value:</span>\n          }\n          <app-value\n            class=\"served-value\"\n            [valueFormControl]=\"value(rolloutPercentageItem)\"\n            [setting]=\"settingModel()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\" />\n        </div>\n        @if (!readOnly()) {\n          <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".percentage-wrapper{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:var(--flag-delete);cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:var(--flag-v1-chip-background)}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.percentage-row .invalid{border:1px solid var(--flag-validation-error)}.attribute-error{color:var(--flag-validation-error);margin:0 5px}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.users{margin-left:20px}@media(max-width:920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media(max-width:650px){.users{margin-left:5px}}@media(max-width:540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValueComponent, selector: "app-value", inputs: ["valueFormControl", "setting", "featureFlagLimitations"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
             type: Component,
@@ -2298,12 +2110,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         RxReactiveFormsModule,
                         MatChipSet,
                         MatChip,
-                        DigitOnlyDirective,
+                        InputDisplayNormalizerDirective,
                         NgClass,
                         MatTooltip,
                         MatIcon,
                         ValueComponent,
-                    ], template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup()\">\n  @if (formGroup().controls.rolloutRules.controls.length > 0) {\n    <div class=\"if\">\n      <mat-chip-set>\n        <mat-chip class=\"chip\">ELSE IF</mat-chip>\n      </mat-chip-set>\n    </div>\n  }\n  <div class=\"grow\">\n    @for (rolloutPercentageItem of formGroup().controls.rolloutPercentageItems.controls; track $index; let i = $index) {\n      <div class=\"percentage-row flex\">\n        <div class=\"flex\">\n          @if (rolloutPercentageItem.controls.percentage.invalid) {\n            <span class=\"attribute-error\">*</span>\n          }\n          <input\n            type=\"number\"\n            appDigitOnly\n            [ngClass]=\"{ invalid: rolloutPercentageItem.controls.percentage.invalid }\"\n            [formControl]=\"rolloutPercentageItem.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          %\n          <span class=\"users\">\n            of\n            <a href=\"https://configcat.com/docs/V1/advanced/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n              users\n            </a>\n          </span>\n        </div>\n        @if (!readOnly() && formGroup().controls.rolloutPercentageItems.controls.length > 2) {\n          <div class=\"delete-option\" matTooltip=\"Remove this % option\" (click)=\"removeRolloutPercentageItem(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n        @if (\n          i === formGroup().controls.rolloutPercentageItems.controls.length - 1 &&\n          formGroup().controls.rolloutPercentageItemsSum.invalid\n        ) {\n          <span matTooltipPosition=\"above\" matTooltip=\"The sum of percentages must be equal to 100.\">\n            <mat-icon color=\"warn\">error_outline</mat-icon>\n          </span>\n        }\n        <div class=\"value flex\">\n          @if (settingModel().settingType !== SettingType.Boolean) {\n            <span class=\"value-name\">Served value:</span>\n          }\n          <app-value\n            class=\"served-value\"\n            [valueFormControl]=\"value(rolloutPercentageItem)\"\n            [setting]=\"settingModel()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\" />\n        </div>\n        @if (!readOnly()) {\n          <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".percentage-wrapper{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:var(--flag-delete);cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:var(--flag-v1-chip-background)}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.percentage-row .invalid{border:1px solid var(--flag-validation-error)}.attribute-error{color:var(--flag-validation-error);margin:0 5px}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.users{margin-left:20px}@media(max-width:920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media(max-width:650px){.users{margin-left:5px}}@media(max-width:540px){.users{font-size:12px}}\n"] }]
+                    ], template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup()\">\n  @if (formGroup().controls.rolloutRules.controls.length > 0) {\n    <div class=\"if\">\n      <mat-chip-set>\n        <mat-chip class=\"chip\">ELSE IF</mat-chip>\n      </mat-chip-set>\n    </div>\n  }\n  <div class=\"grow\">\n    @for (rolloutPercentageItem of formGroup().controls.rolloutPercentageItems.controls; track $index; let i = $index) {\n      <div class=\"percentage-row flex\">\n        <div class=\"flex\">\n          @if (rolloutPercentageItem.controls.percentage.invalid) {\n            <span class=\"attribute-error\">*</span>\n          }\n          <input\n            type=\"number\"\n            inputDisplayNormalizer\n            [ngClass]=\"{ invalid: rolloutPercentageItem.controls.percentage.invalid }\"\n            [formControl]=\"rolloutPercentageItem.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          %\n          <span class=\"users\">\n            of\n            <a href=\"https://configcat.com/docs/V1/advanced/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n              users\n            </a>\n          </span>\n        </div>\n        @if (!readOnly() && formGroup().controls.rolloutPercentageItems.controls.length > 2) {\n          <div class=\"delete-option\" matTooltip=\"Remove this % option\" (click)=\"removeRolloutPercentageItem(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n        @if (\n          i === formGroup().controls.rolloutPercentageItems.controls.length - 1 &&\n          formGroup().controls.rolloutPercentageItemsSum.invalid\n        ) {\n          <span matTooltipPosition=\"above\" matTooltip=\"The sum of percentages must be equal to 100.\">\n            <mat-icon color=\"warn\">error_outline</mat-icon>\n          </span>\n        }\n        <div class=\"value flex\">\n          @if (settingModel().settingType !== SettingType.Boolean) {\n            <span class=\"value-name\">Served value:</span>\n          }\n          <app-value\n            class=\"served-value\"\n            [valueFormControl]=\"value(rolloutPercentageItem)\"\n            [setting]=\"settingModel()\"\n            [featureFlagLimitations]=\"featureFlagLimitations()\" />\n        </div>\n        @if (!readOnly()) {\n          <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".percentage-wrapper{border:1px solid var(--flag-v1-rule-border);background-color:var(--flag-v1-rule-background);margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:var(--flag-delete-background);height:20px;width:20px;color:var(--flag-delete)}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:var(--flag-v1-colored-berry-opacity)}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:var(--flag-delete);cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:var(--flag-v1-chip-background)}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.percentage-row .invalid{border:1px solid var(--flag-validation-error)}.attribute-error{color:var(--flag-validation-error);margin:0 5px}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto}.value .value-name{display:none}input{background-color:var(--input-background);border:1px solid var(--flag-v1-input-border);min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif}input::placeholder{opacity:var(--flag-v1-input-placeholder-opacity)!important}.users{margin-left:20px}@media(max-width:920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media(max-width:650px){.users{margin-left:5px}}@media(max-width:540px){.users{font-size:12px}}\n"] }]
         }], propDecorators: { settingModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingModel", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
 
 class DeselectDirective {
@@ -2931,6 +2743,7 @@ class SettingItemComponent extends BaseComponent {
         this.loadSucceeded = output();
         this.saveSucceeded = output();
         this.componentError = output();
+        this.loadFailed = output();
         this.formValuesChanged = output();
         this.loadSettingValues = () => {
             return this.createSettingValuesService()
@@ -2946,7 +2759,7 @@ class SettingItemComponent extends BaseComponent {
                 };
                 return settingValues;
             }), catchError((error) => {
-                this.componentError.emit(error);
+                this.loadFailed.emit(error);
                 throw error;
             }));
         };
@@ -2999,12 +2812,12 @@ class SettingItemComponent extends BaseComponent {
         this.formValuesChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SettingItemComponent, isStandalone: true, selector: "app-setting-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", saveSucceeded: "saveSucceeded", componentError: "componentError", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itemSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "app-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged", "saveFailed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SettingItemComponent, isStandalone: true, selector: "app-setting-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", saveSucceeded: "saveSucceeded", componentError: "componentError", loadFailed: "loadFailed", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itemSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "app-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged", "saveFailed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SettingItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-setting-item", changeDetection: ChangeDetectionStrategy.Eager, imports: [SettingListComponent], template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itemSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], componentError: [{ type: i0.Output, args: ["componentError"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], componentError: [{ type: i0.Output, args: ["componentError"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
 
 class AuthorizationComponent {
     constructor() {
@@ -3484,11 +3297,11 @@ class DeleteSettingDialogComponent {
         this.dialogRef.close({ button: "cancel" });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DeleteSettingDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: DeleteSettingDialogComponent, isStandalone: true, selector: "app-delete-setting-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{ data.system }}</h1>\n<div mat-dialog-actions class=\"container\">\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"remove()\">Remove from {{ data.ticketType }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: DeleteSettingDialogComponent, isStandalone: true, selector: "app-delete-setting-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{ data.system }}?</h1>\n<div mat-dialog-actions class=\"container\">\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"remove()\">Remove from {{ data.ticketType }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DeleteSettingDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-delete-setting-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{ data.system }}</h1>\n<div mat-dialog-actions class=\"container\">\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"remove()\">Remove from {{ data.ticketType }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n</div>\n" }]
+            args: [{ selector: "app-delete-setting-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>Remove Feature Flag or Setting from {{ data.system }}?</h1>\n<div mat-dialog-actions class=\"container\">\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"remove()\">Remove from {{ data.ticketType }}</button>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n</div>\n" }]
         }] });
 
 class TrackingDirective {
@@ -4403,15 +4216,26 @@ class VariationsDialogComponent {
                 value: getPredefinedVariationValueDisplayValue(this.settingType, predefinedVariation.value),
                 disabled: true,
             }),
-            usages: this.formBuilder.array(predefinedVariation.usages
-                .map(u => this.createPredefinedVariationUsageFormGroup(u, environments))
-                .filter(u => u !== null)
-                .sort((a, b) => a.environmentIndex - b.environmentIndex)
-                .map(u => u.formGroup)),
+            usages: this.formBuilder.array([
+                ...predefinedVariation.usages
+                    .map(u => this.createPredefinedVariationUsageFormGroup(u, environments))
+                    .filter(u => u !== null)
+                    .sort((a, b) => a.environmentIndex - b.environmentIndex)
+                    .map(u => u.formGroup),
+                ...predefinedVariation.changeRequestUsages
+                    .map(u => this.createPredefinedVariationChangeRequestUsageFormGroup(u, environments))
+                    .filter(u => u !== null)
+                    .sort((a, b) => a.environmentIndex - b.environmentIndex)
+                    .map(u => u.formGroup),
+            ]),
             usagesInOtherEnvironments: new FormControl({
                 value: predefinedVariation.usagesInOtherEnvironments,
                 disabled: true,
             }, { nonNullable: true }),
+            changeRequestUsagesInOtherEnvironments: new FormControl({
+                value: predefinedVariation.changeRequestUsagesInOtherEnvironments,
+                disabled: true,
+            }, { nonNullable: true }),
             variationId: new FormControl({
                 value: getVariationIdData(this.settingKey, this.settingType, predefinedVariation.value).variationId,
                 disabled: true,
@@ -4456,6 +4280,30 @@ class VariationsDialogComponent {
             environmentIndex: index,
         };
     }
+    createPredefinedVariationChangeRequestUsageFormGroup(usage, environments) {
+        const routerLink = this.getChangeRequestUrl(usage);
+        const index = environments.findIndex(e => e.environmentId === usage.environmentId);
+        if (index === -1)
+            return null;
+        const environment = environments[index];
+        const displayValue = usage.changeRequestTitle + " (" + environment.name + ")";
+        return {
+            formGroup: this.formBuilder.group({
+                routerLink: new FormControl({ value: routerLink, disabled: true }, { nonNullable: true }),
+                displayValue: new FormControl({ value: displayValue, disabled: true }, { nonNullable: true }),
+            }),
+            environmentIndex: index,
+        };
+    }
+    getChangeRequestUrl(usage) {
+        const urlTree = this.router.createUrlTree([
+            "product",
+            this.data.productId,
+            "change-requests",
+            usage.changeRequestId,
+        ]);
+        return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
+    }
     getDashboardUrl(usage) {
         const urlTree = this.router.createUrlTree([
             "v2",
@@ -4519,7 +4367,9 @@ class VariationsDialogComponent {
             hint: null,
             value: this.createEmptyPredefinedVariationValueModel(),
             usages: [],
+            changeRequestUsages: [],
             usagesInOtherEnvironments: 0,
+            changeRequestUsagesInOtherEnvironments: 0,
         }, []);
         this.formGroup.controls.predefinedVariations.push(predefinedVariationFormGroup);
         this.formGroup.controls.predefinedVariations.markAsDirty();
@@ -4587,7 +4437,7 @@ class VariationsDialogComponent {
         return getPredefinedVariationColorIndex(this.settingType, getRawPredefinedVariationValue(row.controls.value), index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VariationsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n  <div mat-dialog-content class=\"content\">\n    <app-loader />\n  </div>\n} @else {\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n    <div class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Served value *</span>\n                <mat-icon\n                  matTooltip=\"Your application will get this value when evaluating the setting.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                @switch (settingType) {\n                  @case (SettingType.Boolean) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.boolValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.String) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.stringValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Int) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.intValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Double) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.doubleValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                }\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Display name (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                  <input\n                    matInput\n                    [formControl]=\"row.controls.name\"\n                    [placeholder]=\"row.controls.valueForComparison.value\" />\n                  @if (row.controls.name.invalid) {\n                    <mat-error class=\"small-error\">\n                      {{ formHelper.getErrorMessage(row.controls.name) }}\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>\n              <div class=\"centered\">\n                <span>Hint (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n                  <input matInput [formControl]=\"row.controls.hint\" />\n                  <button\n                    matSuffix\n                    class=\"input-suffix-button\"\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Advanced editor\"\n                    (click)=\"expandHint(row.controls.hint)\">\n                    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                  </button>\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=\"variationId\">\n            <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"usages\">\n            <th *matHeaderCellDef mat-header-cell>Usages</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"usages\">\n                <button\n                  type=\"button\"\n                  class=\"usage-button\"\n                  mat-icon-button\n                  [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n                  (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n                  @if (row.controls.usagesExpanded.value) {\n                    <mat-icon>expand_less</mat-icon>\n                  } @else {\n                    <mat-icon>expand_more</mat-icon>\n                  }\n                </button>\n                <div>\n                  @if (row.controls.usagesExpanded.value) {\n                    @for (usage of row.controls.usages.controls; track $index) {\n                      <div class=\"usage\">\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    } @else if (row.controls.usages.controls.length === 0) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n                        {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n                        usage{{\n                          row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".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", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .centered{display:flex;align-items:center}.content mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .dialog-table .header-tooltip-icon{font-size:14px;width:14px;height:14px}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: 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: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n  <div mat-dialog-content class=\"content\">\n    <app-loader />\n  </div>\n} @else {\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n    <div class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Served value *</span>\n                <mat-icon\n                  matTooltip=\"Your application will get this value when evaluating the setting.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                @switch (settingType) {\n                  @case (SettingType.Boolean) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.boolValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.String) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.stringValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Int) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.intValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Double) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.doubleValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                }\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Display name (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                  <input\n                    matInput\n                    [formControl]=\"row.controls.name\"\n                    [placeholder]=\"row.controls.valueForComparison.value\" />\n                  @if (row.controls.name.invalid) {\n                    <mat-error class=\"small-error\">\n                      {{ formHelper.getErrorMessage(row.controls.name) }}\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>\n              <div class=\"centered\">\n                <span>Hint (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n                  <input matInput [formControl]=\"row.controls.hint\" />\n                  <button\n                    matSuffix\n                    class=\"input-suffix-button\"\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Advanced editor\"\n                    (click)=\"expandHint(row.controls.hint)\">\n                    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                  </button>\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=\"variationId\">\n            <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"usages\">\n            <th *matHeaderCellDef mat-header-cell>Usages</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"usages\">\n                <button\n                  type=\"button\"\n                  class=\"usage-button\"\n                  mat-icon-button\n                  [disabled]=\"\n                    !row.controls.usages.controls.length &&\n                    !row.controls.usagesInOtherEnvironments.value &&\n                    !row.controls.changeRequestUsagesInOtherEnvironments.value\n                  \"\n                  (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n                  @if (row.controls.usagesExpanded.value) {\n                    <mat-icon>expand_less</mat-icon>\n                  } @else {\n                    <mat-icon>expand_more</mat-icon>\n                  }\n                </button>\n                <div>\n                  @if (row.controls.usagesExpanded.value) {\n                    @for (usage of row.controls.usages.controls; track $index) {\n                      <div class=\"usage\">\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    }\n                    @if (row.controls.changeRequestUsagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.changeRequestUsagesInOtherEnvironments.value }} change request usage{{\n                        row.controls.changeRequestUsagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    }\n\n                    @if (\n                      row.controls.usagesInOtherEnvironments.value === 0 &&\n                      row.controls.usages.controls.length === 0 &&\n                      row.controls.changeRequestUsagesInOtherEnvironments.value === 0\n                    ) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (\n                        row.controls.usages.controls.length +\n                          row.controls.usagesInOtherEnvironments.value +\n                          row.controls.changeRequestUsagesInOtherEnvironments.value >\n                        0\n                      ) {\n                        {{\n                          row.controls.usages.controls.length +\n                            row.controls.usagesInOtherEnvironments.value +\n                            row.controls.changeRequestUsagesInOtherEnvironments.value\n                        }}\n                        usage{{\n                          row.controls.usages.controls.length +\n                            row.controls.usagesInOtherEnvironments.value +\n                            row.controls.changeRequestUsagesInOtherEnvironments.value >\n                          1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  row.controls.changeRequestUsagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0 ||\n                    row.controls.changeRequestUsagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".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", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .centered{display:flex;align-items:center}.content mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .dialog-table .header-tooltip-icon{font-size:14px;width:14px;height:14px}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: 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: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VariationsDialogComponent, decorators: [{
             type: Component,
@@ -4619,14 +4469,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         MatHeaderRow,
                         MatRowDef,
                         MatRow,
-                        DigitOnlyDirective,
+                        InputDisplayNormalizerDirective,
                         MatSuffix,
                         CdkDropList,
                         CdkDrag,
                         CdkDragHandle,
                         CopyableValueComponent,
                         AutofocusDirective,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (setting.isLoading()) {\n  <div mat-dialog-content class=\"content\">\n    <app-loader />\n  </div>\n} @else {\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n    <div class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Served value *</span>\n                <mat-icon\n                  matTooltip=\"Your application will get this value when evaluating the setting.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                @switch (settingType) {\n                  @case (SettingType.Boolean) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.boolValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.String) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.stringValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Int) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.intValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Double) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.doubleValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                }\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Display name (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                  <input\n                    matInput\n                    [formControl]=\"row.controls.name\"\n                    [placeholder]=\"row.controls.valueForComparison.value\" />\n                  @if (row.controls.name.invalid) {\n                    <mat-error class=\"small-error\">\n                      {{ formHelper.getErrorMessage(row.controls.name) }}\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>\n              <div class=\"centered\">\n                <span>Hint (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n                  <input matInput [formControl]=\"row.controls.hint\" />\n                  <button\n                    matSuffix\n                    class=\"input-suffix-button\"\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Advanced editor\"\n                    (click)=\"expandHint(row.controls.hint)\">\n                    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                  </button>\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=\"variationId\">\n            <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"usages\">\n            <th *matHeaderCellDef mat-header-cell>Usages</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"usages\">\n                <button\n                  type=\"button\"\n                  class=\"usage-button\"\n                  mat-icon-button\n                  [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n                  (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n                  @if (row.controls.usagesExpanded.value) {\n                    <mat-icon>expand_less</mat-icon>\n                  } @else {\n                    <mat-icon>expand_more</mat-icon>\n                  }\n                </button>\n                <div>\n                  @if (row.controls.usagesExpanded.value) {\n                    @for (usage of row.controls.usages.controls; track $index) {\n                      <div class=\"usage\">\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    } @else if (row.controls.usages.controls.length === 0) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n                        {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n                        usage{{\n                          row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".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", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .centered{display:flex;align-items:center}.content mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .dialog-table .header-tooltip-icon{font-size:14px;width:14px;height:14px}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (setting.isLoading()) {\n  <div mat-dialog-content class=\"content\">\n    <app-loader />\n  </div>\n} @else {\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n    <div class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Served value *</span>\n                <mat-icon\n                  matTooltip=\"Your application will get this value when evaluating the setting.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                @switch (settingType) {\n                  @case (SettingType.Boolean) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.boolValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.String) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.stringValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Int) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.intValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Double) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.doubleValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                }\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Display name (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                  <input\n                    matInput\n                    [formControl]=\"row.controls.name\"\n                    [placeholder]=\"row.controls.valueForComparison.value\" />\n                  @if (row.controls.name.invalid) {\n                    <mat-error class=\"small-error\">\n                      {{ formHelper.getErrorMessage(row.controls.name) }}\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>\n              <div class=\"centered\">\n                <span>Hint (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n                  <input matInput [formControl]=\"row.controls.hint\" />\n                  <button\n                    matSuffix\n                    class=\"input-suffix-button\"\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Advanced editor\"\n                    (click)=\"expandHint(row.controls.hint)\">\n                    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                  </button>\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=\"variationId\">\n            <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"usages\">\n            <th *matHeaderCellDef mat-header-cell>Usages</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"usages\">\n                <button\n                  type=\"button\"\n                  class=\"usage-button\"\n                  mat-icon-button\n                  [disabled]=\"\n                    !row.controls.usages.controls.length &&\n                    !row.controls.usagesInOtherEnvironments.value &&\n                    !row.controls.changeRequestUsagesInOtherEnvironments.value\n                  \"\n                  (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n                  @if (row.controls.usagesExpanded.value) {\n                    <mat-icon>expand_less</mat-icon>\n                  } @else {\n                    <mat-icon>expand_more</mat-icon>\n                  }\n                </button>\n                <div>\n                  @if (row.controls.usagesExpanded.value) {\n                    @for (usage of row.controls.usages.controls; track $index) {\n                      <div class=\"usage\">\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    }\n                    @if (row.controls.changeRequestUsagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.changeRequestUsagesInOtherEnvironments.value }} change request usage{{\n                        row.controls.changeRequestUsagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    }\n\n                    @if (\n                      row.controls.usagesInOtherEnvironments.value === 0 &&\n                      row.controls.usages.controls.length === 0 &&\n                      row.controls.changeRequestUsagesInOtherEnvironments.value === 0\n                    ) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (\n                        row.controls.usages.controls.length +\n                          row.controls.usagesInOtherEnvironments.value +\n                          row.controls.changeRequestUsagesInOtherEnvironments.value >\n                        0\n                      ) {\n                        {{\n                          row.controls.usages.controls.length +\n                            row.controls.usagesInOtherEnvironments.value +\n                            row.controls.changeRequestUsagesInOtherEnvironments.value\n                        }}\n                        usage{{\n                          row.controls.usages.controls.length +\n                            row.controls.usagesInOtherEnvironments.value +\n                            row.controls.changeRequestUsagesInOtherEnvironments.value >\n                          1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  row.controls.changeRequestUsagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0 ||\n                    row.controls.changeRequestUsagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".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", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .centered{display:flex;align-items:center}.content mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .dialog-table .header-tooltip-icon{font-size:14px;width:14px;height:14px}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"] }]
         }] });
 
 class DependeesDialogComponent {
@@ -4755,7 +4605,7 @@ class FeatureFlagValueComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], 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          #predefinedVariationSelect=\"matSelect\"\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          (openedChange)=\"onPredefinedVariationSelectOpenedChange($event)\">\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              [matTooltipDisabled]=\"\n                !predefinedVariationSelect.panelOpen || (predefinedVariation.isAvailable && !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)=\"\n            $event.stopPropagation();\n            viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n          \">\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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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;min-width: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;min-width:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[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]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], 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          #predefinedVariationSelect=\"matSelect\"\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          (openedChange)=\"onPredefinedVariationSelectOpenedChange($event)\">\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              [matTooltipDisabled]=\"\n                !predefinedVariationSelect.panelOpen || (predefinedVariation.isAvailable && !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)=\"\n            $event.stopPropagation();\n            viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n          \">\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        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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;min-width: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;min-width:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[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: "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]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
             type: Component,
@@ -4771,13 +4621,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         MatIcon,
                         MatError,
                         InputDisplayNormalizerDirective,
-                        DigitOnlyDirective,
                         MatSelect,
                         MatOption$1,
                         NgClass,
                         MatSelectTrigger,
                         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          #predefinedVariationSelect=\"matSelect\"\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          (openedChange)=\"onPredefinedVariationSelectOpenedChange($event)\">\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              [matTooltipDisabled]=\"\n                !predefinedVariationSelect.panelOpen || (predefinedVariation.isAvailable && !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)=\"\n            $event.stopPropagation();\n            viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n          \">\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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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;min-width: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;min-width:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}}\n"] }]
+                    ], 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          #predefinedVariationSelect=\"matSelect\"\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          (openedChange)=\"onPredefinedVariationSelectOpenedChange($event)\">\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              [matTooltipDisabled]=\"\n                !predefinedVariationSelect.panelOpen || (predefinedVariation.isAvailable && !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)=\"\n            $event.stopPropagation();\n            viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n          \">\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        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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;min-width: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;min-width:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}}\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"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
 
 class ConditionChipComponent {
@@ -6290,7 +6139,7 @@ class PercentageOptionsComponent {
             .map(p => p.controls.value.controls.predefinedVariationId.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PercentageOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n  <div class=\"targeting-rule-line\">\n    <div class=\"wrapper-group\">\n      <div class=\"targeting-rule-component flex\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            matTooltip=\"Percentage\"\n            appDigitOnly\n            inputDisplayNormalizer\n            [formControl]=\"percentageOption.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          <span matTextSuffix>%</span>\n          @if (percentageOption.controls.percentage.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n      @if (!percentageEvaluationAttribute()) {\n        <div class=\"attribute-wrapper flex\">\n          of&nbsp;\n          <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            users\n          </a>\n        </div>\n      } @else {\n        <div class=\"attribute-wrapper wrapper-group flex\">\n          <div class=\"small-pad-right\">of all</div>\n          <div class=\"small-pad-right\">\n            <button\n              mat-flat-button\n              type=\"button\"\n              class=\"attribute\"\n              matTooltip=\"Change percentage evaluation attribute\"\n              [disabled]=\"flagState().readOnly\"\n              (click)=\"changePercentageEvaluationAttribute()\">\n              {{ percentageEvaluationAttribute() }}\n            </button>\n          </div>\n          <div>attributes</div>\n        </div>\n      }\n      @if (!flagState().readOnly) {\n        <div class=\"delete-button\">\n          <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </button>\n        </div>\n      }\n    </div>\n    <app-feature-flag-value\n      class=\"value\"\n      tooltip=\"Served value\"\n      [setting]=\"flagState().settingValue.setting\"\n      [formGroup]=\"percentageOption.controls.value\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n  <mat-error class=\"sumerror\">\n    {{ FormHelper.getErrorMessage(formArray()) }}\n  </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n  @if (isPercentageOnlyTargetingRule()) {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the percentage options are skipped and the evaluation continues with the next rule.\n    </div>\n  } @else {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the current targeting rule is skipped and the evaluation continues with the next one.\n    </div>\n  }\n}\n\n@if (\n  flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n  !flagState().readOnly &&\n  (!flagState().settingValue.setting.predefinedVariations.length ||\n    flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n  <div class=\"add-perc\">\n    <!-- In the integrations we remove the enter sign to spare some space-->\n    <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n    <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n  </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n  <div class=\"targeting-rule-line\">\n    <div class=\"wrapper-group\">\n      <div class=\"targeting-rule-component flex\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            matTooltip=\"Percentage\"\n            inputDisplayNormalizer\n            [formControl]=\"percentageOption.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          <span matTextSuffix>%</span>\n          @if (percentageOption.controls.percentage.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n      @if (!percentageEvaluationAttribute()) {\n        <div class=\"attribute-wrapper flex\">\n          of&nbsp;\n          <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            users\n          </a>\n        </div>\n      } @else {\n        <div class=\"attribute-wrapper wrapper-group flex\">\n          <div class=\"small-pad-right\">of all</div>\n          <div class=\"small-pad-right\">\n            <button\n              mat-flat-button\n              type=\"button\"\n              class=\"attribute\"\n              matTooltip=\"Change percentage evaluation attribute\"\n              [disabled]=\"flagState().readOnly\"\n              (click)=\"changePercentageEvaluationAttribute()\">\n              {{ percentageEvaluationAttribute() }}\n            </button>\n          </div>\n          <div>attributes</div>\n        </div>\n      }\n      @if (!flagState().readOnly) {\n        <div class=\"delete-button\">\n          <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </button>\n        </div>\n      }\n    </div>\n    <app-feature-flag-value\n      class=\"value\"\n      tooltip=\"Served value\"\n      [setting]=\"flagState().settingValue.setting\"\n      [formGroup]=\"percentageOption.controls.value\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n  <mat-error class=\"sumerror\">\n    {{ FormHelper.getErrorMessage(formArray()) }}\n  </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n  @if (isPercentageOnlyTargetingRule()) {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the percentage options are skipped and the evaluation continues with the next rule.\n    </div>\n  } @else {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the current targeting rule is skipped and the evaluation continues with the next one.\n    </div>\n  }\n}\n\n@if (\n  flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n  !flagState().readOnly &&\n  (!flagState().settingValue.setting.predefinedVariations.length ||\n    flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n  <div class=\"add-perc\">\n    <!-- In the integrations we remove the enter sign to spare some space-->\n    <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n    <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n  </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
             type: Component,
@@ -6308,8 +6157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         MatIconButton,
                         MatIcon,
                         FeatureFlagValueComponent,
-                        DigitOnlyDirective,
-                    ], template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n  <div class=\"targeting-rule-line\">\n    <div class=\"wrapper-group\">\n      <div class=\"targeting-rule-component flex\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            matTooltip=\"Percentage\"\n            appDigitOnly\n            inputDisplayNormalizer\n            [formControl]=\"percentageOption.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          <span matTextSuffix>%</span>\n          @if (percentageOption.controls.percentage.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n      @if (!percentageEvaluationAttribute()) {\n        <div class=\"attribute-wrapper flex\">\n          of&nbsp;\n          <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            users\n          </a>\n        </div>\n      } @else {\n        <div class=\"attribute-wrapper wrapper-group flex\">\n          <div class=\"small-pad-right\">of all</div>\n          <div class=\"small-pad-right\">\n            <button\n              mat-flat-button\n              type=\"button\"\n              class=\"attribute\"\n              matTooltip=\"Change percentage evaluation attribute\"\n              [disabled]=\"flagState().readOnly\"\n              (click)=\"changePercentageEvaluationAttribute()\">\n              {{ percentageEvaluationAttribute() }}\n            </button>\n          </div>\n          <div>attributes</div>\n        </div>\n      }\n      @if (!flagState().readOnly) {\n        <div class=\"delete-button\">\n          <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </button>\n        </div>\n      }\n    </div>\n    <app-feature-flag-value\n      class=\"value\"\n      tooltip=\"Served value\"\n      [setting]=\"flagState().settingValue.setting\"\n      [formGroup]=\"percentageOption.controls.value\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n  <mat-error class=\"sumerror\">\n    {{ FormHelper.getErrorMessage(formArray()) }}\n  </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n  @if (isPercentageOnlyTargetingRule()) {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the percentage options are skipped and the evaluation continues with the next rule.\n    </div>\n  } @else {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the current targeting rule is skipped and the evaluation continues with the next one.\n    </div>\n  }\n}\n\n@if (\n  flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n  !flagState().readOnly &&\n  (!flagState().settingValue.setting.predefinedVariations.length ||\n    flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n  <div class=\"add-perc\">\n    <!-- In the integrations we remove the enter sign to spare some space-->\n    <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n    <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n  </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
+                    ], template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n  <div class=\"targeting-rule-line\">\n    <div class=\"wrapper-group\">\n      <div class=\"targeting-rule-component flex\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            matTooltip=\"Percentage\"\n            inputDisplayNormalizer\n            [formControl]=\"percentageOption.controls.percentage\"\n            (input)=\"percentageChanged(i)\" />\n          <span matTextSuffix>%</span>\n          @if (percentageOption.controls.percentage.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n      @if (!percentageEvaluationAttribute()) {\n        <div class=\"attribute-wrapper flex\">\n          of&nbsp;\n          <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            users\n          </a>\n        </div>\n      } @else {\n        <div class=\"attribute-wrapper wrapper-group flex\">\n          <div class=\"small-pad-right\">of all</div>\n          <div class=\"small-pad-right\">\n            <button\n              mat-flat-button\n              type=\"button\"\n              class=\"attribute\"\n              matTooltip=\"Change percentage evaluation attribute\"\n              [disabled]=\"flagState().readOnly\"\n              (click)=\"changePercentageEvaluationAttribute()\">\n              {{ percentageEvaluationAttribute() }}\n            </button>\n          </div>\n          <div>attributes</div>\n        </div>\n      }\n      @if (!flagState().readOnly) {\n        <div class=\"delete-button\">\n          <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n            <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n          </button>\n        </div>\n      }\n    </div>\n    <app-feature-flag-value\n      class=\"value\"\n      tooltip=\"Served value\"\n      [setting]=\"flagState().settingValue.setting\"\n      [formGroup]=\"percentageOption.controls.value\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n  <mat-error class=\"sumerror\">\n    {{ FormHelper.getErrorMessage(formArray()) }}\n  </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n  @if (isPercentageOnlyTargetingRule()) {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the percentage options are skipped and the evaluation continues with the next rule.\n    </div>\n  } @else {\n    <div class=\"small small-pad-bottom\">\n      If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n      <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        User Object\n      </a>\n      , the current targeting rule is skipped and the evaluation continues with the next one.\n    </div>\n  }\n}\n\n@if (\n  flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n  !flagState().readOnly &&\n  (!flagState().settingValue.setting.predefinedVariations.length ||\n    flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n  <div class=\"add-perc\">\n    <!-- In the integrations we remove the enter sign to spare some space-->\n    <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n    <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n  </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
         }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], percentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageEvaluationAttribute", required: true }] }], isPercentageOnlyTargetingRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPercentageOnlyTargetingRule", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], lastPercentageOptionLeft: [{ type: i0.Output, args: ["lastPercentageOptionLeft"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
 
 class TargetingRuleComponent {
@@ -7078,8 +6926,8 @@ class FeatureFlagItemComponent extends BaseComponent {
                 this.loadSucceeded.emit();
             },
             error: (error) => {
+                this.loading = false;
                 this.loadFailed.emit(error);
-                throw error;
             },
         });
     }
@@ -8218,13 +8066,13 @@ class CreateFeatureFlagComponent extends BaseComponent {
         this.componentError.emit(error);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { customize: { classPropertyName: "customize", publicName: "customize", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested", componentError: "componentError" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\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>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\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                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\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                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\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"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"], outputs: ["componentError"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"], outputs: ["componentError"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"], outputs: ["componentError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: 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: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { customize: { classPropertyName: "customize", publicName: "customize", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested", componentError: "componentError" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\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>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\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                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\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                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\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"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"], outputs: ["componentError"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"], outputs: ["componentError"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"], outputs: ["componentError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: 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: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-create-feature-flag", changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         AutofocusDirective,
-                        DigitOnlyDirective,
+                        InputDisplayNormalizerDirective,
                         ProductSelectComponent,
                         ConfigSelectComponent,
                         EnvironmentSelectComponent,
@@ -8257,7 +8105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         LoaderComponent,
                         BoxComponent,
                         MatCheckbox,
-                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\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>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\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                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\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                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\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"] }]
+                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\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>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\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                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\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                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\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"] }]
         }], propDecorators: { customize: [{ type: i0.Input, args: [{ isSignal: true, alias: "customize", required: false }] }], presetProductAndConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetProductAndConfig", required: false }] }], createInitiated: [{ type: i0.Output, args: ["createInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }], componentError: [{ type: i0.Output, args: ["componentError"] }] } });
 
 const DEFAULT_CUSTOMIZE_CREATE_CONFIG = {