ng-configcat-publicapi-ui 5.3.15 → 5.4.1

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

@@ -43,6 +43,7 @@ import { CdkCopyToClipboard, Clipboard } from '@angular/cdk/clipboard';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 const defaultPublicApiBasePath = "https://api.configcat.com";
 const defaultDashboardBasePath = "https://app.configcat.com";
@@ -289,6 +290,9 @@ class FormHelper {
         if (control.hasError("max")) {
             return "The value must be less than " + (control.errors["max"].max + 1) + ".";
         }
+        if (control.hasError("json")) {
+            return "The value must be valid JSON.";
+        }
         return "";
     }
     /**
@@ -690,6 +694,17 @@ function nonEmptyStringValidator(c) {
     }
     return errors;
 }
+function jsonValidator(c) {
+    if (typeof c.value !== "string")
+        return { json: { valid: false } };
+    try {
+        JSON.parse(c.value);
+    }
+    catch {
+        return { json: { valid: false } };
+    }
+    return null;
+}
 // eslint-disable-next-line sonarjs/no-invariant-returns
 function validateUniqueVariations(c) {
     const control = c;
@@ -748,36 +763,36 @@ function getValueControl(control) {
 
 function generateSettingValuesFormGroup(model, readOnly, settings, featureFlagLimitations) {
     return new FormGroup({
-        defaultValue: generateValueFormGroup(model.defaultValue, model.setting.settingType, model.setting.predefinedVariations, readOnly, featureFlagLimitations),
+        defaultValue: generateValueFormGroup(model.defaultValue, model.setting.settingType, model.setting.predefinedVariations, readOnly, featureFlagLimitations, model.setting.isJson),
         percentageEvaluationAttribute: generatePercentageEvaluationAttributeFormControl(model.percentageEvaluationAttribute, readOnly),
-        targetingRules: new FormArray(model.targetingRules.map(ft => generateTargetingRuleFormGroup(ft, model.setting.settingType, model.setting.predefinedVariations, readOnly, settings, featureFlagLimitations))),
+        targetingRules: new FormArray(model.targetingRules.map(ft => generateTargetingRuleFormGroup(ft, model.setting.settingType, model.setting.predefinedVariations, readOnly, settings, featureFlagLimitations, model.setting.isJson))),
     });
 }
 function generatePercentageEvaluationAttributeFormControl(percentageEvaluationAttribute, readOnly) {
     return new FormControl({ value: percentageEvaluationAttribute, disabled: readOnly }, { validators: [validateEmptyString, Validators.maxLength(1000)], nonNullable: true });
 }
-function generateTargetingRuleFormGroup(model, settingType, predefinedVariations, readOnly, settings, featureFlagLimitations) {
+function generateTargetingRuleFormGroup(model, settingType, predefinedVariations, readOnly, settings, featureFlagLimitations, isJson) {
     const conditions = new FormArray(model.conditions.map(tr => generateConditionFormGroup(tr, readOnly, settings, featureFlagLimitations)));
     if (model.percentageOptions.length > 0) {
         return new FormGroup({
             conditions,
-            percentageOptions: new FormArray(model.percentageOptions.map(pr => generatePercentageOptionFormGroup(pr, settingType, predefinedVariations, readOnly, featureFlagLimitations)), [validatePercentageSum]),
+            percentageOptions: new FormArray(model.percentageOptions.map(pr => generatePercentageOptionFormGroup(pr, settingType, predefinedVariations, readOnly, featureFlagLimitations, isJson)), [validatePercentageSum]),
         });
     }
     else if (model.value) {
         return new FormGroup({
             conditions,
-            value: generateValueFormGroup(model.value, settingType, predefinedVariations, readOnly, featureFlagLimitations),
+            value: generateValueFormGroup(model.value, settingType, predefinedVariations, readOnly, featureFlagLimitations, isJson),
         });
     }
     throw Error("Invalid model");
 }
-function generateTargetingRuleWithEmptyPercentageOptions(settingType, predefinedVariations, readOnly, settings, featureFlagLimitations) {
+function generateTargetingRuleWithEmptyPercentageOptions(settingType, predefinedVariations, readOnly, settings, featureFlagLimitations, isJson) {
     return generateTargetingRuleFormGroup({
         conditions: [],
         percentageOptions: getEmptyPercentageOptions(settingType, predefinedVariations, featureFlagLimitations),
         value: null,
-    }, settingType, predefinedVariations, readOnly, settings, featureFlagLimitations);
+    }, settingType, predefinedVariations, readOnly, settings, featureFlagLimitations, isJson);
 }
 function getEmptyPercentageOptions(settingType, predefinedVariations, featureFlagLimitations) {
     if (predefinedVariations.length) {
@@ -807,7 +822,7 @@ function getEmptyPercentageOptions(settingType, predefinedVariations, featureFla
             throw new Error("Invalid SettingType");
     }
 }
-function generatePercentageOptionFormGroup(model, settingType, predefinedVariations, readOnly, featureFlagLimitations) {
+function generatePercentageOptionFormGroup(model, settingType, predefinedVariations, readOnly, featureFlagLimitations, isJson) {
     return new FormGroup({
         percentage: new FormControl({ value: model.percentage, disabled: readOnly }, {
             nonNullable: true,
@@ -819,7 +834,7 @@ function generatePercentageOptionFormGroup(model, settingType, predefinedVariati
                 Validators.pattern(percentageRegex),
             ],
         }),
-        value: generateValueFormGroup(model.value, settingType, predefinedVariations, readOnly || settingType === SettingType.Boolean, featureFlagLimitations),
+        value: generateValueFormGroup(model.value, settingType, predefinedVariations, readOnly || settingType === SettingType.Boolean, featureFlagLimitations, isJson),
     });
 }
 function generateConditionFormGroup(model, readOnly, settings, featureFlagLimitations) {
@@ -876,14 +891,14 @@ function generatePrerequisiteFlagConditionFormGroup(value, readOnly, settings, f
         return new FormGroup({
             prerequisiteSettingId: new FormControl({ value: value.prerequisiteSettingId, disabled: readOnly }, { nonNullable: true, validators: [Validators.required] }),
             comparator: new FormControl({ value: comparator, disabled: readOnly }, { nonNullable: true, validators: [Validators.required] }),
-            prerequisiteComparisonValue: generateValueFormGroup({ boolValue: true, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null }, setting.settingType, setting.predefinedVariations, readOnly, featureFlagLimitations),
+            prerequisiteComparisonValue: generateValueFormGroup({ boolValue: true, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null }, setting.settingType, setting.predefinedVariations, readOnly, featureFlagLimitations, setting.isJson),
         });
     }
     else {
         return new FormGroup({
             prerequisiteSettingId: new FormControl({ value: value.prerequisiteSettingId, disabled: readOnly }, { nonNullable: true, validators: [Validators.required] }),
             comparator: new FormControl({ value: value.comparator, disabled: readOnly }, { nonNullable: true, validators: [Validators.required] }),
-            prerequisiteComparisonValue: generateValueFormGroup(value.prerequisiteComparisonValue, setting.settingType, setting.predefinedVariations, readOnly, featureFlagLimitations),
+            prerequisiteComparisonValue: generateValueFormGroup(value.prerequisiteComparisonValue, setting.settingType, setting.predefinedVariations, readOnly, featureFlagLimitations, setting.isJson),
         });
     }
 }
@@ -903,7 +918,7 @@ function generateEmptyPrerequisiteFlagConditionFormGroup(featureFlagLimitations)
             nonNullable: true,
             validators: [Validators.required],
         }),
-        prerequisiteComparisonValue: generateValueFormGroup({ boolValue: true, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null }, SettingType.Boolean, [], false, featureFlagLimitations),
+        prerequisiteComparisonValue: generateValueFormGroup({ boolValue: true, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null }, SettingType.Boolean, [], false, featureFlagLimitations, false),
     });
 }
 function getNextIndex(formArray) {
@@ -1016,10 +1031,10 @@ function generatePrerequisiteDefaultValue(settingType, predefinedVariations) {
             throw new Error("Invalid SettingType");
     }
 }
-function generateDefaultValueFormGroup(settingType, predefinedVariations, readOnly, featureFlagLimitations) {
-    return generateValueFormGroup(generateDefaultValue(settingType, predefinedVariations), settingType, predefinedVariations, readOnly, featureFlagLimitations);
+function generateDefaultValueFormGroup(settingType, predefinedVariations, readOnly, featureFlagLimitations, isJson) {
+    return generateValueFormGroup(generateDefaultValue(settingType, predefinedVariations), settingType, predefinedVariations, readOnly, featureFlagLimitations, isJson);
 }
-function generateValueFormGroup(value, settingType, predefinedVariations, readOnly, featureFlagLimitations) {
+function generateValueFormGroup(value, settingType, predefinedVariations, readOnly, featureFlagLimitations, isJson) {
     if (predefinedVariations.length) {
         return new FormGroup({
             predefinedVariationId: new FormControl({ value: value.predefinedVariationId ?? predefinedVariations[0].predefinedVariationId, disabled: readOnly }, { nonNullable: true, validators: [Validators.required] }),
@@ -1032,7 +1047,7 @@ function generateValueFormGroup(value, settingType, predefinedVariations, readOn
             });
         case SettingType.String:
             return new FormGroup({
-                stringValue: new FormControl({ value: value.stringValue ?? "", disabled: readOnly }, { nonNullable: true, validators: getValidatorsForSettingType(settingType, featureFlagLimitations) }),
+                stringValue: new FormControl({ value: value.stringValue ?? "", disabled: readOnly }, { nonNullable: true, validators: getValidatorsForSettingType(settingType, featureFlagLimitations, isJson) }),
             });
         case SettingType.Int:
             return new FormGroup({
@@ -1094,7 +1109,7 @@ function getComparisonValueType(comparator) {
             throw new Error("Invalid comparator");
     }
 }
-function getValidatorsForSettingType(settingType, featureFlagLimitations) {
+function getValidatorsForSettingType(settingType, featureFlagLimitations, isJson = false) {
     switch (settingType) {
         case SettingType.Int:
             return [
@@ -1112,7 +1127,9 @@ function getValidatorsForSettingType(settingType, featureFlagLimitations) {
                 Validators.max(Number.MAX_VALUE),
             ];
         case SettingType.String:
-            return [Validators.required, Validators.maxLength(featureFlagLimitations.maxStringFlagValueLength)];
+            return isJson
+                ? [Validators.required, Validators.maxLength(featureFlagLimitations.maxStringFlagValueLength), jsonValidator]
+                : [Validators.required, Validators.maxLength(featureFlagLimitations.maxStringFlagValueLength)];
         case SettingType.Boolean:
             return [Validators.required];
         default:
@@ -1962,7 +1979,6 @@ class AceEditorComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "valueSetEffect" }] : /* istanbul ignore next */ []));
         this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
-        this.valueChange = output();
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onChange = output();
     }
@@ -1995,7 +2011,7 @@ class AceEditorComponent {
                     this.onChangeModel(this._value);
                 }
                 this.onChange.emit(this._value);
-                this.valueChange.emit(this._value);
+                this.value.set(this._value);
             }
         });
     }
@@ -2051,7 +2067,7 @@ class AceEditorComponent {
         /* unused */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: AceEditorComponent, isStandalone: true, selector: "app-ace-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", onChange: "onChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: AceEditorComponent, isStandalone: true, selector: "app-ace-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AceEditorComponent),
@@ -2068,7 +2084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             multi: true,
                         },
                     ], preserveWhitespaces: false, template: "<div #aceEditor class=\"ace-editor-container\"></div>\n", styles: [".ace-editor-container{width:100%;height:100%;border:thin solid var(--input-border-color);box-sizing:border-box}\n"] }]
-        }], propDecorators: { editor: [{ type: i0.ViewChild, args: ["aceEditor", { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
+        }], propDecorators: { editor: [{ type: i0.ViewChild, args: ["aceEditor", { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
 
 class PopOutEditorComponent {
     constructor() {
@@ -2807,9 +2823,8 @@ class SettingItemComponent extends BaseComponent {
         this.showEnvironmentName = input(true, ...(ngDevMode ? [{ debugName: "showEnvironmentName" }] : /* istanbul ignore next */ []));
         this.deleteSettingRequested = output();
         this.loadSucceeded = output();
-        this.loadFailed = output();
         this.saveSucceeded = output();
-        this.saveFailed = output();
+        this.componentError = output();
         this.formValuesChanged = output();
         this.loadSettingValues = () => {
             return this.createSettingValuesService()
@@ -2825,7 +2840,7 @@ class SettingItemComponent extends BaseComponent {
                 };
                 return settingValues;
             }), catchError((error) => {
-                this.loadFailed.emit(error);
+                this.componentError.emit(error);
                 throw error;
             }));
         };
@@ -2835,6 +2850,7 @@ class SettingItemComponent extends BaseComponent {
                 .pipe(map(segments => {
                 return segments;
             }), catchError((error) => {
+                this.componentError.emit(error);
                 throw error;
             }));
         };
@@ -2856,6 +2872,9 @@ class SettingItemComponent extends BaseComponent {
                 };
                 this.saveSucceeded.emit(settingValues);
                 return settingValues;
+            }), catchError((error) => {
+                this.componentError.emit(error);
+                throw error;
             }));
         };
         this.dashboardBasePath = this.getDashboardBasePath();
@@ -2863,8 +2882,8 @@ class SettingItemComponent extends BaseComponent {
     itemLoadSucceeded() {
         this.loadSucceeded.emit(true);
     }
-    itenSaveFailed(error) {
-        this.saveFailed.emit(error);
+    itemSaveFailed(error) {
+        this.componentError.emit(error);
     }
     onDeleteSettingRequested(setting) {
         this.deleteSettingRequested.emit({
@@ -2877,12 +2896,12 @@ class SettingItemComponent extends BaseComponent {
         this.formValuesChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SettingItemComponent, isStandalone: true, selector: "app-setting-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itenSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "app-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged", "saveFailed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SettingItemComponent, isStandalone: true, selector: "app-setting-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", saveSucceeded: "saveSucceeded", componentError: "componentError", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itemSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], dependencies: [{ kind: "component", type: SettingListComponent, selector: "app-setting-list", inputs: ["productId", "environmentId", "configId", "dashboardBasePath", "canDeleteSetting", "onSave", "loadSettingValues", "loadSegments", "deleteSettingText", "showEnvironmentName"], outputs: ["loadSucceeded", "deleteSettingRequested", "formValuesChanged", "saveFailed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SettingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-setting-item", imports: [SettingListComponent], template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itenSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], saveFailed: [{ type: i0.Output, args: ["saveFailed"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
+            args: [{ selector: "app-setting-item", imports: [SettingListComponent], template: "<app-setting-list\n  [canDeleteSetting]=\"canDeleteSetting()\"\n  [onSave]=\"handleSave\"\n  [loadSettingValues]=\"loadSettingValues\"\n  [loadSegments]=\"loadSegments\"\n  [deleteSettingText]=\"deleteSettingText()\"\n  [showEnvironmentName]=\"showEnvironmentName()\"\n  [productId]=\"productId()\"\n  [configId]=\"configId()\"\n  [environmentId]=\"environmentId()\"\n  [dashboardBasePath]=\"dashboardBasePath\"\n  (loadSucceeded)=\"itemLoadSucceeded()\"\n  (saveFailed)=\"itemSaveFailed($event)\"\n  (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n  (formValuesChanged)=\"onFormValuesChanged()\" />\n", styles: [".end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media(max-width:1200px){.setting-full .setting-details{width:300px}}@media(max-width:700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], componentError: [{ type: i0.Output, args: ["componentError"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
 
 class AuthorizationComponent {
     constructor() {
@@ -2955,6 +2974,7 @@ class ProductSelectComponent extends BaseSelectComponent {
         super(...arguments);
         this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : /* istanbul ignore next */ []));
         this.preSelectedProductId = input(...(ngDevMode ? [undefined, { debugName: "preSelectedProductId" }] : /* istanbul ignore next */ []));
+        this.componentError = output();
         this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
         this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
         this.filteredProducts = linkedSignal(() => {
@@ -2991,6 +3011,9 @@ class ProductSelectComponent extends BaseSelectComponent {
                     else {
                         this.valueFormControl().setValue("");
                     }
+                }), catchError$1((error) => {
+                    this.componentError.emit(error);
+                    return of([]);
                 }));
             },
         });
@@ -3006,7 +3029,7 @@ class ProductSelectComponent extends BaseSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 } }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    #productSelect=\"matSelect\"\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"onSelectOpenedChange($event)\">\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        [matTooltipDisabled]=\"!productSelect.panelOpen\"\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: "21.2.17", 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 } }, outputs: { componentError: "componentError" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    #productSelect=\"matSelect\"\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"onSelectOpenedChange($event)\">\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        [matTooltipDisabled]=\"!productSelect.panelOpen\"\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: "21.2.17", ngImport: i0, type: ProductSelectComponent, decorators: [{
             type: Component,
@@ -3026,7 +3049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatSuffix,
                         MatIconButton,
                     ], template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n  <mat-label>Product</mat-label>\n  <mat-select\n    #productSelect=\"matSelect\"\n    placeholder=\"Product\"\n    name=\"productValue\"\n    [formControl]=\"valueFormControl()\"\n    [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n    (openedChange)=\"onSelectOpenedChange($event)\">\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        [matTooltipDisabled]=\"!productSelect.panelOpen\"\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 }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], preSelectedProductId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedProductId", required: false }] }], componentError: [{ type: i0.Output, args: ["componentError"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
 
 class ConfigSelectComponent extends BaseSelectComponent {
     constructor() {
@@ -3034,6 +3057,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
         this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : /* istanbul ignore next */ []));
         this.productId = input.required(...(ngDevMode ? [{ debugName: "productId" }] : /* istanbul ignore next */ []));
         this.preSelectedConfigId = input(...(ngDevMode ? [undefined, { debugName: "preSelectedConfigId" }] : /* istanbul ignore next */ []));
+        this.componentError = output();
         this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
         this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
         this.filteredConfigs = linkedSignal(() => {
@@ -3064,6 +3088,9 @@ class ConfigSelectComponent extends BaseSelectComponent {
                     else {
                         this.valueFormControl().setValue("");
                     }
+                }), catchError$1((error) => {
+                    this.componentError.emit(error);
+                    return of([]);
                 }));
             },
         });
@@ -3079,7 +3106,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigSelectComponent, isStandalone: true, selector: "app-config-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, preSelectedConfigId: { classPropertyName: "preSelectedConfigId", publicName: "preSelectedConfigId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigSelectComponent, isStandalone: true, selector: "app-config-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, preSelectedConfigId: { classPropertyName: "preSelectedConfigId", publicName: "preSelectedConfigId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentError: "componentError" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ConfigSelectComponent),
@@ -3111,13 +3138,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatSuffix,
                         MatIconButton,
                     ], template: "@if (configs.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Config</mat-label>\n    <mat-select\n      #configSelect=\"matSelect\"\n      placeholder=\"Config\"\n      name=\"value\"\n      disableOptionCentering\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\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          [matTooltipDisabled]=\"!configSelect.panelOpen\"\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 }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
+        }], 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 }] }], componentError: [{ type: i0.Output, args: ["componentError"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
 
 class EnvironmentSelectComponent extends BaseSelectComponent {
     constructor() {
         super(...arguments);
         this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : /* istanbul ignore next */ []));
         this.productId = input.required(...(ngDevMode ? [{ debugName: "productId" }] : /* istanbul ignore next */ []));
+        this.componentError = output();
         this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
         this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
         this.filteredEnvironments = linkedSignal(() => {
@@ -3143,6 +3171,9 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
                     else {
                         this.valueFormControl().setValue("");
                     }
+                }), catchError$1((error) => {
+                    this.componentError.emit(error);
+                    return of([]);
                 }));
             },
         });
@@ -3158,7 +3189,7 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EnvironmentSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 } }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (environments.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      #environmentSelect=\"matSelect\"\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\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\n              ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n              : `Name: ${environment.name}`\n          \"\n          [matTooltipDisabled]=\"!environmentSelect.panelOpen\"\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: "21.2.17", 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 } }, outputs: { componentError: "componentError" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (environments.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      #environmentSelect=\"matSelect\"\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\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\n              ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n              : `Name: ${environment.name}`\n          \"\n          [matTooltipDisabled]=\"!environmentSelect.panelOpen\"\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: "21.2.17", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
             type: Component,
@@ -3178,13 +3209,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatSuffix,
                         MatIconButton,
                     ], template: "@if (environments.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Environment</mat-label>\n    <mat-select\n      #environmentSelect=\"matSelect\"\n      placeholder=\"Environment\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\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\n              ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n              : `Name: ${environment.name}`\n          \"\n          [matTooltipDisabled]=\"!environmentSelect.panelOpen\"\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 }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], componentError: [{ type: i0.Output, args: ["componentError"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
 
 class SettingSelectComponent extends BaseSelectComponent {
     constructor() {
         super(...arguments);
         this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : /* istanbul ignore next */ []));
         this.configId = input.required(...(ngDevMode ? [{ debugName: "configId" }] : /* istanbul ignore next */ []));
+        this.componentError = output();
         this.SettingTypeEnum = SettingType;
         this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
         this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
@@ -3212,6 +3244,9 @@ class SettingSelectComponent extends BaseSelectComponent {
                     else {
                         this.valueFormControl().setValue("");
                     }
+                }), catchError$1((error) => {
+                    this.componentError.emit(error);
+                    return of([]);
                 }));
             },
         });
@@ -3234,7 +3269,7 @@ class SettingSelectComponent extends BaseSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SettingSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SettingSelectComponent, isStandalone: true, selector: "app-setting-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (settings.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select\n      #settingSelect=\"matSelect\"\n      placeholder=\"Feature flag or setting\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\n      <mat-select-trigger>\n        @if (valueFormControl().value) {\n          {{ this.selectedSettingTriggerText() }}\n        }\n      </mat-select-trigger>\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter settings\" [(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 (setting of filteredSettings(); track setting.settingId) {\n        <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n          <div class=\"feature-flag-selector-item\">\n            @switch (setting.settingType) {\n              @case (SettingTypeEnum.Boolean) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/feature_flag.svg\"\n                  alt=\"feature flag\" />\n              }\n              @case (SettingTypeEnum.String) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/text.svg\"\n                  alt=\"text setting\" />\n              }\n              @case (SettingTypeEnum.Int) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/whole.svg\"\n                  alt=\"whole number setting\" />\n              }\n              @case (SettingTypeEnum.Double) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/decimal.svg\"\n                  alt=\"decimal number setting\" />\n              }\n            }\n            <div class=\"item-text-wrapper\">\n              <span [matTooltip]=\"setting.name\" [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.name\">\n                {{ setting.name }}\n              </span>\n              <code\n                class=\"highlight copyable-like small\"\n                [matTooltip]=\"setting.key\"\n                [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.key\">\n                {{ setting.key }}\n              </code>\n            </div>\n          </div>\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No setting available.</mat-option>\n      }\n      @if (!hasFilteredSetting()) {\n        <mat-option disabled>No setting 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}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\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"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SettingSelectComponent, isStandalone: true, selector: "app-setting-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { componentError: "componentError" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (settings.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select\n      #settingSelect=\"matSelect\"\n      placeholder=\"Feature flag or setting\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\n      <mat-select-trigger>\n        @if (valueFormControl().value) {\n          {{ this.selectedSettingTriggerText() }}\n        }\n      </mat-select-trigger>\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter settings\" [(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 (setting of filteredSettings(); track setting.settingId) {\n        <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n          <div class=\"feature-flag-selector-item\">\n            @switch (setting.settingType) {\n              @case (SettingTypeEnum.Boolean) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/feature_flag.svg\"\n                  alt=\"feature flag\" />\n              }\n              @case (SettingTypeEnum.String) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/text.svg\"\n                  alt=\"text setting\" />\n              }\n              @case (SettingTypeEnum.Int) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/whole.svg\"\n                  alt=\"whole number setting\" />\n              }\n              @case (SettingTypeEnum.Double) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/decimal.svg\"\n                  alt=\"decimal number setting\" />\n              }\n            }\n            <div class=\"item-text-wrapper\">\n              <span [matTooltip]=\"setting.name\" [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.name\">\n                {{ setting.name }}\n              </span>\n              <code\n                class=\"highlight copyable-like small\"\n                [matTooltip]=\"setting.key\"\n                [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.key\">\n                {{ setting.key }}\n              </code>\n            </div>\n          </div>\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No setting available.</mat-option>\n      }\n      @if (!hasFilteredSetting()) {\n        <mat-option disabled>No setting 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}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\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"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SettingSelectComponent, decorators: [{
             type: Component,
@@ -3255,7 +3290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatIconButton,
                         MatSelectTrigger,
                     ], template: "@if (settings.hasValue()) {\n  <mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select\n      #settingSelect=\"matSelect\"\n      placeholder=\"Feature flag or setting\"\n      name=\"value\"\n      [formControl]=\"valueFormControl()\"\n      [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n      (openedChange)=\"onSelectOpenedChange($event)\">\n      <mat-select-trigger>\n        @if (valueFormControl().value) {\n          {{ this.selectedSettingTriggerText() }}\n        }\n      </mat-select-trigger>\n      <div class=\"menu-filter small-density-form-field\">\n        <mat-form-field\n          subscriptSizing=\"dynamic\"\n          appearance=\"outline\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\">\n          <input matInput placeholder=\"Filter settings\" [(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 (setting of filteredSettings(); track setting.settingId) {\n        <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n          <div class=\"feature-flag-selector-item\">\n            @switch (setting.settingType) {\n              @case (SettingTypeEnum.Boolean) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/feature_flag.svg\"\n                  alt=\"feature flag\" />\n              }\n              @case (SettingTypeEnum.String) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/text.svg\"\n                  alt=\"text setting\" />\n              }\n              @case (SettingTypeEnum.Int) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/whole.svg\"\n                  alt=\"whole number setting\" />\n              }\n              @case (SettingTypeEnum.Double) {\n                <img\n                  class=\"feature-flag-selector-img\"\n                  src=\"./assets/images/setting-types/decimal.svg\"\n                  alt=\"decimal number setting\" />\n              }\n            }\n            <div class=\"item-text-wrapper\">\n              <span [matTooltip]=\"setting.name\" [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.name\">\n                {{ setting.name }}\n              </span>\n              <code\n                class=\"highlight copyable-like small\"\n                [matTooltip]=\"setting.key\"\n                [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.key\">\n                {{ setting.key }}\n              </code>\n            </div>\n          </div>\n        </mat-option>\n      } @empty {\n        <mat-option disabled>No setting available.</mat-option>\n      }\n      @if (!hasFilteredSetting()) {\n        <mat-option disabled>No setting 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}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\n"] }]
-        }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], componentError: [{ type: i0.Output, args: ["componentError"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
 
 class DeleteSettingDialogComponent {
     constructor() {
@@ -3325,6 +3360,9 @@ class ErrorHandler {
                         formGroup.setErrors({ serverSide: "Something went wrong." });
                     }
                     break;
+                case 401:
+                    formGroup.setErrors({ serverSide: "Unauthorized access. Try to refresh the page or log in again." });
+                    break;
                 case 402:
                     formGroup.setErrors({ serverSide: "You have reached the limits of your plan." });
                     break;
@@ -3333,6 +3371,7 @@ class ErrorHandler {
                     break;
                 default:
                     formGroup.setErrors({ serverSide: "Something went wrong on our side. This is not your fault. Please try again." });
+                    console.log(error);
                     break;
             }
         }
@@ -3340,6 +3379,7 @@ class ErrorHandler {
             formGroup.setErrors({
                 serverSide: "Something went wrong on our side. This is not your fault. Please try again.",
             });
+            console.log(error);
         }
     }
 }
@@ -3529,16 +3569,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class PopoutTextEditorDialogComponent {
     constructor() {
+        this.formHelper = FormHelper;
         this.dialogRef = inject(MatDialogRef);
-        this.data = inject(MAT_DIALOG_DATA);
         this.destroyRef = inject(DestroyRef);
-        this.jsonData = null;
-        this.format = "text";
-        this.formHelper = FormHelper;
+        this.data = inject(MAT_DIALOG_DATA);
+        this.jsonData = signal(this.data.value, ...(ngDevMode ? [{ debugName: "jsonData" }] : /* istanbul ignore next */ []));
+        this.format = signal(this.data.disableTextEditor ? "json" : "text", ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.control = new FormControl({ value: this.data.value, disabled: this.data.readOnly }, { nonNullable: true, validators: [...this.data.validators] });
     }
     ngOnInit() {
-        this.jsonData = this.data.value;
-        this.control = new FormControl({ value: this.data.value, disabled: this.data.readOnly }, { nonNullable: true, validators: [...this.data.validators] });
         if (!this.control.valid) {
             this.control.markAsTouched();
         }
@@ -3546,8 +3585,8 @@ class PopoutTextEditorDialogComponent {
             this.control.setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
             this.control.markAsDirty();
             this.control.markAsTouched();
-            if (this.jsonData !== value) {
-                this.jsonData = value;
+            if (this.jsonData() !== value) {
+                this.jsonData.set(value);
             }
         });
     }
@@ -3570,7 +3609,7 @@ class PopoutTextEditorDialogComponent {
         this.dialogRef.close({ value: this.control.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PopoutTextEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PopoutTextEditorDialogComponent, isStandalone: true, selector: "app-popout-text-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        appPastedDataTrimmer\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 && !data.disableTextEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format() === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        appPastedDataTrimmer\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format() === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PopoutTextEditorDialogComponent, decorators: [{
             type: Component,
@@ -3594,7 +3633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatButton,
                         MatDialogClose,
                         PastedDataTrimmerDirective,
-                    ], template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n  <p class=\"description\">\n    {{ data.description }}\n  </p>\n  @if (!data.disableJsonEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        appPastedDataTrimmer\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
+                    ], 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 && !data.disableTextEditor) {\n    <mat-button-toggle-group [(ngModel)]=\"format\">\n      <mat-button-toggle value=\"text\">Text</mat-button-toggle>\n      <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n    </mat-button-toggle-group>\n  }\n\n  @if (format() === \"text\") {\n    <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n      <textarea\n        matInput\n        autofocus\n        focus\n        rows=\"17\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"17\"\n        cdkAutosizeMaxRows=\"26\"\n        appPastedDataTrimmer\n        [formControl]=\"control\"></textarea>\n      @if (control.invalid) {\n        <mat-error>\n          {{ formHelper.getErrorMessage(control) }}\n        </mat-error>\n      }\n      @if (data.maxValueLength && data.maxValueLength - (control.value?.length ?? 0) > -1) {\n        <mat-hint>\n          Remaining characters:\n          {{ data.maxValueLength - (control.value?.length ?? 0) }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  } @else if (format() === \"json\") {\n    <div class=\"editor-container\">\n      <app-ace-editor [readOnly]=\"data.readOnly\" [(value)]=\"jsonData\" (onChange)=\"onJsonChanged($event)\" />\n      @if (control.invalid) {\n        <span class=\"error mat-mdc-form-field-error\">\n          {{ formHelper.getErrorMessage(control) }}\n        </span>\n      }\n    </div>\n  }\n</div>\n<div mat-dialog-actions>\n  @if (!data.readOnly) {\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"!control.touched || !control.valid\"\n      (click)=\"set()\">\n      Set\n    </button>\n    <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n  } @else {\n    <button type=\"button\" mat-stroked-button color=\"primary\" [mat-dialog-close]>Close</button>\n  }\n</div>\n", styles: [".container{width:100%}.container .editor-container{margin:10px 0;width:100%;height:432px}.container .editor-clear{width:100%}.container .error{font-size:10px;padding:0 8px}.container .description{padding:5px 0}\n"] }]
         }] });
 
 class VariationsDialogComponent {
@@ -3612,6 +3651,7 @@ class VariationsDialogComponent {
         this.formHelper = FormHelper;
         this.stringValidators = [Validators.required,
             Validators.maxLength(this.data.maxStringFlagValueLength)];
+        this.jsonValidators = [...this.stringValidators, jsonValidator];
         this.intValidators = [
             Validators.required,
             validateNumberNan,
@@ -3701,7 +3741,7 @@ class VariationsDialogComponent {
                 });
             case SettingType.String:
                 return this.formBuilder.group({
-                    stringValue: new FormControl({ value: predefinedVariationValue.stringValue, disabled }, { nonNullable: true, validators: this.stringValidators }),
+                    stringValue: new FormControl({ value: predefinedVariationValue.stringValue, disabled }, { nonNullable: true, validators: this.data.isJson ? this.jsonValidators : this.stringValidators }),
                 });
             case SettingType.Int:
                 return this.formBuilder.group({
@@ -3753,7 +3793,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,
+                disableTextEditor: this.data.isJson,
             },
         });
         dialogRef.afterClosed().subscribe(data => {
@@ -3774,6 +3814,7 @@ class VariationsDialogComponent {
                 validators: [Validators.maxLength(1000)],
                 maxValueLength: 1000,
                 description: "Modify the text within the editor to change the hint.",
+                disableJsonEditor: true,
             },
         });
         dialogRef.afterClosed().subscribe(data => {
@@ -3858,7 +3899,7 @@ class VariationsDialogComponent {
         return getPredefinedVariationColorIndex(this.settingType, getRawPredefinedVariationValue(row.controls.value), index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VariationsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n  <div mat-dialog-content class=\"content\">\n    <app-loader />\n  </div>\n} @else {\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n    <div class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>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 target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    } @else if (row.controls.usages.controls.length === 0) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n                        {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n                        usage{{\n                          row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n  <div mat-dialog-content class=\"content\">\n    <app-loader />\n  </div>\n} @else {\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n    <div class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Served value *</span>\n                <mat-icon\n                  matTooltip=\"Your application will get this value when evaluating the setting.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                @switch (settingType) {\n                  @case (SettingType.Boolean) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.boolValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.String) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.stringValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Int) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.intValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Double) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.doubleValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                }\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Display name (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                  <input\n                    matInput\n                    [formControl]=\"row.controls.name\"\n                    [placeholder]=\"row.controls.valueForComparison.value\" />\n                  @if (row.controls.name.invalid) {\n                    <mat-error class=\"small-error\">\n                      {{ formHelper.getErrorMessage(row.controls.name) }}\n                    </mat-error>\n                  }\n                </mat-form-field>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"hint\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Hint (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n                  <input matInput [formControl]=\"row.controls.hint\" />\n                  <button\n                    matSuffix\n                    class=\"input-suffix-button\"\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Advanced editor\"\n                    (click)=\"expandHint(row.controls.hint)\">\n                    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                  </button>\n                  @if (row.controls.hint.invalid) {\n                    <mat-error>\n                      {{ formHelper.getErrorMessage(row.controls.hint) }}\n                    </mat-error>\n                  }\n                </mat-form-field>\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"variationId\">\n            <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"usages\">\n            <th *matHeaderCellDef mat-header-cell>Usages</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"usages\">\n                <button\n                  type=\"button\"\n                  class=\"usage-button\"\n                  mat-icon-button\n                  [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n                  (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n                  @if (row.controls.usagesExpanded.value) {\n                    <mat-icon>expand_less</mat-icon>\n                  } @else {\n                    <mat-icon>expand_more</mat-icon>\n                  }\n                </button>\n                <div>\n                  @if (row.controls.usagesExpanded.value) {\n                    @for (usage of row.controls.usages.controls; track $index) {\n                      <div class=\"usage\">\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    } @else if (row.controls.usages.controls.length === 0) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n                        {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n                        usage{{\n                          row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .centered{display:flex;align-items:center}.content mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .dialog-table .header-tooltip-icon{font-size:14px;width:14px;height:14px}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VariationsDialogComponent, decorators: [{
             type: Component,
@@ -3897,7 +3938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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 class=\"content\">\n      <div class=\"dialog-description\" mat-dialog-content>\n        @if (data.manage) {\n          <p>\n            Add, delete, and update predefined variations of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>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 target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    } @else if (row.controls.usages.controls.length === 0) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n                        {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n                        usage{{\n                          row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\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 of the\n            <strong>{{ data.settingName }}</strong>\n            setting.\n            <br />\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n            <br />\n            You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n            variation is used.\n          </p>\n        } @else {\n          <p>\n            The\n            <strong>served value</strong>\n            is sent to SDKs and received by your applications. The\n            <strong>display name</strong>\n            appears in the targeting UI.\n          </p>\n        }\n      </div>\n\n      <div class=\"dialog-table\" mat-dialog-content>\n        <table\n          mat-table\n          cdkDropList\n          [dataSource]=\"dataSource\"\n          [cdkDropListData]=\"dataSource\"\n          [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"reorder\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"drag-handle\">\n                <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n                  <mat-icon>drag_indicator</mat-icon>\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"color\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"value\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Served value *</span>\n                <mat-icon\n                  matTooltip=\"Your application will get this value when evaluating the setting.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                @switch (settingType) {\n                  @case (SettingType.Boolean) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.boolValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.String) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.stringValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Int) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.intValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                  @case (SettingType.Double) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        formControl: row.controls.value.controls.doubleValue,\n                        setFocus: i === focusIndex,\n                      }\" />\n                  }\n                }\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Display name (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                  <input\n                    matInput\n                    [formControl]=\"row.controls.name\"\n                    [placeholder]=\"row.controls.valueForComparison.value\" />\n                  @if (row.controls.name.invalid) {\n                    <mat-error class=\"small-error\">\n                      {{ formHelper.getErrorMessage(row.controls.name) }}\n                    </mat-error>\n                  }\n                </mat-form-field>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"hint\">\n            <th *matHeaderCellDef mat-header-cell>\n              <div class=\"centered\">\n                <span>Hint (optional)</span>\n                <mat-icon\n                  matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                  class=\"info-icon header-tooltip-icon\">\n                  info\n                </mat-icon>\n              </div>\n            </th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"predefined-component\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n                  <input matInput [formControl]=\"row.controls.hint\" />\n                  <button\n                    matSuffix\n                    class=\"input-suffix-button\"\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Advanced editor\"\n                    (click)=\"expandHint(row.controls.hint)\">\n                    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                  </button>\n                  @if (row.controls.hint.invalid) {\n                    <mat-error>\n                      {{ formHelper.getErrorMessage(row.controls.hint) }}\n                    </mat-error>\n                  }\n                </mat-form-field>\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"variationId\">\n            <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"usages\">\n            <th *matHeaderCellDef mat-header-cell>Usages</th>\n            <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n              <div class=\"usages\">\n                <button\n                  type=\"button\"\n                  class=\"usage-button\"\n                  mat-icon-button\n                  [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n                  (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n                  @if (row.controls.usagesExpanded.value) {\n                    <mat-icon>expand_less</mat-icon>\n                  } @else {\n                    <mat-icon>expand_more</mat-icon>\n                  }\n                </button>\n                <div>\n                  @if (row.controls.usagesExpanded.value) {\n                    @for (usage of row.controls.usages.controls; track $index) {\n                      <div class=\"usage\">\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n                          {{ usage.controls.displayValue.value }}\n                        </a>\n                      </div>\n                    }\n                    @if (row.controls.usagesInOtherEnvironments.value > 0) {\n                      {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n                        row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n                      }}\n                      in environments you don't have access to.\n                    } @else if (row.controls.usages.controls.length === 0) {\n                      <div>no usages</div>\n                    }\n                  } @else {\n                    <div>\n                      @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n                        {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n                        usage{{\n                          row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n                            ? \"s\"\n                            : \"\"\n                        }}\n                      } @else {\n                        <div>no usages</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"actions\">\n            <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n            <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n              <div\n                class=\"delete\"\n                [matTooltip]=\"\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                    ? 'Cannot remove a variation that is already in use.'\n                    : 'At least 2 predefined variations should be set.'\n                \"\n                [matTooltipDisabled]=\"\n                  row.controls.usages.controls.length === 0 &&\n                  row.controls.usagesInOtherEnvironments.value === 0 &&\n                  formGroup.controls.predefinedVariations.controls.length > 2\n                \">\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matTooltip=\"Remove variation\"\n                  [disabled]=\"\n                    formGroup.controls.predefinedVariations.controls.length <= 2 ||\n                    row.controls.usages.controls.length > 0 ||\n                    row.controls.usagesInOtherEnvironments.value > 0\n                  \"\n                  (click)=\"removeVariation(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n          <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n          <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n        </table>\n        @if (\n          formGroup.controls.predefinedVariations.invalid &&\n          formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n        ) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n          </mat-error>\n        }\n      </div>\n      @if (data.manage && settingType !== SettingType.Boolean) {\n        <div class=\"add-variation\" mat-dialog-content>\n          <div\n            [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n            [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n            <button\n              type=\"button\"\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n              (click)=\"addVariation()\">\n              <mat-icon>add</mat-icon>\n              Add variation\n            </button>\n          </div>\n        </div>\n      }\n      @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n        <div class=\"error\" mat-dialog-content>\n          <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n        </div>\n      }\n    </div>\n\n    <div mat-dialog-actions>\n      @if (data.manage) {\n        <button\n          type=\"submit\"\n          mat-flat-button\n          color=\"primary\"\n          [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n          Save\n        </button>\n        <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n      } @else {\n        <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n      }\n    </div>\n  </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (settingType) {\n    @case (SettingType.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          matTooltip=\"This variation is in use. The value cannot be changed.\"\n          [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingType.Int) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Double) {\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        @if (formControl.invalid) {\n          <mat-error>\n            {{ formHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingType.Boolean) {\n      <div\n        class=\"toggle\"\n        matTooltip=\"This variation is in use. The value cannot be changed.\"\n        [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px;display:flex}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .centered{display:flex;align-items:center}.content mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.content .dialog-table{padding-top:0;padding-bottom:0}.content .dialog-table .header-tooltip-icon{font-size:14px;width:14px;height:14px}.content .error{color:var(--flag-validation-error);padding-top:8px;padding-bottom:8px}\n"] }]
         }] });
 
 class DependeesDialogComponent {
@@ -3956,11 +3997,12 @@ class FeatureFlagValueComponent {
             data: {
                 value: stringValueControl.value,
                 readOnly: stringValueControl.disabled,
-                validators: getValidatorsForSettingType(SettingType.String, this.featureFlagLimitations()),
+                validators: getValidatorsForSettingType(SettingType.String, this.featureFlagLimitations(), this.setting().isJson),
                 maxValueLength: this.featureFlagLimitations().maxStringFlagValueLength ?? 100000,
                 description: this.isPrerequisite()
                     ? "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.",
+                disableTextEditor: this.setting().isJson,
             },
         });
         dialogRef.afterClosed().subscribe(data => {
@@ -4104,7 +4146,7 @@ class PrerequisiteFlagConditionComponent {
         const prerequisiteSettingType = newSetting?.settingType ?? SettingType.Boolean;
         const variations = newSetting?.predefinedVariations ?? [];
         if (changeNeeded) {
-            this.formGroup().setControl("prerequisiteComparisonValue", generateValueFormGroup(generatePrerequisiteDefaultValue(prerequisiteSettingType, variations), prerequisiteSettingType, variations, false, this.featureFlagLimitations()));
+            this.formGroup().setControl("prerequisiteComparisonValue", generateValueFormGroup(generatePrerequisiteDefaultValue(prerequisiteSettingType, variations), prerequisiteSettingType, variations, false, this.featureFlagLimitations(), newSetting?.isJson ?? false));
         }
         this.prerequisiteConditionChanged.emit();
     }
@@ -5574,7 +5616,7 @@ class PercentageOptionsComponent {
         this.formArray().push(generatePercentageOptionFormGroup({
             percentage: 0,
             value: generateDefaultValue(this.flagState().settingValue.setting.settingType, remainingPredefinedVariations),
-        }, this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()));
+        }, this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), this.flagState().settingValue.setting.isJson));
         this.formArray().markAsDirty();
         this.percentageOptionsCount.set(this.formArray().controls.length);
     }
@@ -5673,11 +5715,11 @@ class TargetingRuleComponent {
                 generatePercentageOptionFormGroup({
                     percentage: 100,
                     value: { boolValue: null, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: currentValue.predefinedVariationId },
-                }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()),
+                }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), flagState.settingValue.setting.isJson),
                 generatePercentageOptionFormGroup({
                     percentage: 0,
                     value: { boolValue: null, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: nextPredefinedVariationId },
-                }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()),
+                }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), flagState.settingValue.setting.isJson),
             ], [validatePercentageSum]));
             formGroup.removeControl("value");
             formGroup.markAsDirty();
@@ -5689,11 +5731,11 @@ class TargetingRuleComponent {
                     generatePercentageOptionFormGroup({
                         percentage: currentValue.boolValue ? 100 : 0,
                         value: { boolValue: true, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null },
-                    }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()),
+                    }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), flagState.settingValue.setting.isJson),
                     generatePercentageOptionFormGroup({
                         percentage: currentValue.boolValue ? 0 : 100,
                         value: { boolValue: false, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null },
-                    }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()),
+                    }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), flagState.settingValue.setting.isJson),
                 ], [validatePercentageSum]));
                 formGroup.removeControl("value");
                 formGroup.markAsDirty();
@@ -5703,8 +5745,8 @@ class TargetingRuleComponent {
             case SettingType.Int:
             case SettingType.Double: {
                 formGroup.setControl("percentageOptions", new FormArray([
-                    generatePercentageOptionFormGroup({ percentage: 100, value: currentValue }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()),
-                    generatePercentageOptionFormGroup({ percentage: 0, value: { boolValue: null, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null } }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()),
+                    generatePercentageOptionFormGroup({ percentage: 100, value: currentValue }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), flagState.settingValue.setting.isJson),
+                    generatePercentageOptionFormGroup({ percentage: 0, value: { boolValue: null, intValue: null, doubleValue: null, stringValue: null, predefinedVariationId: null } }, flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), flagState.settingValue.setting.isJson),
                 ], [validatePercentageSum]));
                 formGroup.removeControl("value");
                 formGroup.markAsDirty();
@@ -5735,7 +5777,7 @@ class TargetingRuleComponent {
             return;
         }
         const lastValue = getRawSettiongValue(formGroup.controls.percentageOptions.controls[0].controls.value);
-        formGroup.setControl("value", generateValueFormGroup(lastValue, this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, false, this.featureFlagLimitations()));
+        formGroup.setControl("value", generateValueFormGroup(lastValue, this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, false, this.featureFlagLimitations(), this.flagState().settingValue.setting.isJson));
         formGroup.removeControl("percentageOptions");
         formGroup.markAsDirty();
     }
@@ -5799,7 +5841,7 @@ class EvaluationFormulaComponent {
                     segmentCondition: null,
                 }, this.flagState().readOnly, this.flagState().prerequisiteSettings, this.featureFlagLimitations()),
             ]),
-            value: generateDefaultValueFormGroup(this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, this.flagState().readOnly, this.featureFlagLimitations()),
+            value: generateDefaultValueFormGroup(this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, this.flagState().readOnly, this.featureFlagLimitations(), this.flagState().settingValue.setting.isJson),
         });
         this.addTargetingRuleFormGroup(formGroup);
         formGroup.markAsDirty();
@@ -5820,7 +5862,7 @@ class EvaluationFormulaComponent {
                     segmentCondition: generateEmptySegmentConditionFormGroup(),
                 }),
             ]),
-            value: generateDefaultValueFormGroup(this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, this.flagState().readOnly, this.featureFlagLimitations()),
+            value: generateDefaultValueFormGroup(this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, this.flagState().readOnly, this.featureFlagLimitations(), this.flagState().settingValue.setting.isJson),
         });
         this.addTargetingRuleFormGroup(formGroup);
         formGroup.markAsDirty();
@@ -5837,7 +5879,7 @@ class EvaluationFormulaComponent {
                     prerequisiteFlagCondition: generateEmptyPrerequisiteFlagConditionFormGroup(this.featureFlagLimitations()),
                 }),
             ]),
-            value: generateDefaultValueFormGroup(this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, this.flagState().readOnly, this.featureFlagLimitations()),
+            value: generateDefaultValueFormGroup(this.flagState().settingValue.setting.settingType, this.flagState().settingValue.setting.predefinedVariations, this.flagState().readOnly, this.featureFlagLimitations(), this.flagState().settingValue.setting.isJson),
         });
         this.addTargetingRuleFormGroup(formGroup);
         formGroup.markAsDirty();
@@ -5852,7 +5894,7 @@ class EvaluationFormulaComponent {
         if (!this.checkFeatureFlagLimitations()) {
             return false;
         }
-        const formGroup = generateTargetingRuleWithEmptyPercentageOptions(flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, flagState.readOnly, flagState.prerequisiteSettings, this.featureFlagLimitations());
+        const formGroup = generateTargetingRuleWithEmptyPercentageOptions(flagState.settingValue.setting.settingType, flagState.settingValue.setting.predefinedVariations, flagState.readOnly, flagState.prerequisiteSettings, this.featureFlagLimitations(), flagState.settingValue.setting.isJson);
         this.addTargetingRuleFormGroup(formGroup);
         formGroup.markAsDirty();
         this.recalcAddButtons.emit();
@@ -6239,7 +6281,7 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.loadSucceeded = output();
         this.loadFailed = output();
         this.saveSucceeded = output();
-        this.saveFailed = output();
+        this.componentError = output();
         this.expandedStateChanged = output();
         this.formValuesChanged = output();
         this.loading = true;
@@ -6257,7 +6299,6 @@ class FeatureFlagItemComponent extends BaseComponent {
     }
     reloadSettingValues() {
         this.loading = true;
-        this.createSettingValuesV2Service();
         forkJoin({
             segments: this.createSegmentsService().getSegments(this.productId()),
             settings: this.createSettingsService().getSettings(this.configId()),
@@ -6272,6 +6313,7 @@ class FeatureFlagItemComponent extends BaseComponent {
                         name: sv.name,
                         settingType: sv.settingType,
                         predefinedVariations: sv.predefinedVariations,
+                        isJson: sv.isJson,
                     };
                 });
                 this.segments = result.segments;
@@ -6328,9 +6370,9 @@ class FeatureFlagItemComponent extends BaseComponent {
         });
     }
     revertDirtyValuesFromState() {
-        this.formGroup.setControl("defaultValue", generateValueFormGroup(this.settingFormula.defaultValue, this.settingFormula.setting.settingType, this.settingFormula.setting.predefinedVariations, this.settingFormula.readOnly, this.settingFormula.featureFlagLimitations));
+        this.formGroup.setControl("defaultValue", generateValueFormGroup(this.settingFormula.defaultValue, this.settingFormula.setting.settingType, this.settingFormula.setting.predefinedVariations, this.settingFormula.readOnly, this.settingFormula.featureFlagLimitations, this.settingFormula.setting.isJson));
         this.formGroup.setControl("percentageEvaluationAttribute", new FormControl({ value: this.settingFormula.percentageEvaluationAttribute, disabled: this.settingFormula.readOnly }, { validators: [Validators.max(1000)], nonNullable: true }));
-        this.formGroup.setControl("targetingRules", new FormArray(this.settingFormula.targetingRules.map(ft => generateTargetingRuleFormGroup(ft, this.settingFormula.setting.settingType, this.settingFormula.setting.predefinedVariations, this.settingFormula.readOnly, this.prerequisiteSettings, this.settingFormula.featureFlagLimitations))));
+        this.formGroup.setControl("targetingRules", new FormArray(this.settingFormula.targetingRules.map(ft => generateTargetingRuleFormGroup(ft, this.settingFormula.setting.settingType, this.settingFormula.setting.predefinedVariations, this.settingFormula.readOnly, this.prerequisiteSettings, this.settingFormula.featureFlagLimitations, this.settingFormula.setting.isJson))));
         this.recalcAddButtons();
         this.formGroup.markAsPristine();
         this.formGroup.markAsUntouched();
@@ -6431,7 +6473,7 @@ class FeatureFlagItemComponent extends BaseComponent {
                 this.formGroup.setErrors({ internalServerError: "Internal server error" });
                 this.formGroup.markAsTouched();
                 this.showFeedBackMessage = true;
-                this.saveFailed.emit();
+                this.componentError.emit(error);
             },
         });
     }
@@ -6564,7 +6606,7 @@ class FeatureFlagItemComponent extends BaseComponent {
                     },
                 });
                 dialogRef.afterClosed().subscribe(() => {
-                    this.saveFailed.emit();
+                    this.componentError.emit(new Error("Concurent Delete Error."));
                 });
             },
             error: (error) => {
@@ -6574,12 +6616,18 @@ class FeatureFlagItemComponent extends BaseComponent {
         });
     }
     openVariationsDialog(event) {
-        this.createProductsService().getProduct(this.productId()).subscribe({
-            next: product => {
+        forkJoin({
+            product: this.createProductsService().getProduct(this.productId()),
+            setting: this.createSettingsService().getSetting(event.settingId),
+        }).subscribe({
+            next: result => {
+                const setting = result.setting;
+                const product = result.product;
                 const dialogRef = this.dialog.open(VariationsDialogComponent, {
                     data: {
-                        settingId: event.settingId,
-                        settingName: event.settingName,
+                        settingId: setting.settingId,
+                        settingName: setting.name,
+                        isJson: setting.isJson,
                         manage: true,
                         organizationId: product.organization.organizationId,
                         productId: this.productId(),
@@ -6598,17 +6646,20 @@ class FeatureFlagItemComponent extends BaseComponent {
             },
             error: (error) => {
                 console.log(error);
+                if (error instanceof HttpErrorResponse && error.status === 401) {
+                    this.componentError.emit(error);
+                }
                 this.messagingService.showErrorSnack("Could not load predefined variations dialog.");
             },
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FeatureFlagItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FeatureFlagItemComponent, isStandalone: true, selector: "app-feature-flag-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  @if (!loading) {\n    <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n      <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n        <app-feature-flag\n          [formGroup]=\"formGroup\"\n          [flagState]=\"flagState\"\n          [segments]=\"segments\"\n          [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n          [hasOtherEnvironment]=\"false\"\n          [showEnvironmentName]=\"showEnvironmentName()\"\n          [environmentName]=\"settingFormula.environment.name\"\n          [deleteSettingText]=\"deleteSettingText()\"\n          [canDeleteSetting]=\"canDeleteSetting()\"\n          [predefinedVariationsEnabled]=\"true\"\n          (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n          (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n          (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n          (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n          (recalcAddButtons)=\"recalcAddButtons()\"\n          (expandedChanged)=\"expandedChanged($event)\"\n          (viewVariationsRequested)=\"viewVariations($event)\" />\n      </div>\n      @if (!settingFormula.readOnly && formGroup!.dirty) {\n        <div class=\"save\">\n          <button\n            class=\"save-button\"\n            mat-flat-button\n            color=\"warn\"\n            type=\"submit\"\n            [class.animate]=\"formGroup.dirty\"\n            [disabled]=\"submitting\"\n            [track]=\"['save & publish click', 'feature flags and settings']\">\n            <mat-icon>backup</mat-icon>\n            <span>Save & publish changes</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"revert-button\"\n            mat-stroked-button\n            [disabled]=\"submitting\"\n            [track]=\"['revert click', 'feature flags and settings']\"\n            (click)=\"revert()\">\n            <span>Revert</span>\n          </button>\n          @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n            <div class=\"feedback\">\n              @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n                <div class=\"error\">\n                  <span>\n                    Something went wrong and we could not save your settings. You can try again or\n                    <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n                  </span>\n                </div>\n              }\n              @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n                <div class=\"error\">\n                  <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </form>\n  }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting", "predefinedVariationsEnabled"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { 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: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FeatureFlagItemComponent, isStandalone: true, selector: "app-feature-flag-item", inputs: { productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, environmentId: { classPropertyName: "environmentId", publicName: "environmentId", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null }, settingId: { classPropertyName: "settingId", publicName: "settingId", isSignal: true, isRequired: true, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", componentError: "componentError", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  @if (!loading) {\n    <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n      <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n        <app-feature-flag\n          [formGroup]=\"formGroup\"\n          [flagState]=\"flagState\"\n          [segments]=\"segments\"\n          [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n          [hasOtherEnvironment]=\"false\"\n          [showEnvironmentName]=\"showEnvironmentName()\"\n          [environmentName]=\"settingFormula.environment.name\"\n          [deleteSettingText]=\"deleteSettingText()\"\n          [canDeleteSetting]=\"canDeleteSetting()\"\n          [predefinedVariationsEnabled]=\"true\"\n          (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n          (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n          (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n          (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n          (recalcAddButtons)=\"recalcAddButtons()\"\n          (expandedChanged)=\"expandedChanged($event)\"\n          (viewVariationsRequested)=\"viewVariations($event)\" />\n      </div>\n      @if (!settingFormula.readOnly && formGroup!.dirty) {\n        <div class=\"save\">\n          <button\n            class=\"save-button\"\n            mat-flat-button\n            color=\"warn\"\n            type=\"submit\"\n            [class.animate]=\"formGroup.dirty\"\n            [disabled]=\"submitting\"\n            [track]=\"['save & publish click', 'feature flags and settings']\">\n            <mat-icon>backup</mat-icon>\n            <span>Save & publish changes</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"revert-button\"\n            mat-stroked-button\n            [disabled]=\"submitting\"\n            [track]=\"['revert click', 'feature flags and settings']\"\n            (click)=\"revert()\">\n            <span>Revert</span>\n          </button>\n          @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n            <div class=\"feedback\">\n              @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n                <div class=\"error\">\n                  <span>\n                    Something went wrong and we could not save your settings. You can try again or\n                    <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n                  </span>\n                </div>\n              }\n              @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n                <div class=\"error\">\n                  <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </form>\n  }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting", "predefinedVariationsEnabled"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { 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: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-feature-flag-item", imports: [FormsModule, ReactiveFormsModule, RxReactiveFormsModule, NgClass, FeatureFlagComponent, MatButton, TrackingDirective, MatIcon], template: "<div class=\"container\">\n  @if (!loading) {\n    <form id=\"feature-flag-form\" [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n      <div [ngClass]=\"{ 'invalid-flag': formGroup.invalid }\">\n        <app-feature-flag\n          [formGroup]=\"formGroup\"\n          [flagState]=\"flagState\"\n          [segments]=\"segments\"\n          [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\"\n          [hasOtherEnvironment]=\"false\"\n          [showEnvironmentName]=\"showEnvironmentName()\"\n          [environmentName]=\"settingFormula.environment.name\"\n          [deleteSettingText]=\"deleteSettingText()\"\n          [canDeleteSetting]=\"canDeleteSetting()\"\n          [predefinedVariationsEnabled]=\"true\"\n          (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n          (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n          (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n          (prerequisiteConditionChanged)=\"recalcPrerequisites()\"\n          (recalcAddButtons)=\"recalcAddButtons()\"\n          (expandedChanged)=\"expandedChanged($event)\"\n          (viewVariationsRequested)=\"viewVariations($event)\" />\n      </div>\n      @if (!settingFormula.readOnly && formGroup!.dirty) {\n        <div class=\"save\">\n          <button\n            class=\"save-button\"\n            mat-flat-button\n            color=\"warn\"\n            type=\"submit\"\n            [class.animate]=\"formGroup.dirty\"\n            [disabled]=\"submitting\"\n            [track]=\"['save & publish click', 'feature flags and settings']\">\n            <mat-icon>backup</mat-icon>\n            <span>Save & publish changes</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"revert-button\"\n            mat-stroked-button\n            [disabled]=\"submitting\"\n            [track]=\"['revert click', 'feature flags and settings']\"\n            (click)=\"revert()\">\n            <span>Revert</span>\n          </button>\n          @if (formGroup.touched && formGroup.invalid && showFeedBackMessage) {\n            <div class=\"feedback\">\n              @if (formGroup.errors && formGroup.errors[\"internalServerError\"]) {\n                <div class=\"error\">\n                  <span>\n                    Something went wrong and we could not save your settings. You can try again or\n                    <a href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a>\n                  </span>\n                </div>\n              }\n              @if (!formGroup.errors || !formGroup.errors[\"internalServerError\"]) {\n                <div class=\"error\">\n                  <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </form>\n  }\n</div>\n", styles: [".container{padding:0 .5rem 1rem}.container .container-content{padding-top:1rem}.container .size-obs{min-width:40px;min-height:120px}.container .size-obs .hidden{display:none}.container .size-obs .visible{display:block}.container .controls{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:.5rem;padding-top:.2rem;gap:1rem}.container .controls .controls-left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.container .controls .controls-left .add-feature-flag-wrapper{display:flex;flex-wrap:nowrap}.container .controls .controls-left .add-feature-flag-wrapper .add-feature-flag{border-bottom-right-radius:0%;border-top-right-radius:0%}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting{min-width:0;border-bottom-left-radius:0%;border-top-left-radius:0%;border-left:0px;padding:0 12px}.container .controls .controls-left .add-feature-flag-wrapper .add-other-setting .mat-icon{margin-right:0;margin-left:0}.container .controls .controls-left .tag-filter{min-width:0}.container .controls .controls-left .tag-filter mat-form-field{max-width:600px;min-width:246px}.container .controls .controls-left .tag-filter mat-form-field input{max-width:100px}.container .controls .controls-left .tag-filter .tag{font-size:.9em;max-width:120px;min-width:0}.container .controls .more-container{display:flex;gap:.5rem}.container .controls .more-container .more-button{padding:0 8px;min-width:unset}.container .controls .more-container .more-button mat-icon{margin-left:unset;margin-right:unset}.container .controls .option-icon{opacity:.7}.container .controls .option-name{font-size:14px}.container .controls .option-name mat-icon{font-size:22px;width:22px;height:22px}.container .not-found{text-align:center;padding-top:2rem}.container .not-found img{width:300px}.container .history-link{display:flex;align-items:center;margin-left:.2em}.container .history-link mat-icon{margin-right:5px;font-size:20px;width:20px;height:20px}.container .jump{cursor:pointer}.container .feature-flags-container{margin-bottom:.3rem}.container .save{position:sticky;bottom:0;background-color:var(--page-background-color);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:1rem;padding-bottom:1rem;gap:.5rem}.container .save .save-button{height:38px;font-size:13px!important;animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .error{color:var(--flag-validation-error);padding:5px;font-size:.9em}.container .error a{color:var(--flag-validation-error);text-decoration:underline}.container .steps{display:flex;align-items:center;margin:1rem 0;justify-content:space-between;flex-wrap:wrap}.container .steps .steps-left{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.container .steps .steps-left>h2{cursor:pointer}.container .steps .connected{display:flex;align-items:center}.container .divider{margin-top:1.3rem}.add-menu-item{display:flex;align-items:center;text-wrap:nowrap}.add-menu-item .add-menu-img{width:24px;height:24px;margin-right:8px}.top-menu-selector .strong{font-weight:600}.top-menu-selector .feature-flag-selector-item{display:flex;flex-wrap:nowrap}.top-menu-selector .feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.top-menu-selector .feature-flag-selector-item span{overflow:hidden;text-overflow:ellipsis}.top-menu-selector .filter{display:flex;margin:0 8px 8px;justify-content:space-around}.top-menu-selector .filter mat-form-field{width:100%}.top-menu-selector .filter-not-found{margin-left:12px}.connect-title{font-size:17px;font-weight:700;margin:16px 0;cursor:pointer}.search-key-icon{display:inline-flex;justify-content:center;align-items:center;font-size:11px;width:1.8em;height:1.8em;margin-right:1px;background-color:var(--flag-search-bar-icon-background);border-radius:3px;border:1px solid var(--flag-search-bar-icon-border)}@media(max-width:750px){.container{padding:0 .5rem 1rem}.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], saveFailed: [{ type: i0.Output, args: ["saveFailed"] }], expandedStateChanged: [{ type: i0.Output, args: ["expandedStateChanged"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], environmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentId", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], settingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingId", required: true }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], loadSucceeded: [{ type: i0.Output, args: ["loadSucceeded"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], saveSucceeded: [{ type: i0.Output, args: ["saveSucceeded"] }], componentError: [{ type: i0.Output, args: ["componentError"] }], expandedStateChanged: [{ type: i0.Output, args: ["expandedStateChanged"] }], formValuesChanged: [{ type: i0.Output, args: ["formValuesChanged"] }] } });
 
 class LinkFeatureFlagComponent {
     constructor() {
@@ -6620,6 +6671,7 @@ class LinkFeatureFlagComponent {
         this.resizeRequested = output();
         this.cancelInitiated = output();
         this.selectDropdownPanelChangedReqested = output();
+        this.componentError = output();
         this.formBuilder = inject(NonNullableFormBuilder);
         this.formGroup = this.formBuilder.group({
             productId: new FormControl("", {
@@ -6673,8 +6725,11 @@ class LinkFeatureFlagComponent {
     selectDropdownPanelChanged(useSelector) {
         this.selectDropdownPanelChangedReqested.emit(useSelector);
     }
+    dropdownComponentFailed(error) {
+        this.componentError.emit(error);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkFeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LinkFeatureFlagComponent, isStandalone: true, selector: "app-link-feature-flag", inputs: { authorizationParameters: { classPropertyName: "authorizationParameters", publicName: "authorizationParameters", isSignal: true, isRequired: false, transformFunction: null }, hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkInitiated: "linkInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"add()\">\n    <div>\n      <app-product-select\n        name=\"productId\"\n        [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n        [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [customDropdown]=\"true\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n      }\n      @if (formGroup.controls.productId.value) {\n        <app-environment-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.environmentId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n      }\n      @if (formGroup.controls.configId.value) {\n        <app-setting-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [configId]=\"formGroup.controls.configId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.settingId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n      }\n    </div>\n    <div class=\"buttons\">\n      <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"submitting() || !formGroup.valid\">\n        {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\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 .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: 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: 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: "component", type: SettingSelectComponent, selector: "app-setting-select", inputs: ["valueFormControl", "configId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LinkFeatureFlagComponent, isStandalone: true, selector: "app-link-feature-flag", inputs: { authorizationParameters: { classPropertyName: "authorizationParameters", publicName: "authorizationParameters", isSignal: true, isRequired: false, transformFunction: null }, hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkInitiated: "linkInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested", componentError: "componentError" }, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"add()\">\n    <div>\n      <app-product-select\n        name=\"productId\"\n        [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n        [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [customDropdown]=\"true\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n      @if (formGroup.controls.productId.value) {\n        <app-environment-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.environmentId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n      @if (formGroup.controls.configId.value) {\n        <app-setting-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [configId]=\"formGroup.controls.configId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.settingId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n    </div>\n    <div class=\"buttons\">\n      <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"submitting() || !formGroup.valid\">\n        {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\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 .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: 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: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"], outputs: ["componentError"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"], outputs: ["componentError"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"], outputs: ["componentError"] }, { kind: "component", type: SettingSelectComponent, selector: "app-setting-select", inputs: ["valueFormControl", "configId"], outputs: ["componentError"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkFeatureFlagComponent, decorators: [{
             type: Component,
@@ -6687,8 +6742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ConfigSelectComponent,
                         EnvironmentSelectComponent,
                         SettingSelectComponent,
-                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"add()\">\n    <div>\n      <app-product-select\n        name=\"productId\"\n        [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n        [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [customDropdown]=\"true\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n      }\n      @if (formGroup.controls.productId.value) {\n        <app-environment-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.environmentId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n      }\n      @if (formGroup.controls.configId.value) {\n        <app-setting-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [configId]=\"formGroup.controls.configId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.settingId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\" />\n      }\n    </div>\n    <div class=\"buttons\">\n      <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"submitting() || !formGroup.valid\">\n        {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\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 .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"] }]
-        }], propDecorators: { authorizationParameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorizationParameters", required: false }] }], hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], linkInitiated: [{ type: i0.Output, args: ["linkInitiated"] }], 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)=\"add()\">\n    <div>\n      <app-product-select\n        name=\"productId\"\n        [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n        [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [customDropdown]=\"true\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n      @if (formGroup.controls.productId.value) {\n        <app-environment-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.environmentId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n      @if (formGroup.controls.configId.value) {\n        <app-setting-select\n          [basicAuthUsername]=\"authorizationParameters()!.basicAuthUsername\"\n          [configId]=\"formGroup.controls.configId.value\"\n          [basicAuthPassword]=\"authorizationParameters()!.basicAuthPassword\"\n          [valueFormControl]=\"formGroup.controls.settingId\"\n          [customDropdown]=\"true\"\n          (dropdownOpened)=\"selectDropdownPanelChanged($event)\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n    </div>\n    <div class=\"buttons\">\n      <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"submitting() || !formGroup.valid\">\n        {{ addButtonLabel() ? addButtonLabel() : \"Add\" }}\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 .error{color:var(--flag-validation-error);margin:0 5px 5px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n"] }]
+        }], propDecorators: { authorizationParameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorizationParameters", required: false }] }], hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], linkInitiated: [{ type: i0.Output, args: ["linkInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }], componentError: [{ type: i0.Output, args: ["componentError"] }] } });
 
 class BoxComponent {
     constructor() {
@@ -6724,6 +6779,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
         this.resizeRequested = output();
         this.cancelInitiated = output();
         this.selectDropdownPanelChangedReqested = output();
+        this.componentError = output();
         this.SettingTypeEnum = SettingType;
         this.FormHelper = FormHelper;
         this.EvaluationVersion = EvaluationVersion;
@@ -6746,6 +6802,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
         this.displayedColumns = [];
         this.stringValidators = [Validators.required,
             Validators.maxLength(this.maxStringFlagValueLength)];
+        this.jsonValidators = [...this.stringValidators, jsonValidator];
         this.intValidators = [
             Validators.required,
             validateNumberNan,
@@ -6787,6 +6844,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
                 validators: [Validators.required],
             }),
             useVariations: new FormControl(false, { nonNullable: true }),
+            isJson: new FormControl(false, { nonNullable: true }),
             predefinedVariations: new FormArray([], { validators: [validateUniqueVariations] }),
             initialValuesPerEnvironment: new FormControl(false, { nonNullable: true }),
             initialValueForAll: this.initialValueForAllFormControlFunction(SettingType.Boolean),
@@ -6808,70 +6866,102 @@ class CreateFeatureFlagComponent extends BaseComponent {
         //Product valueChanges
         this.formGroup.controls.productId.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
             this.loadingProduct.set(true);
-            this.createProductsService().getProduct(value).subscribe(product => {
-                this.reasonRequired.set(product.reasonRequired);
-                const hintValidators = product.reasonRequired ? [Validators.required, Validators.maxLength(255)] : [Validators.maxLength(255)];
-                this.formGroup.controls.hint.clearValidators();
-                this.formGroup.controls.hint.addValidators(hintValidators);
-                this.loadingEnviroments.set(true);
-                this.createEnvironmentsService().getEnvironments(product.productId).subscribe(enviroments => {
-                    this.selectedProductEnviroment = enviroments;
-                    this.formGroup.controls.initialValues = new FormArray(enviroments.map(env => this.formBuilder.group({
-                        environmentName: new FormControl(env.name, { nonNullable: true }),
-                        environmentId: new FormControl(env.environmentId, { nonNullable: true }),
-                        settingValue: this.initialValueForAllFormControlFunction(this.formGroup.controls.settingType.value),
-                        predefinedVariationIndex: new FormControl(0, { nonNullable: true }),
-                    })));
-                    this.loadingEnviroments.set(false);
-                });
-                if (this.selectedProductOrganiaztionId !== product.organization.organizationId) {
-                    this.loadinOrganizationLimitations.set(true);
-                    this.selectedProductOrganiaztionId = product.organization.organizationId;
-                    this.createOrganizationService().getOrganizationLimitations(this.selectedProductOrganiaztionId).subscribe(organizationLimitations => {
-                        this.maxStringFlagValueLength = organizationLimitations.maxStringFlagValueLength;
-                        this.maxPredefinedVariations = organizationLimitations.maxPredefinedVariations;
-                        this.stringValidators = [Validators.required, Validators.maxLength(this.maxStringFlagValueLength)];
-                        this.loadinOrganizationLimitations.set(false);
+            this.createProductsService().getProduct(value).subscribe({
+                next: (product) => {
+                    this.reasonRequired.set(product.reasonRequired);
+                    const hintValidators = product.reasonRequired ? [Validators.required, Validators.maxLength(255)] : [Validators.maxLength(255)];
+                    this.formGroup.controls.hint.clearValidators();
+                    this.formGroup.controls.hint.addValidators(hintValidators);
+                    this.loadingEnviroments.set(true);
+                    this.createEnvironmentsService().getEnvironments(product.productId).subscribe({
+                        next: (enviroments) => {
+                            this.selectedProductEnviroment = enviroments;
+                            this.formGroup.setControl("initialValues", new FormArray(enviroments.map(env => this.formBuilder.group({
+                                environmentName: new FormControl(env.name, { nonNullable: true }),
+                                environmentId: new FormControl(env.environmentId, { nonNullable: true }),
+                                settingValue: this.initialValueForAllFormControlFunction(this.formGroup.controls.settingType.value),
+                                predefinedVariationIndex: new FormControl(0, { nonNullable: true }),
+                            }))));
+                            // Keep newly created controls in sync with the current toggle state.
+                            this.enableDisableControls();
+                            this.loadingEnviroments.set(false);
+                        },
+                        error: (error) => {
+                            this.loadingEnviroments.set(false);
+                            this.componentError.emit(error);
+                        },
                     });
-                }
-                this.loadingProduct.set(false);
+                    if (this.selectedProductOrganiaztionId !== product.organization.organizationId) {
+                        this.loadinOrganizationLimitations.set(true);
+                        this.selectedProductOrganiaztionId = product.organization.organizationId;
+                        this.createOrganizationService().getOrganizationLimitations(this.selectedProductOrganiaztionId).subscribe({
+                            next: (organizationLimitations) => {
+                                this.maxStringFlagValueLength = organizationLimitations.maxStringFlagValueLength;
+                                this.maxPredefinedVariations = organizationLimitations.maxPredefinedVariations;
+                                this.stringValidators = [Validators.required, Validators.maxLength(this.maxStringFlagValueLength)];
+                                this.loadinOrganizationLimitations.set(false);
+                            },
+                            error: (error) => {
+                                this.loadinOrganizationLimitations.set(false);
+                                this.componentError.emit(error);
+                            },
+                        });
+                    }
+                    this.loadingProduct.set(false);
+                },
+                error: (error) => {
+                    this.loadingProduct.set(false);
+                    this.componentError.emit(error);
+                },
             });
         });
         //Config valueChanges
         this.formGroup.controls.configId.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
             this.loadingConfigurations.set(true);
-            this.createConfigsService().getConfig(value).subscribe(config => {
-                this.configEvaluationVersion = config.evaluationVersion;
-                this.loadingConfigurations.set(false);
+            this.createConfigsService().getConfig(value).subscribe({
+                next: (config) => {
+                    this.configEvaluationVersion = config.evaluationVersion;
+                    this.loadingConfigurations.set(false);
+                },
+                error: (error) => {
+                    this.loadingConfigurations.set(false);
+                    this.componentError.emit(error);
+                },
             });
         });
-        //InitialValuesPerEnvironment valueChanges
-        this.formGroup.controls.initialValuesPerEnvironment.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-            if (value) {
-                this.formGroup.controls.initialValues.enable();
-                this.formGroup.controls.initialValueForAll.disable();
-                this.formGroup.controls.initialValueForAllVariationIndex.disable();
-            }
-            else {
-                this.formGroup.controls.initialValues.disable();
-                this.formGroup.controls.initialValueForAll.enable();
-                this.formGroup.controls.initialValueForAllVariationIndex.enable();
-            }
+        //IsJson valueChanges
+        this.formGroup.controls.isJson.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+            const validators = value ? this.jsonValidators : this.stringValidators;
+            this.formGroup.controls.initialValueForAll.setValidators(validators);
+            this.formGroup.controls.initialValueForAll.updateValueAndValidity();
+            this.formGroup.controls.initialValueForAll.markAsTouched();
+            this.formGroup.controls.initialValues.controls.forEach(c => {
+                c.controls.settingValue.setValidators(validators);
+                c.controls.settingValue.updateValueAndValidity();
+                c.controls.settingValue.markAsTouched();
+            });
+            this.formGroup.controls.predefinedVariations.controls.forEach(c => {
+                c.controls.value.controls.stringValue.setValidators(validators);
+                c.controls.value.controls.stringValue.updateValueAndValidity();
+                c.controls.value.controls.stringValue.markAsTouched();
+            });
+            this.formGroup.controls.predefinedVariations.updateValueAndValidity();
             this.formGroup.updateValueAndValidity();
         });
+        //InitialValuesPerEnvironment valueChanges
+        this.formGroup.controls.initialValuesPerEnvironment.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.enableDisableControls();
+        });
         //UseVariations valueChanges
-        this.formGroup.controls.useVariations.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-            if (value) {
-                this.formGroup.controls.predefinedVariations.enable();
-            }
-            else {
-                this.formGroup.controls.predefinedVariations.disable();
-            }
-            this.formGroup.updateValueAndValidity();
+        this.formGroup.controls.useVariations.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.enableDisableControls();
         });
         //InitialValueForAll valueChanges
         this.formGroup.controls.initialValueForAll.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-            this.formGroup.controls.initialValues.controls.forEach(c => c.controls.settingValue.patchValue(value, { emitEvent: false }));
+            this.formGroup.controls.initialValues.controls.forEach(c => {
+                c.controls.settingValue.patchValue(value, { emitEvent: false });
+                c.controls.settingValue.updateValueAndValidity();
+            });
         });
         //PredefinedVariations valueChanges
         this.formGroup.controls.predefinedVariations.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
@@ -6892,12 +6982,46 @@ class CreateFeatureFlagComponent extends BaseComponent {
         });
         this.loading.set(false);
     }
+    enableDisableControls() {
+        if (this.formGroup.controls.initialValuesPerEnvironment.value) {
+            this.formGroup.controls.initialValues.enable();
+            this.formGroup.controls.initialValueForAll.disable();
+            this.formGroup.controls.initialValueForAllVariationIndex.disable();
+        }
+        else {
+            this.formGroup.controls.initialValues.disable();
+            if (this.formGroup.controls.useVariations.value) {
+                this.formGroup.controls.initialValueForAllVariationIndex.enable();
+                this.formGroup.controls.initialValueForAll.disable();
+            }
+            else {
+                this.formGroup.controls.initialValueForAllVariationIndex.disable();
+                this.formGroup.controls.initialValueForAll.enable();
+            }
+        }
+        if (this.formGroup.controls.useVariations.value) {
+            this.formGroup.controls.predefinedVariations.enable();
+            this.formGroup.controls.initialValues.controls.forEach(c => {
+                c.controls.settingValue.disable();
+                c.controls.predefinedVariationIndex.enable();
+            });
+        }
+        else {
+            this.formGroup.controls.predefinedVariations.disable();
+            this.formGroup.controls.initialValues.controls.forEach(c => {
+                c.controls.settingValue.enable();
+                c.controls.predefinedVariationIndex.disable();
+            });
+        }
+        this.formGroup.controls.initialValues.updateValueAndValidity();
+        this.formGroup.updateValueAndValidity();
+    }
     initialValueForAllFormControlFunction(settingType) {
         switch (settingType) {
             case SettingType.Boolean:
                 return new FormControl(false, { nonNullable: true });
             case SettingType.String:
-                return new FormControl("initial placeholder text", { validators: this.stringValidators, nonNullable: true });
+                return new FormControl("My initial value", { validators: this.formGroup.controls.isJson.value ? this.jsonValidators : this.stringValidators, nonNullable: true });
             case SettingType.Int:
                 return new FormControl(42, { validators: this.intValidators, nonNullable: true });
             case SettingType.Double:
@@ -6912,20 +7036,20 @@ class CreateFeatureFlagComponent extends BaseComponent {
         this.formGroup.controls.predefinedVariations.clear();
         switch (newSettingType) {
             case SettingType.Boolean:
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false));
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, true));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, false));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, true));
                 break;
             case SettingType.String:
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, void 0, "Variation A"));
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, void 0, "Variation B"));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, this.formGroup.controls.isJson.value, void 0, "Variation A"));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, this.formGroup.controls.isJson.value, void 0, "Variation B"));
                 break;
             case SettingType.Int:
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, void 0, void 0, 1));
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, void 0, void 0, 2));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, void 0, void 0, 1));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, void 0, void 0, 2));
                 break;
             case SettingType.Double:
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, void 0, void 0, 3.14));
-                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, void 0, void 0, 1.618));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, false, void 0, void 0, 3.14));
+                this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(newSettingType, false, false, void 0, void 0, 1.618));
                 break;
         }
         this.formGroup.controls.initialValueForAll.clearValidators();
@@ -6939,6 +7063,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
         this.formGroup.controls.initialValues.controls.forEach(initValueForEnv => {
             initValueForEnv.setControl("settingValue", this.initialValueForAllFormControlFunction(newSettingType));
         });
+        this.enableDisableControls();
         this.formGroup.updateValueAndValidity();
         this.setDataSource();
     }
@@ -6986,6 +7111,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
             hint: this.formGroup.controls.hint.value,
             initialValues: initialValues,
             predefinedVariations: predefinedVariations,
+            isJson: this.formGroup.controls.isJson.value,
         })
             .subscribe({
             next: setting => {
@@ -6999,7 +7125,9 @@ class CreateFeatureFlagComponent extends BaseComponent {
             error: (error) => {
                 this.submitting.set(false);
                 ErrorHandler.handleErrors(this.formGroup, error);
-                console.log(error);
+                if (error instanceof HttpErrorResponse && error.status === 401) {
+                    this.componentError.emit(error);
+                }
             },
         });
     }
@@ -7012,18 +7140,18 @@ class CreateFeatureFlagComponent extends BaseComponent {
     selectDropdownPanelChanged(useSelector) {
         this.selectDropdownPanelChangedReqested.emit(useSelector);
     }
-    createEmptyVariationFormGroup(settingType, boolValue = false, stringValue = "", intValue = 0, doubleValue = 0) {
+    createEmptyVariationFormGroup(settingType, isJson, boolValue = false, stringValue = "", intValue = 0, doubleValue = 0) {
         return this.formBuilder.group({
             name: new FormControl(null),
             hint: new FormControl(null),
-            value: this.createEmptyVariationValueFormGroup(settingType, boolValue, stringValue, intValue, doubleValue),
+            value: this.createEmptyVariationValueFormGroup(settingType, isJson, boolValue, stringValue, intValue, doubleValue),
             valueForComparison: new FormControl({
                 value: getPredefinedVariationValueDisplayValue(settingType, { boolValue, stringValue, intValue, doubleValue }),
                 disabled: true,
             }),
         });
     }
-    createEmptyVariationValueFormGroup(settingType, boolValue = false, stringValue = "", intValue = 0, doubleValue = 0) {
+    createEmptyVariationValueFormGroup(settingType, isJson, boolValue = false, stringValue = "", intValue = 0, doubleValue = 0) {
         switch (settingType) {
             case SettingType.Boolean:
                 return this.formBuilder.group({
@@ -7031,7 +7159,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
                 });
             case SettingType.String:
                 return this.formBuilder.group({
-                    stringValue: new FormControl(stringValue, { nonNullable: true, validators: this.stringValidators }),
+                    stringValue: new FormControl(stringValue, { nonNullable: true, validators: isJson ? this.jsonValidators : this.stringValidators }),
                 });
             case SettingType.Int:
                 return this.formBuilder.group({
@@ -7046,10 +7174,10 @@ class CreateFeatureFlagComponent extends BaseComponent {
         }
     }
     addVariation() {
-        this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(this.formGroup.controls.settingType.value));
+        this.formGroup.controls.predefinedVariations.push(this.createEmptyVariationFormGroup(this.formGroup.controls.settingType.value, this.formGroup.controls.isJson.value));
         this.formGroup.controls.predefinedVariations.markAsDirty();
-        this.setDataSource();
         this.focusIndex = this.formGroup.controls.predefinedVariations.length - 1;
+        this.setDataSource();
     }
     removeVariation(index) {
         this.formGroup.controls.predefinedVariations.removeAt(index);
@@ -7078,6 +7206,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
                 ],
                 maxValueLength: this.maxStringFlagValueLength,
                 description: "Modify the text within the editor to change the initial value.",
+                disableTextEditor: this.formGroup.controls.isJson.value,
             },
         });
         dialogRef.afterClosed().subscribe(data => {
@@ -7113,8 +7242,11 @@ class CreateFeatureFlagComponent extends BaseComponent {
     getColorIndex(row, index) {
         return getPredefinedVariationColorIndex(this.formGroup.controls.settingType.value, getRawPredefinedVariationValue(row.controls.value), index);
     }
+    dropdownComponentFailed(error) {
+        this.componentError.emit(error);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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        [customDropdown]=\"true\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\" />\n      }\n\n      <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A 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          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>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            <h3>How do you want to set values?</h3>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n                <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"header small\">Variations</div>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>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 (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <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            [customDropdown]=\"true\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ 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 class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .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{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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", componentError: "componentError" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ 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        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\n                              </mat-error>\n                            }\n                          </mat-form-field>\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"hint\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\n                          <input matInput [formControl]=\"row.controls.hint\" />\n                          @if (row.controls.hint.invalid) {\n                            <mat-error>\n                              {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\n                      </td>\n                    </ng-container>\n                    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n                    <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n                  </table>\n                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!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            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ 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 class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"], outputs: ["componentError"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"], outputs: ["componentError"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"], outputs: ["componentError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
             type: Component,
@@ -7152,8 +7284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatIconButton,
                         LoaderComponent,
                         BoxComponent,
-                    ], 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        [customDropdown]=\"true\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\" />\n      }\n\n      <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A 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          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>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            <h3>How do you want to set values?</h3>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n                <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"header small\">Variations</div>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>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 (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <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            [customDropdown]=\"true\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ 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 class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .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{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
-        }], propDecorators: { 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"] }] } });
+                        MatCheckbox,
+                    ], 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        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n      @if (flagSectionDescription()) {\n        <p>{{ flagSectionDescription() }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\n                              </mat-error>\n                            }\n                          </mat-form-field>\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"hint\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\n                          <input matInput [formControl]=\"row.controls.hint\" />\n                          @if (row.controls.hint.invalid) {\n                            <mat-error>\n                              {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\n                      </td>\n                    </ng-container>\n                    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n                    <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n                  </table>\n                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!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            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ 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 class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          appDigitOnly\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\"\n          [digitOnlyAllowNegatives]=\"true\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
+        }], 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"] }], componentError: [{ type: i0.Output, args: ["componentError"] }] } });
 
 class CreateConfigComponent extends BaseComponent {
     constructor() {
@@ -7171,6 +7304,7 @@ class CreateConfigComponent extends BaseComponent {
         this.resizeRequested = output();
         this.cancelInitiated = output();
         this.selectDropdownPanelChangedReqested = output();
+        this.componentError = output();
         this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
         this.SettingTypeEnum = SettingType;
@@ -7224,7 +7358,9 @@ class CreateConfigComponent extends BaseComponent {
             error: (error) => {
                 this.submitting.set(false);
                 ErrorHandler.handleErrors(this.formGroup, error);
-                console.log(error);
+                if (error instanceof HttpErrorResponse && error.status === 401) {
+                    this.componentError.emit(error);
+                }
             },
         });
     }
@@ -7234,8 +7370,11 @@ class CreateConfigComponent extends BaseComponent {
     selectDropdownPanelChanged(useSelector) {
         this.selectDropdownPanelChangedReqested.emit(useSelector);
     }
+    dropdownComponentFailed(error) {
+        this.componentError.emit(error);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CreateConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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        [customDropdown]=\"true\" />\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\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loading() || !formGroup.valid\">\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],[formArray],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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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", componentError: "componentError" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ 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        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\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\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loading() || !formGroup.valid\">\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"], outputs: ["componentError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "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: "21.2.17", ngImport: i0, type: CreateConfigComponent, decorators: [{
             type: Component,
@@ -7251,8 +7390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         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        [customDropdown]=\"true\" />\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\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loading() || !formGroup.valid\">\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"] }] } });
+                    ], 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        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\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\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loading() || !formGroup.valid\">\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"] }], componentError: [{ type: i0.Output, args: ["componentError"] }] } });
 
 /*
  * Public API Surface of ng-configcat-publicapi-ui