ng-configcat-publicapi-ui 5.1.0 → 5.2.1

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

@@ -920,7 +920,7 @@ class FormGenerator {
         if (!setting) {
             throw new Error("Could not find prerequisite setting");
         }
-        if (setting.settingType === SettingType.Boolean) {
+        if (!setting.predefinedVariations.length && setting.settingType === SettingType.Boolean) {
             // In case of a boolean prerequisite setting, we are enforcing a 'True' prerequisiteComparisonValue
             // so we can simplify the UI with a simple 'Is true' or 'Is false' select.
             // 'Is true' = PrerequisiteComparator.Equals TRUE
@@ -3055,7 +3055,7 @@ class ProductSelectComponent extends BaseSelectComponent {
         this.filterText.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProductSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ProductSelectComponent, isStandalone: true, selector: "app-product-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, preSelectedProductId: { classPropertyName: "preSelectedProductId", publicName: "preSelectedProductId", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"openChanged($event)\"\n    (opened)=\"clearFilter()\"\n    (closed)=\"clearFilter()\">\n    <div class=\"menu-filter small-density-form-field\">\n      <mat-form-field\n        subscriptSizing=\"dynamic\"\n        appearance=\"outline\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\">\n        <input matInput placeholder=\"Filter products\" [(ngModel)]=\"filterText\" />\n        <span matSuffix [hidden]=\"!filterText()\">\n          <button\n            type=\"button\"\n            mat-icon-button\n            class=\"clear-filter\"\n            aria-label=\"Clear\"\n            matTooltip=\"Clear search filters\"\n            (click)=\"clearFilter()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </span>\n      </mat-form-field>\n    </div>\n    <mat-divider />\n    @for (product of filteredProducts(); track product.productId) {\n      <mat-option\n        [value]=\"product.productId\"\n        [ngClass]=\"{ hidden: product.hidden }\"\n        [matTooltip]=\"`Name: ${product.name}` +\n          `\\nDescription: ${product.description}`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        {{ product.name }}\n      </mat-option>\n    } @empty {\n      <mat-option disabled>No product available.</mat-option>\n    }\n    @if (!hasFilteredProduct()) {\n      <mat-option disabled>No product found.</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ProductSelectComponent, isStandalone: true, selector: "app-product-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, preSelectedProductId: { classPropertyName: "preSelectedProductId", publicName: "preSelectedProductId", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"openChanged($event)\"\n    (opened)=\"clearFilter()\"\n    (closed)=\"clearFilter()\">\n    <div class=\"menu-filter small-density-form-field\">\n      <mat-form-field\n        subscriptSizing=\"dynamic\"\n        appearance=\"outline\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\">\n        <input matInput placeholder=\"Filter products\" [(ngModel)]=\"filterText\" />\n        <span matSuffix [hidden]=\"!filterText()\">\n          <button\n            type=\"button\"\n            mat-icon-button\n            class=\"clear-filter\"\n            aria-label=\"Clear\"\n            matTooltip=\"Clear search filters\"\n            (click)=\"clearFilter()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </span>\n      </mat-form-field>\n    </div>\n    <mat-divider />\n    @for (product of filteredProducts(); track product.productId) {\n      <mat-option\n        [value]=\"product.productId\"\n        [ngClass]=\"{ hidden: product.hidden }\"\n        [matTooltip]=\"\n          product.description ? `Name: ${product.name}\\nDescription: ${product.description}` : `Name: ${product.name}`\n        \"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        {{ product.name }}\n      </mat-option>\n    } @empty {\n      <mat-option disabled>No product available.</mat-option>\n    }\n    @if (!hasFilteredProduct()) {\n      <mat-option disabled>No product found.</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProductSelectComponent, decorators: [{
             type: Component,
@@ -3074,7 +3074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInput,
                         MatSuffix,
                         MatIconButton,
-                    ], template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"openChanged($event)\"\n    (opened)=\"clearFilter()\"\n    (closed)=\"clearFilter()\">\n    <div class=\"menu-filter small-density-form-field\">\n      <mat-form-field\n        subscriptSizing=\"dynamic\"\n        appearance=\"outline\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\">\n        <input matInput placeholder=\"Filter products\" [(ngModel)]=\"filterText\" />\n        <span matSuffix [hidden]=\"!filterText()\">\n          <button\n            type=\"button\"\n            mat-icon-button\n            class=\"clear-filter\"\n            aria-label=\"Clear\"\n            matTooltip=\"Clear search filters\"\n            (click)=\"clearFilter()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </span>\n      </mat-form-field>\n    </div>\n    <mat-divider />\n    @for (product of filteredProducts(); track product.productId) {\n      <mat-option\n        [value]=\"product.productId\"\n        [ngClass]=\"{ hidden: product.hidden }\"\n        [matTooltip]=\"`Name: ${product.name}` +\n          `\\nDescription: ${product.description}`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        {{ product.name }}\n      </mat-option>\n    } @empty {\n      <mat-option disabled>No product available.</mat-option>\n    }\n    @if (!hasFilteredProduct()) {\n      <mat-option disabled>No product found.</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
+                    ], template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"openChanged($event)\"\n    (opened)=\"clearFilter()\"\n    (closed)=\"clearFilter()\">\n    <div class=\"menu-filter small-density-form-field\">\n      <mat-form-field\n        subscriptSizing=\"dynamic\"\n        appearance=\"outline\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\">\n        <input matInput placeholder=\"Filter products\" [(ngModel)]=\"filterText\" />\n        <span matSuffix [hidden]=\"!filterText()\">\n          <button\n            type=\"button\"\n            mat-icon-button\n            class=\"clear-filter\"\n            aria-label=\"Clear\"\n            matTooltip=\"Clear search filters\"\n            (click)=\"clearFilter()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </span>\n      </mat-form-field>\n    </div>\n    <mat-divider />\n    @for (product of filteredProducts(); track product.productId) {\n      <mat-option\n        [value]=\"product.productId\"\n        [ngClass]=\"{ hidden: product.hidden }\"\n        [matTooltip]=\"\n          product.description ? `Name: ${product.name}\\nDescription: ${product.description}` : `Name: ${product.name}`\n        \"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        {{ product.name }}\n      </mat-option>\n    } @empty {\n      <mat-option disabled>No product available.</mat-option>\n    }\n    @if (!hasFilteredProduct()) {\n      <mat-option disabled>No product found.</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
         }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], preSelectedProductId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedProductId", required: false }] }] } });
 
 class ConfigSelectComponent extends BaseSelectComponent {
@@ -3131,7 +3131,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
                 useExisting: forwardRef(() => ConfigSelectComponent),
                 multi: true,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (configs()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Config</mat-label>\n    <mat-select\n      placeholder=\"Config\"\n      name=\"value\"\n      disableOptionCentering\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (config of filteredConfigs(); track config.configId) {\n        <mat-option\n          [value]=\"config.configId\"\n          [ngClass]=\"{ hidden: config.hidden }\"\n          [matTooltip]=\"`Name: ${config.name}` +\n          `\\nDescription: ${config.description}`\"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ config.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No config available.</mat-option>\n      }\n      @if (!hasFilteredConfig()) {\n        <mat-option disabled>No config found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: 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"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (configs()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Config</mat-label>\n    <mat-select\n      placeholder=\"Config\"\n      name=\"value\"\n      disableOptionCentering\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (config of filteredConfigs(); track config.configId) {\n        <mat-option\n          [value]=\"config.configId\"\n          [ngClass]=\"{ hidden: config.hidden }\"\n          [matTooltip]=\"\n            config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ config.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No config available.</mat-option>\n      }\n      @if (!hasFilteredConfig()) {\n        <mat-option disabled>No config found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSelectComponent, decorators: [{
             type: Component,
@@ -3156,7 +3156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInput,
                         MatSuffix,
                         MatIconButton,
-                    ], template: "@if (configs()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Config</mat-label>\n    <mat-select\n      placeholder=\"Config\"\n      name=\"value\"\n      disableOptionCentering\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (config of filteredConfigs(); track config.configId) {\n        <mat-option\n          [value]=\"config.configId\"\n          [ngClass]=\"{ hidden: config.hidden }\"\n          [matTooltip]=\"`Name: ${config.name}` +\n          `\\nDescription: ${config.description}`\"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ config.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No config available.</mat-option>\n      }\n      @if (!hasFilteredConfig()) {\n        <mat-option disabled>No config found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
+                    ], template: "@if (configs()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Config</mat-label>\n    <mat-select\n      placeholder=\"Config\"\n      name=\"value\"\n      disableOptionCentering\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter configs\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (config of filteredConfigs(); track config.configId) {\n        <mat-option\n          [value]=\"config.configId\"\n          [ngClass]=\"{ hidden: config.hidden }\"\n          [matTooltip]=\"\n            config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ config.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No config available.</mat-option>\n      }\n      @if (!hasFilteredConfig()) {\n        <mat-option disabled>No config found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
         }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], preSelectedConfigId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedConfigId", required: false }] }] } });
 
 class EnvironmentSelectComponent extends BaseSelectComponent {
@@ -3201,7 +3201,7 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
         this.filterText.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EnvironmentSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: EnvironmentSelectComponent, isStandalone: true, selector: "app-environment-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (environments()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (environment of filteredEnvironments(); track environment.environmentId) {\n        <mat-option\n          [value]=\"environment.environmentId\"\n          [ngClass]=\"{ hidden: environment.hidden }\"\n          [matTooltip]=\"`Name: ${environment.name}` +\n          `\\nDescription: ${environment.description}`\"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ environment.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No environment available.</mat-option>\n      }\n      @if (!hasFilteredEnvironment()) {\n        <mat-option disabled>No environment found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: EnvironmentSelectComponent, isStandalone: true, selector: "app-environment-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (environments()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (environment of filteredEnvironments(); track environment.environmentId) {\n        <mat-option\n          [value]=\"environment.environmentId\"\n          [ngClass]=\"{ hidden: environment.hidden }\"\n          [matTooltip]=\"\n              environment.description ? `Name: ${environment.name}\\nDescription: ${environment.description}` : `Name: ${environment.name}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ environment.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No environment available.</mat-option>\n      }\n      @if (!hasFilteredEnvironment()) {\n        <mat-option disabled>No environment found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
             type: Component,
@@ -3220,7 +3220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInput,
                         MatSuffix,
                         MatIconButton,
-                    ], template: "@if (environments()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (environment of filteredEnvironments(); track environment.environmentId) {\n        <mat-option\n          [value]=\"environment.environmentId\"\n          [ngClass]=\"{ hidden: environment.hidden }\"\n          [matTooltip]=\"`Name: ${environment.name}` +\n          `\\nDescription: ${environment.description}`\"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ environment.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No environment available.</mat-option>\n      }\n      @if (!hasFilteredEnvironment()) {\n        <mat-option disabled>No environment found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
+                    ], template: "@if (environments()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"openChanged($event)\"\n      (opened)=\"clearFilter()\"\n      (closed)=\"clearFilter()\">\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter environments\" [(ngModel)]=\"filterText\" />\n          <span matSuffix [hidden]=\"!filterText()\">\n            <button\n              type=\"button\"\n              mat-icon-button\n              class=\"clear-filter\"\n              aria-label=\"Clear\"\n              matTooltip=\"Clear search filters\"\n              (click)=\"clearFilter()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </span>\n        </mat-form-field>\n      </div>\n      <mat-divider />\n\n      @for (environment of filteredEnvironments(); track environment.environmentId) {\n        <mat-option\n          [value]=\"environment.environmentId\"\n          [ngClass]=\"{ hidden: environment.hidden }\"\n          [matTooltip]=\"\n              environment.description ? `Name: ${environment.name}\\nDescription: ${environment.description}` : `Name: ${environment.name}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          {{ environment.name }}\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No environment available.</mat-option>\n      }\n      @if (!hasFilteredEnvironment()) {\n        <mat-option disabled>No environment found.</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
         }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }] } });
 
 class SettingSelectComponent extends BaseSelectComponent {
@@ -3488,7 +3488,7 @@ class PopoutTextEditorDialogComponent {
             this.control.setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
             this.control.markAsDirty();
             this.control.markAsTouched();
-            if (this.jsonData !== value) {
+            if (value && this.jsonData !== value) {
                 this.jsonData = value;
             }
         });
@@ -3512,7 +3512,7 @@ class PopoutTextEditorDialogComponent {
         this.dialogRef.close({ value: this.control.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PopoutTextEditorDialogComponent, isStandalone: true, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  <mat-button-toggle-group [(ngModel)]=\"format\">\n    <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n    <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n  </mat-button-toggle-group>\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - control.value.length > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - control.value.length }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PopoutTextEditorDialogComponent, isStandalone: true, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
             type: Component,
@@ -3535,7 +3535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatDialogActions,
                         MatButton,
                         MatDialogClose,
-                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  <mat-button-toggle-group [(ngModel)]=\"format\">\n    <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n    <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n  </mat-button-toggle-group>\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - control.value.length > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - control.value.length }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
+                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
         }] });
 
 class VariationsDialogComponent {
@@ -3692,6 +3692,7 @@ class VariationsDialogComponent {
                 validators: [Validators.required, Validators.maxLength(this.data.maxStringFlagValueLength)],
                 maxValueLength: this.data.maxStringFlagValueLength,
                 description: "Modify the text within the editor to change the value.",
+                disableJsonEditor: true,
             },
         });
         dialogRef.afterClosed().subscribe(data => {
@@ -3796,7 +3797,7 @@ class VariationsDialogComponent {
         return getPredefinedVariationColorIndex(this.settingType, getRawPredefinedVariationValue(row.controls.value), index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VariationsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 mat-dialog-content class=\"content\">\n      @if (data.manage) {\n        <p>\n          Add, delete, and update predefined variations.\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 class=\"variations\">\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>\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>\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>Served value *</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>Display name (optional)</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>Hint (optional)</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\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            </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\">\n              <div class=\"usages\">\n                <button\n                  type=\"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\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          [href]=\"usage.controls.routerLink.value\"\n                          [mat-dialog-close]>\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 }} 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                [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                  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                  \"\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 (formGroup.controls.predefinedVariations.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n\n        @if (data.manage && settingType !== SettingType.Boolean) {\n          <div class=\"add-variation\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n              [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        }\n      </div>\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 round\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".content{min-width:760px}.content .add-variation{margin-top:8px}.content .mat-column-color{padding-left:4px!important;padding-right:4px!important}.content .mat-column-reorder{padding-right:0!important}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{min-width:66px;height:34px;margin-top:4px}.content .usages{display:flex;align-items:center}.content .usages .usage{padding:2px 8px 2px 0}.content .predefined-component{padding:8px 0}.content .small-error{max-width:180px}\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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.\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>Served value *</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>Display name (optional)</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>Hint (optional)</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\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          [href]=\"usage.controls.routerLink.value\"\n                          [mat-dialog-close]>\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                  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                  \"\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          <button\n            type=\"button\"\n            mat-stroked-button\n            color=\"primary\"\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n            [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n            (click)=\"addVariation()\">\n            <mat-icon>add</mat-icon>\n            Add variation\n          </button>\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 round\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".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{min-width:66px;height:34px;padding-top:1px}.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}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VariationsDialogComponent, decorators: [{
             type: Component,
@@ -3835,7 +3836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CdkDragHandle,
                         CopyableValueComponent,
                         AutofocusDirective
-                    ], 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 mat-dialog-content class=\"content\">\n      @if (data.manage) {\n        <p>\n          Add, delete, and update predefined variations.\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 class=\"variations\">\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>\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>\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>Served value *</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>Display name (optional)</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>Hint (optional)</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\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            </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\">\n              <div class=\"usages\">\n                <button\n                  type=\"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\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          [href]=\"usage.controls.routerLink.value\"\n                          [mat-dialog-close]>\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 }} 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                [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                  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                  \"\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 (formGroup.controls.predefinedVariations.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n\n        @if (data.manage && settingType !== SettingType.Boolean) {\n          <div class=\"add-variation\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n              [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        }\n      </div>\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 round\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".content{min-width:760px}.content .add-variation{margin-top:8px}.content .mat-column-color{padding-left:4px!important;padding-right:4px!important}.content .mat-column-reorder{padding-right:0!important}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{min-width:66px;height:34px;margin-top:4px}.content .usages{display:flex;align-items:center}.content .usages .usage{padding:2px 8px 2px 0}.content .predefined-component{padding:8px 0}.content .small-error{max-width:180px}\n"] }]
+                    ], 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.\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>Served value *</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>Display name (optional)</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>Hint (optional)</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\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          [href]=\"usage.controls.routerLink.value\"\n                          [mat-dialog-close]>\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                  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                  \"\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          <button\n            type=\"button\"\n            mat-stroked-button\n            color=\"primary\"\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n            [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n            (click)=\"addVariation()\">\n            <mat-icon>add</mat-icon>\n            Add variation\n          </button>\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 round\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".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{min-width:66px;height:34px;padding-top:1px}.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}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"] }]
         }] });
 
 class DependeesDialogComponent {
@@ -3897,7 +3898,7 @@ class FeatureFlagValueComponent {
                 validators: this.formGenerator.getValidatorsForSettingType(SettingType.String, this.featureFlagLimitations()),
                 maxValueLength: this.featureFlagLimitations().maxStringFlagValueLength ?? 100000,
                 description: this.isPrerequisite()
-                    ? "Modify the text within the editor to change the prerequisite feature flag comparison value. The editor supports JSON syntax highlighting."
+                    ? "Modify the text within the editor to change the prerequisite flag comparison value. The editor supports JSON syntax highlighting."
                     : "Modify the text within the editor to change the feature flag value. The editor supports JSON syntax highlighting.",
             },
         });
@@ -3913,26 +3914,44 @@ class FeatureFlagValueComponent {
     getPredefinedVariation(predefinedVariationId) {
         return this.predefinedVariations().find(p => p.predefinedVariationId === predefinedVariationId);
     }
-    getServedValueText(predefinedVariationId) {
-        const predefinedVariation = this.getPredefinedVariation(predefinedVariationId);
+    getServedValueText(model) {
         switch (this.setting().settingType) {
-            case SettingType.Boolean:
-                return predefinedVariation?.value.boolValue ? "On (true)" : "Off (false)";
-            case SettingType.Int:
-                return "" + predefinedVariation?.value.intValue;
-            case SettingType.Double:
-                return "" + predefinedVariation?.value.doubleValue;
+            case SettingType.Boolean: {
+                const controlOrValue = model?.boolValue;
+                return "" + (controlOrValue instanceof FormControl ? controlOrValue.value : !!controlOrValue);
+            }
+            case SettingType.Int: {
+                const controlOrValue = model?.intValue;
+                return "" + (controlOrValue instanceof FormControl ? controlOrValue.value : controlOrValue);
+            }
+            case SettingType.Double: {
+                const controlOrValue = model?.doubleValue;
+                return "" + (controlOrValue instanceof FormControl ? controlOrValue.value : controlOrValue);
+            }
             default: {
-                let stringValue = (predefinedVariation?.value.stringValue ?? "");
-                if (stringValue.length > 20) {
-                    stringValue = stringValue.substring(0, 3) + "..." + stringValue.substring(stringValue.length - 3);
+                const controlOrValue = model?.stringValue;
+                let stringValue = (controlOrValue instanceof FormControl ? controlOrValue.value : controlOrValue) ?? "";
+                if (stringValue.length > 50) {
+                    stringValue = stringValue.substring(0, 23) + "[...]" + stringValue.substring(stringValue.length - 22);
                 }
                 return "\"" + stringValue + "\"";
             }
         }
     }
+    getDefaultDisplayNameText(model) {
+        switch (this.setting().settingType) {
+            case SettingType.Boolean:
+                return model?.boolValue ? "On" : "Off";
+            case SettingType.Int:
+                return "" + model?.intValue;
+            case SettingType.Double:
+                return "" + model?.doubleValue;
+            default:
+                return model?.stringValue ?? "";
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n        @let variationName = selectedPredefinedVariation?.name;\n        @let variationHint = selectedPredefinedVariation?.hint;\n        <mat-select\n          disableOptionCentering\n          [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n          [matTooltip]=\"\n            `${tooltip()}: ${getServedValueText(formGroupValue.controls.predefinedVariationId.value)} (type: ${setting().settingType})` +\n            `\\nDisplay name: ${variationName}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"tooltip()\" />\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()\" />\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()\" />\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 class=\"switch\" [matTooltip]=\"tooltip()\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}@media (max-width: 500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n        @let variationName = selectedPredefinedVariation?.name;\n        @let variationHint = selectedPredefinedVariation?.hint;\n        <mat-select\n          disableOptionCentering\n          [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n          [matTooltip]=\"\n             `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n            `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      <button\n        matSuffix\n        class=\"input-suffix-button\"\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Advanced editor\"\n        (click)=\"expandText()\">\n        <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n      </button>\n      @if (formGroupValue.controls.stringValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.intValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        appDigitOnly\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\n        [digitOnlyAllowNegatives]=\"true\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.intValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.doubleValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.doubleValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.doubleValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.boolValue) {\n    <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n      <label\n        class=\"switch\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}@media (max-width: 500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
             type: Component,
@@ -3953,7 +3972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatOption$1,
                         NgClass,
                         MatSelectTrigger,
-                    ], template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n        @let variationName = selectedPredefinedVariation?.name;\n        @let variationHint = selectedPredefinedVariation?.hint;\n        <mat-select\n          disableOptionCentering\n          [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n          [matTooltip]=\"\n            `${tooltip()}: ${getServedValueText(formGroupValue.controls.predefinedVariationId.value)} (type: ${setting().settingType})` +\n            `\\nDisplay name: ${variationName}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"tooltip()\" />\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()\" />\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()\" />\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 class=\"switch\" [matTooltip]=\"tooltip()\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}@media (max-width: 500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
+                    ], template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n  @if (formGroupValue.controls.predefinedVariationId) {\n    <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n        @let variationName = selectedPredefinedVariation?.name;\n        @let variationHint = selectedPredefinedVariation?.hint;\n        <mat-select\n          disableOptionCentering\n          [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n          [matTooltip]=\"\n             `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n            `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n            `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n          \"\n          [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n          <mat-select-trigger>\n            @if (selectedPredefinedVariation) {\n              <div class=\"variation-option\">\n                <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n                @if (selectedPredefinedVariation.name) {\n                  <em class=\"variation-name\">\n                    {{ selectedPredefinedVariation.name }}\n                  </em>\n                } @else {\n                  <span>\n                    {{\n                      getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n                    }}\n                  </span>\n                }\n              </div>\n            }\n          </mat-select-trigger>\n\n          @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n            <span\n              [matTooltip]=\"\n                !predefinedVariation.isAvailable\n                  ? 'The predefined variation is already selected in another percentage option.'\n                  : (predefinedVariation.hint ?? '')\n              \">\n              <mat-option\n                [value]=\"predefinedVariation.predefinedVariationId\"\n                [disabled]=\"!predefinedVariation.isAvailable\">\n                <div class=\"variation-option\">\n                  <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n                  @if (predefinedVariation.name) {\n                    <em class=\"variation-name\">\n                      {{ predefinedVariation.name }}\n                    </em>\n                  } @else {\n                    <span>\n                      {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n                    </span>\n                  }\n                </div>\n              </mat-option>\n            </span>\n          }\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n          (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n          <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n        </button>\n        @if (formGroupValue.controls.predefinedVariationId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  } @else if (formGroupValue.controls.stringValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"text\"\n        placeholder=\"Add text ...\"\n        [formControl]=\"formGroupValue.controls.stringValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      <button\n        matSuffix\n        class=\"input-suffix-button\"\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Advanced editor\"\n        (click)=\"expandText()\">\n        <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n      </button>\n      @if (formGroupValue.controls.stringValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.intValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        appDigitOnly\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.intValue\"\n        [digitOnlyAllowNegatives]=\"true\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.intValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.doubleValue) {\n    <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n      <input\n        matInput\n        type=\"number\"\n        inputDisplayNormalizer\n        placeholder=\"Add number ...\"\n        [formControl]=\"formGroupValue.controls.doubleValue\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n      @if (formGroupValue.controls.doubleValue.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  } @else if (formGroupValue.controls.boolValue) {\n    <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n      <label\n        class=\"switch\"\n        [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n        [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n        <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column;width:66px;height:30px}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}@media (max-width: 500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
         }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], notAvailablePredefinedVariationIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "notAvailablePredefinedVariationIds", required: false }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], isPrerequisite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPrerequisite", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
 
 class ConditionChipComponent {
@@ -4026,7 +4045,7 @@ class PrerequisiteFlagConditionComponent {
         this.filterText.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite feature flag or setting key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option\n              [value]=\"prerequisiteSetting.settingId\"\n              [matTooltip]=\"prerequisiteSetting.name\"\n              [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              {{ prerequisiteSetting.key }}\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Prerequisite feature flag comparison value\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Prerequisite feature flag comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite flag key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option\n              [value]=\"prerequisiteSetting.settingId\"\n              [matTooltip]=\"prerequisiteSetting.name\"\n              [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              {{ prerequisiteSetting.key }}\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            [matTooltip]=\"\n              `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n            \"\n            [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
             type: Component,
@@ -4047,7 +4066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatIconButton,
                         MatSuffix,
                         MatInput,
-                    ], template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite feature flag or setting key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option\n              [value]=\"prerequisiteSetting.settingId\"\n              [matTooltip]=\"prerequisiteSetting.name\"\n              [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              {{ prerequisiteSetting.key }}\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Prerequisite feature flag comparison value\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Prerequisite feature flag comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
+                    ], template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        flag\n      </a>\n    </div>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component pad-right\">\n      <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <mat-select\n          placeholder=\"Select feature flag ...\"\n          matTooltip=\"Prerequisite flag key\"\n          [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n          (selectionChange)=\"prerequisiteSettingChanged()\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n            <mat-option\n              [value]=\"prerequisiteSetting.settingId\"\n              [matTooltip]=\"prerequisiteSetting.name\"\n              [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n              {{ prerequisiteSetting.key }}\n            </mat-option>\n          }\n          @if (!hasFilteredSettings()) {\n            <mat-option disabled>No feature flags found.</mat-option>\n          }\n        </mat-select>\n        @if (formGroup().controls.prerequisiteSettingId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n    @if (\n      !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n    ) {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select\n            [matTooltip]=\"\n              `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n            \"\n            [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n            [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    } @else {\n      <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n          <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n            @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n              <mat-option [value]=\"prerequisiteComparator.value\">\n                {{ prerequisiteComparator.label }}\n              </mat-option>\n            }\n          </mat-select>\n          @if (formGroup().controls.comparator.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n            </mat-error>\n          }\n        </mat-form-field>\n      </div>\n    }\n  </div>\n  @if (\n    !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n  ) {\n    <app-feature-flag-value\n      class=\"wrapper-group grow\"\n      tooltip=\"Comparison value\"\n      [setting]=\"settingValue\"\n      [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n      [isPrerequisite]=\"true\"\n      [featureFlagLimitations]=\"featureFlagLimitations()\"\n      [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n      (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n  }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], prerequisiteSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "prerequisiteSettings", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
 
 class SegmentConditionComponent {
@@ -4081,7 +4100,7 @@ class SegmentConditionComponent {
         this.filterText.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user\n      </a>\n    </div>\n  </div>\n\n  <div class=\"targeting-rule-component pad-right\">\n    <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n      <mat-select matTooltip=\"Segment comparator\" [formControl]=\"formGroup().controls.comparator\">\n        @for (comparator of segmentComparators; track $index) {\n          <mat-option [value]=\"comparator.value\">\n            {{ comparator.label }}\n          </mat-option>\n        }\n      </mat-select>\n      @if (formGroup().controls.comparator.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component suffixed\">\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        [class.select-suffixed]=\"canManageSegments()\">\n        <mat-select\n          matTooltip=\"Segment\"\n          placeholder=\"Select segment ...\"\n          [formControl]=\"formGroup().controls.segmentId\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (segment of filteredSegments(); track $index) {\n            <mat-option\n              [value]=\"segment.segmentId\"\n              [matTooltip]=\"segment.description\"\n              [ngClass]=\"{ hidden: segment.hidden }\">\n              {{ segment.name }}\n            </mat-option>\n          } @empty {\n            <mat-option disabled>No segments available.</mat-option>\n          }\n          @if (segments().length && !hasFilteredSegments()) {\n            <mat-option disabled>No segments found.</mat-option>\n          }\n        </mat-select>\n        @if (canManageSegments()) {\n          <button\n            matSuffix\n            class=\"input-suffix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Create and manage segments\"\n            [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\"\n            (click)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        @if (formGroup().controls.segmentId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <a\n      mat-menu-item\n      [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"createSegmentRequested.emit()\">\n      <mat-icon>add</mat-icon>\n      <span>Create new segment</span>\n    </a>\n    <a\n      mat-menu-item\n      [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"manageSegmentsRequested.emit()\">\n      <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n      <span>Manage segments</span>\n    </a>\n  </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user\n      </a>\n    </div>\n  </div>\n\n  <div class=\"targeting-rule-component pad-right\">\n    <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n      <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n        @for (comparator of segmentComparators; track $index) {\n          <mat-option [value]=\"comparator.value\">\n            {{ comparator.label }}\n          </mat-option>\n        }\n      </mat-select>\n      @if (formGroup().controls.comparator.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component suffixed\">\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        [class.select-suffixed]=\"canManageSegments()\">\n        <mat-select\n          matTooltip=\"Segment\"\n          placeholder=\"Select segment ...\"\n          [formControl]=\"formGroup().controls.segmentId\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (segment of filteredSegments(); track $index) {\n            <mat-option\n              [value]=\"segment.segmentId\"\n              [matTooltip]=\"segment.description\"\n              [ngClass]=\"{ hidden: segment.hidden }\">\n              {{ segment.name }}\n            </mat-option>\n          } @empty {\n            <mat-option disabled>No segments available.</mat-option>\n          }\n          @if (segments().length && !hasFilteredSegments()) {\n            <mat-option disabled>No segments found.</mat-option>\n          }\n        </mat-select>\n        @if (canManageSegments()) {\n          <button\n            matSuffix\n            class=\"input-suffix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Create and manage segments\"\n            [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\"\n            (click)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        @if (formGroup().controls.segmentId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <a\n      mat-menu-item\n      [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"createSegmentRequested.emit()\">\n      <mat-icon>add</mat-icon>\n      <span>Create new segment</span>\n    </a>\n    <a\n      mat-menu-item\n      [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"manageSegmentsRequested.emit()\">\n      <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n      <span>Manage segments</span>\n    </a>\n  </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SegmentConditionComponent, decorators: [{
             type: Component,
@@ -4106,7 +4125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatDivider,
                         NgClass,
                         MatSuffix,
-                    ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user\n      </a>\n    </div>\n  </div>\n\n  <div class=\"targeting-rule-component pad-right\">\n    <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n      <mat-select matTooltip=\"Segment comparator\" [formControl]=\"formGroup().controls.comparator\">\n        @for (comparator of segmentComparators; track $index) {\n          <mat-option [value]=\"comparator.value\">\n            {{ comparator.label }}\n          </mat-option>\n        }\n      </mat-select>\n      @if (formGroup().controls.comparator.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component suffixed\">\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        [class.select-suffixed]=\"canManageSegments()\">\n        <mat-select\n          matTooltip=\"Segment\"\n          placeholder=\"Select segment ...\"\n          [formControl]=\"formGroup().controls.segmentId\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (segment of filteredSegments(); track $index) {\n            <mat-option\n              [value]=\"segment.segmentId\"\n              [matTooltip]=\"segment.description\"\n              [ngClass]=\"{ hidden: segment.hidden }\">\n              {{ segment.name }}\n            </mat-option>\n          } @empty {\n            <mat-option disabled>No segments available.</mat-option>\n          }\n          @if (segments().length && !hasFilteredSegments()) {\n            <mat-option disabled>No segments found.</mat-option>\n          }\n        </mat-select>\n        @if (canManageSegments()) {\n          <button\n            matSuffix\n            class=\"input-suffix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Create and manage segments\"\n            [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\"\n            (click)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        @if (formGroup().controls.segmentId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <a\n      mat-menu-item\n      [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"createSegmentRequested.emit()\">\n      <mat-icon>add</mat-icon>\n      <span>Create new segment</span>\n    </a>\n    <a\n      mat-menu-item\n      [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"manageSegmentsRequested.emit()\">\n      <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n      <span>Manage segments</span>\n    </a>\n  </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
+                    ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user\n      </a>\n    </div>\n  </div>\n\n  <div class=\"targeting-rule-component pad-right\">\n    <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n      <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n        @for (comparator of segmentComparators; track $index) {\n          <mat-option [value]=\"comparator.value\">\n            {{ comparator.label }}\n          </mat-option>\n        }\n      </mat-select>\n      @if (formGroup().controls.comparator.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component suffixed\">\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        [class.select-suffixed]=\"canManageSegments()\">\n        <mat-select\n          matTooltip=\"Segment\"\n          placeholder=\"Select segment ...\"\n          [formControl]=\"formGroup().controls.segmentId\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (segment of filteredSegments(); track $index) {\n            <mat-option\n              [value]=\"segment.segmentId\"\n              [matTooltip]=\"segment.description\"\n              [ngClass]=\"{ hidden: segment.hidden }\">\n              {{ segment.name }}\n            </mat-option>\n          } @empty {\n            <mat-option disabled>No segments available.</mat-option>\n          }\n          @if (segments().length && !hasFilteredSegments()) {\n            <mat-option disabled>No segments found.</mat-option>\n          }\n        </mat-select>\n        @if (canManageSegments()) {\n          <button\n            matSuffix\n            class=\"input-suffix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Create and manage segments\"\n            [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\"\n            (click)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        @if (formGroup().controls.segmentId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <a\n      mat-menu-item\n      [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"createSegmentRequested.emit()\">\n      <mat-icon>add</mat-icon>\n      <span>Create new segment</span>\n    </a>\n    <a\n      mat-menu-item\n      [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"manageSegmentsRequested.emit()\">\n      <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n      <span>Manage segments</span>\n    </a>\n  </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media (max-width: 500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }] } });
 
 class DateTimePickerComponent {
@@ -6279,6 +6298,16 @@ class FeatureFlagItemComponent extends BaseComponent {
                     });
                     return;
                 }
+                if (error instanceof HttpErrorResponse
+                    && error.status === 400
+                    && (FormHelper.getHttpErrorResponseMessage(error, "DefaultValue")?.includes("Variation could not be found.")
+                        || FormHelper.getHttpErrorResponseMessage(error, "Value")?.includes("Variation could not be found.")
+                        || FormHelper.getHttpErrorResponseMessage(error, "PredefinedVariationId")?.includes("Could not find Variation."))) {
+                    this.openDiscardDialog("Cannot save feature flags", "A predefined variation referenced by one of your feature flags has been deleted. Reload the config to see its latest state, apply your changes and try the save again.", "Reload", "", true, "450px").subscribe(() => {
+                        this.reloadSettingValues();
+                    });
+                    return;
+                }
                 if (error instanceof HttpErrorResponse
                     && error.status === 400
                     && error.error && ("" + error.error).startsWith("Circular dependency detected.")) {
@@ -6595,17 +6624,15 @@ class ErrorHandler {
 class CreateFeatureFlagComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        // private readonly publicApiService = inject(PublicApiService);
         this.formBuilder = inject(NonNullableFormBuilder);
         this.destroyRef = inject(DestroyRef);
         this.dialog = inject(MatDialog);
-        // readonly authorizationParameters = input<AuthorizationParameters | null>();
         this.hideCancelButton = input(true, ...(ngDevMode ? [{ debugName: "hideCancelButton" }] : []));
         this.createButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "createButtonLabel" }] : []));
         this.cancelButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonLabel" }] : []));
         this.targetSectionHeader = input(...(ngDevMode ? [undefined, { debugName: "targetSectionHeader" }] : []));
         this.targetSectionDescription = input(...(ngDevMode ? [undefined, { debugName: "targetSectionDescription" }] : []));
-        this.flagkSectionHeader = input(...(ngDevMode ? [undefined, { debugName: "flagkSectionHeader" }] : []));
+        this.flagSectionHeader = input(...(ngDevMode ? [undefined, { debugName: "flagSectionHeader" }] : []));
         this.flagSectionDescription = input(...(ngDevMode ? [undefined, { debugName: "flagSectionDescription" }] : []));
         this.linkSectionHeader = input(...(ngDevMode ? [undefined, { debugName: "linkSectionHeader" }] : []));
         this.linkSectionDescription = input(...(ngDevMode ? [undefined, { debugName: "linkSectionDescription" }] : []));
@@ -6943,6 +6970,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
                 validators: [Validators.maxLength(1000)],
                 maxValueLength: 1000,
                 description: "Modify the text within the editor to change the hint.",
+                disableJsonEditor: true,
             },
         });
         dialogRef.afterClosed().subscribe(data => {
@@ -6958,7 +6986,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
         return getPredefinedVariationColorIndex(this.formGroup.controls.settingType.value, getRawPredefinedVariationValue(row.controls.value), index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, flagkSectionHeader: { classPropertyName: "flagkSectionHeader", publicName: "flagkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, flagSectionDescription: { classPropertyName: "flagSectionDescription", publicName: "flagSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, linkSectionHeader: { classPropertyName: "linkSectionHeader", publicName: "linkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, linkSectionDescription: { classPropertyName: "linkSectionDescription", publicName: "linkSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, hideLinkSection: { classPropertyName: "hideLinkSection", publicName: "hideLinkSection", 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" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n      @if (targetSectionDescription()) {\n        <p>{{ 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      @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      }\n\n      <div class=\"header\">2. {{ flagkSectionHeader() ? flagkSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loading) {\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\">\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 friendly name that best describes your setting.</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 applications will access your setting via this key.</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\" appearance=\"outline\">\n          <mat-label>Hint or description (Optional)</mat-label>\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>A description to help you remember the purpose of your setting.</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            <div class=\"header small\">Variations</div>\n            <div class=\"variations\">\n              <div class=\"variation-header\">\n                This {{ settingTypeText }} allows\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"small-form-field initial-value-environment-type\"\n                  subscriptSizing=\"dynamic\">\n                  <mat-select formControlName=\"useVariations\">\n                    <mat-option [value]=\"false\">free-form values</mat-option>\n                    <mat-option [value]=\"true\">predefined variations only</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              @if (formGroup.controls.useVariations.value) {\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>Served value *</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>Display name (optional)</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>Hint (optional)</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                        {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\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 (formGroup.controls.predefinedVariations.invalid) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                  <div class=\"add-variation\">\n                    <button\n                      type=\"button\"\n                      mat-stroked-button\n                      color=\"primary\"\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n                      [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                      (click)=\"addVariation()\">\n                      <mat-icon>add</mat-icon>\n                      Add variation\n                    </button>\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <div class=\"header small\">Initial values</div>\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 (!hideLinkSection()) {\n        <div class=\"header\">\n          3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n        </div>\n        @if (linkSectionDescription()) {\n          <p>{{ 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        }\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 mat-raised-button color=\"primary\" type=\"submit\">\n        {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n      </button>\n      @if (!hideCancelButton()) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\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>\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>\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 round\"></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 .toggle{min-width:66px;height:34px}.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:8px}.container .form>* .init-value-section .variations .toggle{margin-top:4px}.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}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n"], 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"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, flagSectionHeader: { classPropertyName: "flagSectionHeader", publicName: "flagSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, flagSectionDescription: { classPropertyName: "flagSectionDescription", publicName: "flagSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, linkSectionHeader: { classPropertyName: "linkSectionHeader", publicName: "linkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, linkSectionDescription: { classPropertyName: "linkSectionDescription", publicName: "linkSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, hideLinkSection: { classPropertyName: "hideLinkSection", publicName: "hideLinkSection", 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" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n      @if (targetSectionDescription()) {\n        <p>{{ 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      @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      }\n\n      <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loading) {\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\">\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 friendly name that best describes your setting.</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 applications will access your setting via this key.</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\" appearance=\"outline\">\n          <mat-label>Hint or description (Optional)</mat-label>\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>A description to help you remember the purpose of your setting.</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            <div class=\"header small\">Variations</div>\n            <div class=\"variations\">\n              <div class=\"variation-header\">\n                This {{ settingTypeText }} allows\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"small-form-field initial-value-environment-type\"\n                  subscriptSizing=\"dynamic\">\n                  <mat-select formControlName=\"useVariations\">\n                    <mat-option [value]=\"false\">free-form values</mat-option>\n                    <mat-option [value]=\"true\">predefined variations only</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              @if (formGroup.controls.useVariations.value) {\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>Served value *</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>Display name (optional)</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>Hint (optional)</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                        {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\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 (formGroup.controls.predefinedVariations.invalid) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                  <div class=\"add-variation\">\n                    <button\n                      type=\"button\"\n                      mat-stroked-button\n                      color=\"primary\"\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n                      [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                      (click)=\"addVariation()\">\n                      <mat-icon>add</mat-icon>\n                      Add variation\n                    </button>\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <div class=\"header small\">Initial values</div>\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 (!hideLinkSection()) {\n        <div class=\"header\">\n          3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n        </div>\n        @if (linkSectionDescription()) {\n          <p>{{ 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        }\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 mat-raised-button color=\"primary\" type=\"submit\">\n        {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n      </button>\n      @if (!hideCancelButton()) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\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>\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>\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 round\"></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 .toggle{min-width:66px;height:34px}.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:8px}.container .form>* .init-value-section .variations .toggle{margin-top:4px}.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}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n"], 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"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
             type: Component,
@@ -6995,8 +7023,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatSuffix,
                         MatIconButton,
                         LoaderComponent,
-                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n      @if (targetSectionDescription()) {\n        <p>{{ 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      @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      }\n\n      <div class=\"header\">2. {{ flagkSectionHeader() ? flagkSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loading) {\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\">\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 friendly name that best describes your setting.</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 applications will access your setting via this key.</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\" appearance=\"outline\">\n          <mat-label>Hint or description (Optional)</mat-label>\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>A description to help you remember the purpose of your setting.</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            <div class=\"header small\">Variations</div>\n            <div class=\"variations\">\n              <div class=\"variation-header\">\n                This {{ settingTypeText }} allows\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"small-form-field initial-value-environment-type\"\n                  subscriptSizing=\"dynamic\">\n                  <mat-select formControlName=\"useVariations\">\n                    <mat-option [value]=\"false\">free-form values</mat-option>\n                    <mat-option [value]=\"true\">predefined variations only</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              @if (formGroup.controls.useVariations.value) {\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>Served value *</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>Display name (optional)</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>Hint (optional)</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                        {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\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 (formGroup.controls.predefinedVariations.invalid) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                  <div class=\"add-variation\">\n                    <button\n                      type=\"button\"\n                      mat-stroked-button\n                      color=\"primary\"\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n                      [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                      (click)=\"addVariation()\">\n                      <mat-icon>add</mat-icon>\n                      Add variation\n                    </button>\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <div class=\"header small\">Initial values</div>\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 (!hideLinkSection()) {\n        <div class=\"header\">\n          3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n        </div>\n        @if (linkSectionDescription()) {\n          <p>{{ 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        }\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 mat-raised-button color=\"primary\" type=\"submit\">\n        {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n      </button>\n      @if (!hideCancelButton()) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\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>\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>\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 round\"></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 .toggle{min-width:66px;height:34px}.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:8px}.container .form>* .init-value-section .variations .toggle{margin-top:4px}.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}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n"] }]
-        }], propDecorators: { hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], targetSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionHeader", required: false }] }], targetSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionDescription", required: false }] }], flagkSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagkSectionHeader", required: false }] }], flagSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionDescription", required: false }] }], linkSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionHeader", required: false }] }], linkSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionDescription", required: false }] }], hideLinkSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLinkSection", 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"] }] } });
+                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n      @if (targetSectionDescription()) {\n        <p>{{ 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      @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      }\n\n      <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loading) {\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\">\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 friendly name that best describes your setting.</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 applications will access your setting via this key.</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\" appearance=\"outline\">\n          <mat-label>Hint or description (Optional)</mat-label>\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>A description to help you remember the purpose of your setting.</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            <div class=\"header small\">Variations</div>\n            <div class=\"variations\">\n              <div class=\"variation-header\">\n                This {{ settingTypeText }} allows\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"small-form-field initial-value-environment-type\"\n                  subscriptSizing=\"dynamic\">\n                  <mat-select formControlName=\"useVariations\">\n                    <mat-option [value]=\"false\">free-form values</mat-option>\n                    <mat-option [value]=\"true\">predefined variations only</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              @if (formGroup.controls.useVariations.value) {\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>Served value *</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>Display name (optional)</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>Hint (optional)</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                        {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\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 (formGroup.controls.predefinedVariations.invalid) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                  <div class=\"add-variation\">\n                    <button\n                      type=\"button\"\n                      mat-stroked-button\n                      color=\"primary\"\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n                      [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                      (click)=\"addVariation()\">\n                      <mat-icon>add</mat-icon>\n                      Add variation\n                    </button>\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <div class=\"header small\">Initial values</div>\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 (!hideLinkSection()) {\n        <div class=\"header\">\n          3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n        </div>\n        @if (linkSectionDescription()) {\n          <p>{{ 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        }\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 mat-raised-button color=\"primary\" type=\"submit\">\n        {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n      </button>\n      @if (!hideCancelButton()) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\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>\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>\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 round\"></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 .toggle{min-width:66px;height:34px}.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:8px}.container .form>* .init-value-section .variations .toggle{margin-top:4px}.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}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--flag-bool-slider-off);-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:var(--flag-bool-slider-remaining);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--flag-bool-slider-on)}input:focus+.slider{box-shadow:0 0 1px var(--flag-bool-slider-on)}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n"] }]
+        }], propDecorators: { hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], targetSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionHeader", required: false }] }], targetSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionDescription", required: false }] }], flagSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionHeader", required: false }] }], flagSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionDescription", required: false }] }], linkSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionHeader", required: false }] }], linkSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionDescription", required: false }] }], hideLinkSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLinkSection", 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"] }] } });
+
+class CreateConfigComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.formBuilder = inject(NonNullableFormBuilder);
+        this.hideCancelButton = input(true, ...(ngDevMode ? [{ debugName: "hideCancelButton" }] : []));
+        this.createButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "createButtonLabel" }] : []));
+        this.cancelButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonLabel" }] : []));
+        this.targetSectionHeader = input(...(ngDevMode ? [undefined, { debugName: "targetSectionHeader" }] : []));
+        this.targetSectionDescription = input(...(ngDevMode ? [undefined, { debugName: "targetSectionDescription" }] : []));
+        this.configSectionHeader = input(...(ngDevMode ? [undefined, { debugName: "configSectionHeader" }] : []));
+        this.configSectionDescription = input(...(ngDevMode ? [undefined, { debugName: "configSectionDescription" }] : []));
+        this.presetProduct = input(...(ngDevMode ? [undefined, { debugName: "presetProduct" }] : []));
+        this.createInitiated = output();
+        this.resizeRequested = output();
+        this.cancelInitiated = output();
+        this.selectDropdownPanelChangedReqested = output();
+        this.SettingTypeEnum = SettingType;
+        this.FormHelper = FormHelper;
+        this.EvaluationVersion = EvaluationVersion;
+        this.loading = true;
+        this.maxPredefinedVariations = 50;
+        this.maxStringFlagValueLength = 100000;
+        this.selectedProductOrganiaztionId = "0";
+        this.focusIndex = -1;
+        this.settingTypeText = "";
+        this.displayedColumns = [];
+    }
+    ngOnInit() {
+        this.loading = true;
+        this.formGroup = this.formBuilder.group({
+            productId: new FormControl(this.presetProduct()?.productId ? this.presetProduct().productId : "", {
+                nonNullable: true,
+                validators: [Validators.required],
+            }),
+            name: new FormControl("Main Config", {
+                nonNullable: true,
+                validators: [Validators.required, Validators.maxLength(255)],
+            }),
+            description: new FormControl("", {
+                nonNullable: true,
+                validators: [Validators.maxLength(1000)],
+            }),
+            evaluationVersion: new FormControl(EvaluationVersion.V2, {
+                nonNullable: true,
+                validators: [Validators.required],
+            }),
+        });
+        this.loading = false;
+    }
+    create() {
+        if (!this.formGroup.valid) {
+            return;
+        }
+        this.createConfigsService()
+            .createConfig(this.formGroup.controls.productId.value, {
+            name: this.formGroup.controls.name.value,
+            description: this.formGroup.controls.description.value,
+            evaluationVersion: this.formGroup.controls.evaluationVersion.value,
+        })
+            .subscribe({
+            next: config => {
+                this.createInitiated.emit(config.configId);
+            },
+            error: (error) => {
+                ErrorHandler.handleErrors(this.formGroup, error);
+                console.log(error);
+            },
+        });
+    }
+    cancel() {
+        this.cancelInitiated.emit();
+    }
+    selectDropdownPanelChanged(useSelector) {
+        this.selectDropdownPanelChangedReqested.emit(useSelector);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CreateConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CreateConfigComponent, isStandalone: true, selector: "app-create-config", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, configSectionHeader: { classPropertyName: "configSectionHeader", publicName: "configSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, configSectionDescription: { classPropertyName: "configSectionDescription", publicName: "configSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, presetProduct: { classPropertyName: "presetProduct", publicName: "presetProduct", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n      @if (targetSectionDescription()) {\n        <p>{{ targetSectionDescription() }}</p>\n      }\n      @if (this.presetProduct()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProduct()!.productName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProduct()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProduct()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\" />\n\n      <div class=\"header\">2. {{ configSectionHeader() ? configSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (configSectionDescription()) {\n        <p>{{ configSectionDescription() }}</p>\n      }\n      @if (loading) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name</mat-label>\n          <input matInput placeholder=\"Config's name\" formControlName=\"name\" />\n          <mat-hint>A friendly name that best describes your config.</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 hint\" appearance=\"outline\">\n          <mat-label>Config description (Optional)</mat-label>\n          <textarea matInput placeholder=\"This config is responsible for...\" formControlName=\"description\"></textarea>\n          <mat-hint>A description to help you remember the purpose of your config.</mat-hint>\n          @if (formGroup.controls.description.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.description) }}\n            </mat-error>\n          }\n        </mat-form-field>\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 mat-raised-button color=\"primary\" type=\"submit\">\n        {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n      </button>\n      @if (!hideCancelButton()) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\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>* .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 .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}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"], dependencies: [{ kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: "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: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CreateConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-create-config", imports: [
+                        ProductSelectComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RxReactiveFormsModule,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatHint,
+                        MatError,
+                        MatButton,
+                        LoaderComponent,
+                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n      @if (targetSectionDescription()) {\n        <p>{{ targetSectionDescription() }}</p>\n      }\n      @if (this.presetProduct()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProduct()!.productName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProduct()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProduct()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\" />\n\n      <div class=\"header\">2. {{ configSectionHeader() ? configSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (configSectionDescription()) {\n        <p>{{ configSectionDescription() }}</p>\n      }\n      @if (loading) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name</mat-label>\n          <input matInput placeholder=\"Config's name\" formControlName=\"name\" />\n          <mat-hint>A friendly name that best describes your config.</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 hint\" appearance=\"outline\">\n          <mat-label>Config description (Optional)</mat-label>\n          <textarea matInput placeholder=\"This config is responsible for...\" formControlName=\"description\"></textarea>\n          <mat-hint>A description to help you remember the purpose of your config.</mat-hint>\n          @if (formGroup.controls.description.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.description) }}\n            </mat-error>\n          }\n        </mat-form-field>\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 mat-raised-button color=\"primary\" type=\"submit\">\n        {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n      </button>\n      @if (!hideCancelButton()) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\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>* .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 .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}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"] }]
+        }], propDecorators: { hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], targetSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionHeader", required: false }] }], targetSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionDescription", required: false }] }], configSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "configSectionHeader", required: false }] }], configSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "configSectionDescription", required: false }] }], presetProduct: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetProduct", 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"] }] } });
 
 /*
  * Public API Surface of ng-configcat-publicapi-ui
@@ -7006,5 +7129,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthorizationComponent, CONFIGCAT_PUBLICAPI_UI_CONFIGURATION, ConfigSelectComponent, CreateFeatureFlagComponent, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagItemComponent, FormGenerator, FormHelper, InputDisplayNormalizerDirective, LinkFeatureFlagComponent, LoaderComponent, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, Theme, ThemeService, UserComparatorText, UserComparatorType, defaultErrorMessageTypes, featureFlagKeyRegex, getRawSettiongValue, getRawValue, isClearTextComparator, percentageRegex, provideConfigCatPublicApiUi, validatePercentageSum, wholeNumberRegex };
+export { AuthorizationComponent, CONFIGCAT_PUBLICAPI_UI_CONFIGURATION, ConfigSelectComponent, CreateConfigComponent, CreateFeatureFlagComponent, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagItemComponent, FormGenerator, FormHelper, InputDisplayNormalizerDirective, LinkFeatureFlagComponent, LoaderComponent, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, Theme, ThemeService, UserComparatorText, UserComparatorType, defaultErrorMessageTypes, featureFlagKeyRegex, getRawSettiongValue, getRawValue, isClearTextComparator, percentageRegex, provideConfigCatPublicApiUi, validatePercentageSum, wholeNumberRegex };
 //# sourceMappingURL=ng-configcat-publicapi-ui.mjs.map