ngx-view-builder 0.1.4 → 0.1.6

package/fesm2022/{ngx-view-builder-ngx-view-builder-CYvIsFw-.mjs → ngx-view-builder-ngx-view-builder-DUoF0Ief.mjs}

@@ -13993,12 +13993,26 @@ function toNumber(value) {
     return null;
 }
 
+const BUILT_IN_VALIDATOR_TYPES = new Set([
+    'required',
+    'minlength',
+    'maxlength',
+    'min',
+    'max',
+    'pattern',
+    'email',
+    'strictoptions',
+    'custom',
+]);
 class ValidatorService {
     validationDisplayEnabled = signal(false, ...(ngDevMode ? [{ debugName: "validationDisplayEnabled" }] : /* istanbul ignore next */ []));
     validationTouchedElements = signal({}, ...(ngDevMode ? [{ debugName: "validationTouchedElements" }] : /* istanbul ignore next */ []));
     validationRenderVersion = signal(0, ...(ngDevMode ? [{ debugName: "validationRenderVersion" }] : /* istanbul ignore next */ []));
     ruleValidationErrors = new Map();
     externalValidationErrors = new Map();
+    registeredValidatorTypes = new Map();
+    registeredValidatorTypeDescriptors = signal([], ...(ngDevMode ? [{ debugName: "registeredValidatorTypeDescriptors" }] : /* istanbul ignore next */ []));
+    warnedUnknownValidatorTypes = new Set();
     structureService = inject(StructureService);
     dataService = inject(DataService);
     expressionService = inject(ExpressionService);
@@ -14021,6 +14035,52 @@ class ValidatorService {
             void this.evaluateAllValidators();
         });
     }
+    registerValidatorTypes(definitions) {
+        if (!Array.isArray(definitions)) {
+            return;
+        }
+        definitions.forEach((definition) => this.registerValidatorType(definition));
+    }
+    registerValidatorType(definition) {
+        const type = this.normalizeValidatorType(definition?.type);
+        if (!type || typeof definition?.isValid !== 'function') {
+            return;
+        }
+        if (BUILT_IN_VALIDATOR_TYPES.has(type)) {
+            console.warn(`[NgxViewBuilder] Validator type "${type}" is built in and cannot be replaced. Use a different type name.`);
+            return;
+        }
+        this.registeredValidatorTypes.set(type, {
+            type,
+            label: String(definition.label ?? '').trim() || String(definition.type ?? '').trim(),
+            defaultMessage: String(definition.defaultMessage ?? '').trim(),
+            hasValue: Boolean(definition.hasValue),
+            valueLabel: String(definition.valueLabel ?? '').trim(),
+            valuePlaceholder: String(definition.valuePlaceholder ?? '').trim(),
+            appliesTo: this.normalizeValidatorAppliesTo(definition.appliesTo),
+            validateEmpty: Boolean(definition.validateEmpty),
+            isValid: definition.isValid,
+        });
+        this.warnedUnknownValidatorTypes.delete(type);
+        this.publishRegisteredValidatorTypes();
+    }
+    getRegisteredValidatorTypes() {
+        return this.registeredValidatorTypeDescriptors();
+    }
+    getRegisteredValidatorType(type) {
+        return this.registeredValidatorTypes.get(this.normalizeValidatorType(type)) ?? null;
+    }
+    isBuiltInValidatorType(type) {
+        return BUILT_IN_VALIDATOR_TYPES.has(this.normalizeValidatorType(type));
+    }
+    hasValidatorType(type) {
+        const normalized = this.normalizeValidatorType(type);
+        return (BUILT_IN_VALIDATOR_TYPES.has(normalized) || this.registeredValidatorTypes.has(normalized));
+    }
+    clearRegisteredValidatorTypes() {
+        this.registeredValidatorTypes.clear();
+        this.publishRegisteredValidatorTypes();
+    }
     setValidationDisplayEnabled(enabled) {
         const isEnabled = Boolean(enabled);
         this.validationDisplayEnabled.set(isEnabled);
@@ -14252,8 +14312,30 @@ class ValidatorService {
                     ? 'Some selected values are not in the available options list.'
                     : 'Value must be one of the available options.'), element);
         }
+        const registeredType = this.registeredValidatorTypes.get(type);
+        if (registeredType) {
+            if (!registeredType.validateEmpty && this.isEmptyValue(value)) {
+                return { valid: true, message: '' };
+            }
+            const fallbackMessage = validator.message || registeredType.defaultMessage || 'Invalid value.';
+            try {
+                const isValid = await registeredType.isValid({
+                    value,
+                    validatorValue: validator?.value,
+                    validator,
+                    element,
+                    data: this.dataService.getData(),
+                });
+                return this.createValidationResult(Boolean(isValid), fallbackMessage, element);
+            }
+            catch (error) {
+                console.error(`[NgxViewBuilder] Validator type "${registeredType.type}" threw an error.`, error);
+                return this.createValidationResult(false, fallbackMessage, element);
+            }
+        }
         const customCondition = String(validator?.condition ?? '').trim();
         if (!customCondition) {
+            this.warnUnknownValidatorType(type);
             return { valid: true, message: '' };
         }
         try {
@@ -14481,6 +14563,39 @@ class ValidatorService {
             .trim()
             .toLowerCase();
     }
+    normalizeValidatorAppliesTo(appliesTo) {
+        if (!Array.isArray(appliesTo)) {
+            return [];
+        }
+        return appliesTo
+            .map((item) => String(item ?? '')
+            .trim()
+            .toLowerCase())
+            .filter((item) => item.length > 0);
+    }
+    publishRegisteredValidatorTypes() {
+        const descriptors = Array.from(this.registeredValidatorTypes.values()).map((entry) => ({
+            type: entry.type,
+            label: entry.label,
+            defaultMessage: entry.defaultMessage,
+            hasValue: entry.hasValue,
+            valueLabel: entry.valueLabel,
+            valuePlaceholder: entry.valuePlaceholder,
+            appliesTo: [...entry.appliesTo],
+            validateEmpty: entry.validateEmpty,
+        }));
+        descriptors.sort((a, b) => a.label.localeCompare(b.label));
+        this.registeredValidatorTypeDescriptors.set(descriptors);
+    }
+    warnUnknownValidatorType(type) {
+        const normalized = this.normalizeValidatorType(type);
+        if (BUILT_IN_VALIDATOR_TYPES.has(normalized) || this.warnedUnknownValidatorTypes.has(normalized)) {
+            return;
+        }
+        this.warnedUnknownValidatorTypes.add(normalized);
+        console.warn(`[NgxViewBuilder] Validator type "${normalized}" is not registered in this application, so the rule is skipped. ` +
+            'Register it with the API service (registerValidatorTypes) before rendering views that use it.');
+    }
     resolveImplicitValidators(element, validators) {
         const implicit = [];
         const explicitTypes = new Set(validators
@@ -19939,6 +20054,94 @@ class RendererService {
             }
             return obj;
         };
+        // Element properties are omitted from the export when they still equal the type's
+        // default (declared as field initialisers on the model classes). The runtime
+        // re-applies those same defaults through createModel on load, so a slimmed element
+        // reconstructs identically — as long as the code default is unchanged. Only values
+        // the author actually changed away from the default are written out.
+        const defaultBagCache = new Map();
+        const buildDefaultBag = (type) => {
+            const normalizedType = String(type ?? '').trim();
+            if (!normalizedType) {
+                return null;
+            }
+            if (defaultBagCache.has(normalizedType)) {
+                return defaultBagCache.get(normalizedType) ?? null;
+            }
+            let bag = null;
+            try {
+                const defaultInstance = this.modelService.createModel(normalizedType, {});
+                const ignored = new Set(getIgnoredKeys(defaultInstance));
+                bag = {};
+                Object.keys(defaultInstance).forEach((key) => {
+                    if (ignored.has(key) || runtimeIgnoredKeys.has(key)) {
+                        return;
+                    }
+                    bag[key] = defaultInstance[key];
+                });
+            }
+            catch {
+                bag = null;
+            }
+            defaultBagCache.set(normalizedType, bag);
+            return bag;
+        };
+        const IDENTITY_KEYS = new Set(['name', 'type']);
+        const CHILD_ELEMENT_KEYS = new Set(['template', 'columns']);
+        const cleanElement = (element) => {
+            if (!element || typeof element !== 'object' || Array.isArray(element)) {
+                return clean(element);
+            }
+            const type = String(element.type ?? '').trim();
+            const defaults = type ? buildDefaultBag(type) : null;
+            if (!defaults) {
+                // No defaults to diff against (unknown type / build failure) — keep everything.
+                return clean(element);
+            }
+            const seen = new WeakSet();
+            const ignored = getIgnoredKeys(element);
+            const result = {};
+            Object.keys(element).forEach((key) => {
+                const rawValue = element[key];
+                if (ignored.includes(key) ||
+                    runtimeIgnoredKeys.has(key) ||
+                    (key === 'listeners' && Array.isArray(rawValue))) {
+                    return;
+                }
+                if (CHILD_ELEMENT_KEYS.has(key) && rawValue && typeof rawValue === 'object') {
+                    if (Array.isArray(rawValue)) {
+                        const cleanedArray = rawValue
+                            .map((child) => cleanElement(child))
+                            .filter((child) => child !== undefined);
+                        if (cleanedArray.length > 0) {
+                            result[key] = cleanedArray;
+                        }
+                    }
+                    else {
+                        const cleanedChildren = {};
+                        Object.keys(rawValue).forEach((childKey) => {
+                            const cleanedChild = cleanElement(rawValue[childKey]);
+                            if (cleanedChild !== undefined) {
+                                cleanedChildren[childKey] = cleanedChild;
+                            }
+                        });
+                        if (Object.keys(cleanedChildren).length > 0) {
+                            result[key] = cleanedChildren;
+                        }
+                    }
+                    return;
+                }
+                const cleanedValue = clean(rawValue, seen);
+                if (cleanedValue === undefined) {
+                    return;
+                }
+                if (!IDENTITY_KEYS.has(key) && key in defaults && isEqual(rawValue, defaults[key])) {
+                    return;
+                }
+                result[key] = cleanedValue;
+            });
+            return Object.keys(result).length > 0 ? result : undefined;
+        };
         const processColumn = (column) => {
             if (!column)
                 return undefined;
@@ -20000,7 +20203,15 @@ class RendererService {
                 .filter((p) => p !== undefined);
         }
         if (structure.elements) {
-            jsonObject.elements = clean(structure.elements);
+            const cleanedElements = {};
+            Object.keys(structure.elements).forEach((elementKey) => {
+                const cleanedElement = cleanElement(structure.elements[elementKey]);
+                if (cleanedElement !== undefined) {
+                    cleanedElements[elementKey] = cleanedElement;
+                }
+            });
+            jsonObject.elements =
+                Object.keys(cleanedElements).length > 0 ? cleanedElements : undefined;
         }
         if (structure.dataSources &&
             Array.isArray(structure.dataSources) &&
@@ -23841,6 +24052,21 @@ class NgxViewBuilderApiService {
         }
         this.expressionService.registerCustomFunctions([functionDefinition]);
     }
+    registerValidatorTypes(definitions) {
+        this.validatorService.registerValidatorTypes(definitions ?? []);
+    }
+    registerValidatorType(definition) {
+        if (!definition) {
+            return;
+        }
+        this.validatorService.registerValidatorType(definition);
+    }
+    getRegisteredValidatorTypes() {
+        return this.validatorService.getRegisteredValidatorTypes();
+    }
+    clearRegisteredValidatorTypes() {
+        this.validatorService.clearRegisteredValidatorTypes();
+    }
     registerSvgIcon(name, svgMarkup, overwrite = true) {
         return this.iconSvgService.registerSvgIcon(name, svgMarkup, overwrite);
     }
@@ -23875,6 +24101,7 @@ class NgxViewBuilderApiService {
         this.registerConfiguredGlobalProperties(normalizedConfig);
         this.registerConfiguredElementProperties(normalizedConfig);
         this.registerConfiguredExpressionFunctions(normalizedConfig);
+        this.registerConfiguredValidatorTypes(normalizedConfig);
         this.registerConfiguredRuntimeVariables(normalizedConfig);
         this.registerConfiguredBuilderTabs(normalizedConfig);
         this.registerConfiguredFeaturePacks(normalizedConfig);
@@ -23895,6 +24122,7 @@ class NgxViewBuilderApiService {
         this.registerConfiguredGlobalProperties(normalizedConfig);
         this.registerConfiguredElementProperties(normalizedConfig);
         this.registerConfiguredExpressionFunctions(normalizedConfig);
+        this.registerConfiguredValidatorTypes(normalizedConfig);
         this.registerConfiguredRuntimeVariables(normalizedConfig);
         this.registerConfiguredBuilderTabs(normalizedConfig);
         this.registerConfiguredFeaturePacks(normalizedConfig);
@@ -23972,6 +24200,11 @@ class NgxViewBuilderApiService {
             this.registerExpressionFunctions(config.expressionFunctions);
         }
     }
+    registerConfiguredValidatorTypes(config) {
+        if (Array.isArray(config.validatorTypes) && config.validatorTypes.length > 0) {
+            this.registerValidatorTypes(config.validatorTypes);
+        }
+    }
     registerConfiguredRuntimeVariables(config) {
         if (Array.isArray(config.runtimeVariables)) {
             this.setRuntimeVariableDefinitions(config.runtimeVariables, true);
@@ -24033,6 +24266,7 @@ class NgxViewBuilderApiService {
             rules: [...(normalized.rules ?? [])],
             fragments: [...(normalized.fragments ?? [])],
             expressionFunctions: [...(normalized.expressionFunctions ?? [])],
+            validatorTypes: [...(normalized.validatorTypes ?? [])],
             runtimeVariables: [...(normalized.runtimeVariables ?? [])],
             uiDictionaries: { ...(normalized.uiDictionaries ?? {}) },
             svgIcons: { ...(normalized.svgIcons ?? {}) },
@@ -24048,6 +24282,7 @@ class NgxViewBuilderApiService {
             merged.rules?.push(...(pack.rules ?? []));
             merged.fragments?.push(...(pack.fragments ?? []));
             merged.expressionFunctions?.push(...(pack.expressionFunctions ?? []));
+            merged.validatorTypes?.push(...(pack.validatorTypes ?? []));
             merged.runtimeVariables?.push(...(pack.runtimeVariables ?? []));
             if (pack.globalProperties && typeof pack.globalProperties === 'object') {
                 merged.globalProperties = {
@@ -48529,7 +48764,7 @@ const BUILT_IN_RUNTIME_COMPONENT_LOADERS = {
     [ElementTypesEnum.AUTOCOMPLETE]: () => Promise.resolve().then(function () { return autocompleteElement; }).then((m) => m.AutocompleteElement),
     [ElementTypesEnum.MULTI_SELECT]: () => Promise.resolve().then(function () { return multiSelectElement; }).then((m) => m.MultiSelectElement),
     [ElementTypesEnum.MESSAGE_CARD]: () => Promise.resolve().then(function () { return messageCardElement; }).then((m) => m.MessageCardElement),
-    [ElementTypesEnum.TOAST]: () => import('./ngx-view-builder-toast-element-CclIxegL.mjs').then((m) => m.ToastElement),
+    [ElementTypesEnum.TOAST]: () => import('./ngx-view-builder-toast-element-Dt4fzOZt.mjs').then((m) => m.ToastElement),
     [ElementTypesEnum.BADGE]: () => Promise.resolve().then(function () { return badgeElement; }).then((m) => m.BadgeElement),
     [ElementTypesEnum.STATS_CARD]: () => Promise.resolve().then(function () { return statsCardElement; }).then((m) => m.StatsCardElement),
     [ElementTypesEnum.CHART]: () => Promise.resolve().then(function () { return chartElement; }).then((m) => m.ChartElement),
@@ -48537,11 +48772,11 @@ const BUILT_IN_RUNTIME_COMPONENT_LOADERS = {
     [ElementTypesEnum.IMAGE]: () => Promise.resolve().then(function () { return imageElement; }).then((m) => m.ImageElement),
     [ElementTypesEnum.VIDEO]: () => Promise.resolve().then(function () { return videoElement; }).then((m) => m.VideoElement),
     [ElementTypesEnum.IFRAME]: () => Promise.resolve().then(function () { return iframeElement; }).then((m) => m.IframeElement),
-    [ElementTypesEnum.AVATAR]: () => import('./ngx-view-builder-avatar-element-C0EXsHCI.mjs').then((m) => m.AvatarElement),
-    [ElementTypesEnum.ICON]: () => import('./ngx-view-builder-icon-element-CSKRNSAU.mjs').then((m) => m.IconElement),
+    [ElementTypesEnum.AVATAR]: () => import('./ngx-view-builder-avatar-element-428U6hXs.mjs').then((m) => m.AvatarElement),
+    [ElementTypesEnum.ICON]: () => import('./ngx-view-builder-icon-element-PMXy2zn8.mjs').then((m) => m.IconElement),
     [ElementTypesEnum.DIVIDER]: () => Promise.resolve().then(function () { return dividerElement; }).then((m) => m.DividerElement),
     [ElementTypesEnum.SPACER]: () => Promise.resolve().then(function () { return spacerElement; }).then((m) => m.SpacerElement),
-    [ElementTypesEnum.BREADCRUMBS]: () => import('./ngx-view-builder-breadcrumbs-element-BihMIpWr.mjs').then((m) => m.BreadcrumbsElement),
+    [ElementTypesEnum.BREADCRUMBS]: () => import('./ngx-view-builder-breadcrumbs-element-B2FHOwU4.mjs').then((m) => m.BreadcrumbsElement),
     [ElementTypesEnum.PAGE_TITLE]: () => Promise.resolve().then(function () { return pageTitleElement; }).then((m) => m.PageTitleElement),
     [ElementTypesEnum.NUMBER_STEPPER]: () => Promise.resolve().then(function () { return numberStepperElement; }).then((m) => m.NumberStepperElement),
     [ElementTypesEnum.TIME_PICKER]: () => Promise.resolve().then(function () { return timePickerElement; }).then((m) => m.TimePickerElement),
@@ -48789,10 +49024,18 @@ class TableElement {
             .filter((column) => String(column?.key ?? '').trim().length > 0)
             .slice()
             .sort((left, right) => {
+            const leftIndex = columns.indexOf(left);
+            const rightIndex = columns.indexOf(right);
+            // Builderyje autoritetas yra columnsConfig eiliskumas: perstumus stulpeli savybiu
+            // skydelyje pakeitimas turi matytis is karto, o issaugoti vartotojo nustatymai
+            // (columnSettingsState) neturi jo perrasyti — taip pat, kaip ir su visible zemiau.
+            if (isEditorMode) {
+                return leftIndex - rightIndex;
+            }
             const leftKey = String(left?.key ?? '').trim();
             const rightKey = String(right?.key ?? '').trim();
-            const leftOrder = settingsMap.get(leftKey)?.order ?? columns.indexOf(left);
-            const rightOrder = settingsMap.get(rightKey)?.order ?? columns.indexOf(right);
+            const leftOrder = settingsMap.get(leftKey)?.order ?? leftIndex;
+            const rightOrder = settingsMap.get(rightKey)?.order ?? rightIndex;
             return leftOrder - rightOrder;
         })
             .filter((column, columnIndex) => {
@@ -73326,6 +73569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class ValidatorsAttribute {
     property = input.required(...(ngDevMode ? [{ debugName: "property" }] : /* istanbul ignore next */ []));
+    elementType = input('', ...(ngDevMode ? [{ debugName: "elementType" }] : /* istanbul ignore next */ []));
     onValueChange = output();
     validators = signal([], ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
     editingValidatorIndex = signal(null, ...(ngDevMode ? [{ debugName: "editingValidatorIndex" }] : /* istanbul ignore next */ []));
@@ -73359,7 +73603,7 @@ class ValidatorsAttribute {
         { value: 'startsWith', label: 'starts with', kind: 'function', functionName: 'startsWithAny' },
         { value: 'endsWith', label: 'ends with', kind: 'function', functionName: 'endsWithAny' },
     ];
-    validatorTypeOptions = [
+    builtInValidatorTypeOptions = [
         { value: 'required', label: 'required' },
         { value: 'minlength', label: 'minLength' },
         { value: 'maxlength', label: 'maxLength' },
@@ -73370,7 +73614,19 @@ class ValidatorsAttribute {
         { value: 'strictoptions', label: 'strictOptions' },
         { value: 'custom', label: 'custom' },
     ];
+    validatorTypeOptions = computed(() => {
+        const elementType = String(this.elementType() ?? '')
+            .trim()
+            .toLowerCase();
+        const registered = this.validatorService
+            .getRegisteredValidatorTypes()
+            .filter((descriptor) => descriptor.appliesTo.length === 0 ||
+            (!!elementType && descriptor.appliesTo.includes(elementType)))
+            .map((descriptor) => ({ value: descriptor.type, label: descriptor.label }));
+        return [...this.builtInValidatorTypeOptions, ...registered];
+    }, ...(ngDevMode ? [{ debugName: "validatorTypeOptions" }] : /* istanbul ignore next */ []));
     structureService = inject(StructureService);
+    validatorService = inject(ValidatorService);
     constructor() {
         effect(() => {
             this.loadValidators();
@@ -73413,37 +73669,64 @@ class ValidatorsAttribute {
     onValidatorTypeChange(validator) {
         const type = this.normalizeType(validator?.type);
         validator.type = type;
-        if (type !== 'custom') {
-            validator.condition = '';
+        if (this.isCustomField(validator)) {
+            this.resetBuilderState();
         }
         else {
-            this.resetBuilderState();
+            validator.condition = '';
         }
         if (!this.hasValueField(validator)) {
             validator.value = '';
         }
+        const registeredType = this.validatorService.getRegisteredValidatorType(type);
+        if (registeredType?.defaultMessage && !String(validator.message ?? '').trim()) {
+            validator.message = registeredType.defaultMessage;
+        }
         this.emitChanges();
     }
+    validatorTypeOptionsFor(validator) {
+        const options = this.validatorTypeOptions();
+        const type = this.normalizeType(validator?.type);
+        if (options.some((option) => option.value === type)) {
+            return options;
+        }
+        return [...options, { value: type, label: `${type} (not registered)` }];
+    }
     onValidatorChanged() {
         this.emitChanges();
     }
     hasValueField(validator) {
         const type = this.normalizeType(validator?.type);
-        return (type === 'minlength' ||
+        if (type === 'minlength' ||
             type === 'maxlength' ||
             type === 'min' ||
             type === 'max' ||
-            type === 'pattern');
+            type === 'pattern') {
+            return true;
+        }
+        return Boolean(this.validatorService.getRegisteredValidatorType(type)?.hasValue);
     }
     isPatternField(validator) {
         return this.normalizeType(validator?.type) === 'pattern';
     }
     isCustomField(validator) {
-        return this.normalizeType(validator?.type) === 'custom';
+        const type = this.normalizeType(validator?.type);
+        return type === 'custom' || !this.validatorService.hasValidatorType(type);
+    }
+    resolveValueLabel(validator) {
+        const type = this.normalizeType(validator?.type);
+        return this.validatorService.getRegisteredValidatorType(type)?.valueLabel ?? '';
+    }
+    resolveValuePlaceholder(validator) {
+        if (this.isPatternField(validator)) {
+            return '^[0-9]{4}$';
+        }
+        const type = this.normalizeType(validator?.type);
+        return this.validatorService.getRegisteredValidatorType(type)?.valuePlaceholder || '10';
     }
     resolveValidatorTypeLabel(validator) {
         const type = this.normalizeType(validator?.type);
-        return this.validatorTypeOptions.find((option) => option.value === type)?.label ?? 'custom';
+        return this.validatorTypeOptions().find((option) => option.value === type)?.label ?? type;
     }
     resolveValidatorSummary(validator) {
         if (this.isCustomField(validator)) {
@@ -73594,8 +73877,9 @@ class ValidatorsAttribute {
             const type = this.normalizeType(value?.['type']);
             const condition = String(value?.['condition'] ?? '').trim();
             const message = String(value?.['message'] ?? '').trim();
+            const applyIf = String(value?.['applyIf'] ?? '').trim();
             const ruleValue = value?.['value'];
-            return {
+            const normalized = {
                 type,
                 condition,
                 message,
@@ -73605,27 +73889,17 @@ class ValidatorsAttribute {
                         ? ruleValue
                         : String(ruleValue),
             };
+            if (applyIf) {
+                normalized.applyIf = applyIf;
+            }
+            return normalized;
         });
     }
     normalizeType(raw) {
         const normalized = String(raw ?? '')
             .trim()
             .toLowerCase();
-        if (!normalized) {
-            return 'custom';
-        }
-        const allowed = new Set([
-            'required',
-            'minlength',
-            'maxlength',
-            'min',
-            'max',
-            'pattern',
-            'email',
-            'strictoptions',
-            'custom',
-        ]);
-        return allowed.has(normalized) ? normalized : 'custom';
+        return normalized || 'custom';
     }
     loadAllElementPaths() {
         const structureElements = Object.keys(this.structureService.getStructure()?.elements ?? {});
@@ -73790,7 +74064,7 @@ class ValidatorsAttribute {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ValidatorsAttribute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ValidatorsAttribute, isStandalone: true, selector: "validators-attribute", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div class=\"validator-list\">\r\n  @for (validator of validators(); track $index; let i = $index) {\r\n    <article class=\"validator-item\" [attr.data-testid]=\"'validator-item-' + i\">\r\n      <header class=\"validator-item__header\">\r\n        <div class=\"validator-item__title-wrap\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"validator-item__edit nvb-icon-button\"\r\n            (click)=\"openValidatorEditor(i)\"\r\n            [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n            [attr.data-testid]=\"'validator-edit-' + i\"\r\n          >\r\n            <nvb-icon name=\"edit\"></nvb-icon>\r\n          </button>\r\n          <strong>#{{ i + 1 }}</strong>\r\n          <span class=\"validator-item__summary\">{{ resolveValidatorSummary(validator) }}</span>\r\n        </div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"validator-item__remove nvb-icon-button nvb-icon-button--danger\"\r\n          (click)=\"removeValidator(i)\"\r\n          [attr.aria-label]=\"'validator.remove' | uiT: 'Remove validator'\"\r\n          [attr.data-testid]=\"'validator-remove-' + i\"\r\n        >\r\n          <nvb-icon name=\"delete\"></nvb-icon>\r\n        </button>\r\n      </header>\r\n\r\n      <div class=\"validator-item__meta\">\r\n        <span class=\"validator-item__message\">{{ resolveValidatorMessage(validator) }}</span>\r\n      </div>\r\n    </article>\r\n\r\n    @if (isValidatorExpanded(i)) {\r\n      <div\r\n        class=\"validator-dialog__backdrop\"\r\n        data-testid=\"validator-dialog-backdrop\"\r\n      >\r\n        <div\r\n          class=\"validator-dialog\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby=\"validator-dialog-title\"\r\n          aria-describedby=\"validator-dialog-description\"\r\n          [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n          data-testid=\"validator-dialog\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <div class=\"validator-dialog__header\">\r\n            <div class=\"validator-dialog__title-wrap\">\r\n              <span id=\"validator-dialog-title\" class=\"nvb-sr-only\">\r\n                {{ 'validator.edit' | uiT: 'Edit validator' }}\r\n              </span>\r\n              <span id=\"validator-dialog-description\" class=\"nvb-sr-only\">\r\n                {{ resolveValidatorSummary(validator) }}\r\n              </span>\r\n              <strong>{{ 'validator.edit' | uiT: 'Edit validator' }}</strong>\r\n              <span>{{ resolveValidatorSummary(validator) }}</span>\r\n            </div>\r\n            <button\r\n              type=\"button\"\r\n              class=\"validator-dialog__close nvb-icon-button nvb-icon-button--sx\"\r\n              (click)=\"closeValidatorEditor()\"\r\n              [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n              data-testid=\"validator-dialog-close\"\r\n            >\r\n              <nvb-icon name=\"close\"></nvb-icon>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"validator-dialog__body\">\r\n            <div class=\"validator-dialog__grid\">\r\n              <label class=\"validator-dialog__label\">\r\n                {{ 'validator.type' | uiT: 'Type' }}\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.type\"\r\n                  (ngModelChange)=\"onValidatorTypeChange(validator)\"\r\n                  data-testid=\"validator-dialog-type\"\r\n                >\r\n                  @for (option of validatorTypeOptions; track option.value) {\r\n                    <option [value]=\"option.value\">{{ option.label }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n\r\n              @if (hasValueField(validator)) {\r\n                <label class=\"validator-dialog__label\">\r\n                  {{ 'validator.value' | uiT: 'Value' }}\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"nvb-control__attribute-input\"\r\n                    [(ngModel)]=\"validator.value\"\r\n                    [spellcheck]=\"false\"\r\n                    [placeholder]=\"isPatternField(validator) ? '^[0-9]{4}$' : '10'\"\r\n                    (ngModelChange)=\"onValidatorChanged()\"\r\n                    data-testid=\"validator-dialog-value\"\r\n                  />\r\n                </label>\r\n              }\r\n\r\n              @if (isCustomField(validator)) {\r\n                <div class=\"validator-dialog__label validator-dialog__label--full\">\r\n                  {{ 'validator.condition' | uiT: 'Condition (error when true)' }}\r\n                  <div class=\"validator-dialog__mode-tabs\" role=\"tablist\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'code'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'code'\"\r\n                      (click)=\"setConditionEditorMode('code')\"\r\n                    >\r\n                      {{ 'code.mode.code' | uiT: 'Code' }}\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'builder'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'builder'\"\r\n                      (click)=\"setConditionEditorMode('builder')\"\r\n                    >\r\n                      {{ 'logic.mode.builder' | uiT: 'Builder' }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  @if (activeEditorMode() === 'builder') {\r\n                    <div class=\"validator-builder\" data-testid=\"validator-dialog-builder\">\r\n                      <datalist [id]=\"fieldSuggestionListId\">\r\n                        @for (field of fieldOptions(); track field.value) {\r\n                          <option [value]=\"field.value\">{{ field.label }}</option>\r\n                        }\r\n                      </datalist>\r\n\r\n                      <div class=\"validator-builder__rows\">\r\n                        @for (row of conditionRows; track trackByConditionRow($index, row); let rowIndex = $index) {\r\n                          <div class=\"validator-builder__line\">\r\n                            <div class=\"validator-builder__prefix\">\r\n                              @if (rowIndex === 0) {\r\n                                <span class=\"validator-builder__pill\">\r\n                                  {{ 'code.builder.if' | uiT: 'If' }}\r\n                                </span>\r\n                              } @else {\r\n                                <nvb-select\r\n                                  class=\"validator-builder__input validator-builder__input--join\"\r\n                                  [(ngModel)]=\"row.joinWith\"\r\n                                >\r\n                                  <option value=\"&&\">{{ 'code.builder.and' | uiT: 'And' }}</option>\r\n                                  <option value=\"||\">{{ 'code.builder.or' | uiT: 'Or' }}</option>\r\n                                </nvb-select>\r\n                              }\r\n                            </div>\r\n\r\n                            <input\r\n                              class=\"validator-builder__input validator-builder__input--field nvb-control__text-input\"\r\n                              type=\"text\"\r\n                              spellcheck=\"false\"\r\n                              autocomplete=\"off\"\r\n                              [attr.list]=\"fieldSuggestionListId\"\r\n                              [placeholder]=\"'code.builder.left' | uiT: 'Left field'\"\r\n                              [(ngModel)]=\"row.leftField\"\r\n                              (ngModelChange)=\"onConditionFieldChanged(row)\"\r\n                            />\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--operator\"\r\n                              [(ngModel)]=\"row.operator\"\r\n                            >\r\n                              @for (operator of getRowOperators(row); track operator.value) {\r\n                                <option [value]=\"operator.value\">{{ operator.label }}</option>\r\n                              }\r\n                            </nvb-select>\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--source\"\r\n                              [(ngModel)]=\"row.valueSource\"\r\n                              (ngModelChange)=\"onConditionValueSourceChanged(row)\"\r\n                            >\r\n                              <option value=\"literal\">{{ 'code.builder.value' | uiT: 'Value' }}</option>\r\n                              <option value=\"field\">{{ 'code.builder.field' | uiT: 'Field' }}</option>\r\n                            </nvb-select>\r\n\r\n                            @if (row.valueSource === 'field') {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                type=\"text\"\r\n                                spellcheck=\"false\"\r\n                                autocomplete=\"off\"\r\n                                [attr.list]=\"fieldSuggestionListId\"\r\n                                [placeholder]=\"'code.builder.rightField' | uiT: 'Right field'\"\r\n                                [(ngModel)]=\"row.fieldValue\"\r\n                              />\r\n                            } @else if (getRowFieldType(row) === 'boolean') {\r\n                              <nvb-select\r\n                                class=\"validator-builder__input validator-builder__input--value\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              >\r\n                                <option value=\"true\">true</option>\r\n                                <option value=\"false\">false</option>\r\n                              </nvb-select>\r\n                            } @else {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                [type]=\"getInputType(row)\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              />\r\n                            }\r\n\r\n                            @if (rowIndex > 0) {\r\n                              <builder-icon-button\r\n                                class=\"validator-builder__remove\"\r\n                                className=\"validator-builder__remove\"\r\n                                icon=\"delete\"\r\n                                tone=\"danger\"\r\n                                size=\"sm\"\r\n                                [ariaLabel]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                [title]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                (clicked)=\"removeConditionRow(row.id)\"\r\n                              />\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n\r\n                      <div class=\"validator-builder__actions\">\r\n                        <builder-action-button\r\n                          tone=\"neutral\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.addCondition' | uiT: 'Add condition'\"\r\n                          (clicked)=\"addConditionRow()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"subtle\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.clear' | uiT: 'Clear'\"\r\n                          (clicked)=\"clearConditions()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"primary\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.apply' | uiT: 'Apply to code'\"\r\n                          (clicked)=\"applyBuilderToValidatorCondition(validator)\"\r\n                        />\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <div class=\"validator-dialog__editor\">\r\n                      <native-code-editor\r\n                        language=\"expression\"\r\n                        [value]=\"validator.condition || ''\"\r\n                        [completions]=\"getValidatorConditionCompletions()\"\r\n                        (valueChange)=\"setValidatorCondition(validator, $event)\"\r\n                        (editorBlur)=\"setValidatorCondition(validator, $event)\"\r\n                        data-testid=\"validator-dialog-condition\"\r\n                      />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <label class=\"validator-dialog__label validator-dialog__label--full\">\r\n                {{ 'validator.message' | uiT: 'Message' }}\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.message\"\r\n                  [spellcheck]=\"false\"\r\n                  placeholder=\"Invalid value.\"\r\n                  (ngModelChange)=\"onValidatorChanged()\"\r\n                />\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  } @empty {\r\n    <small class=\"validator-list__empty\">\r\n      {{ 'validator.empty' | uiT: 'No validators yet.' }}\r\n    </small>\r\n  }\r\n</div>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"nvb-control__add-row-button\"\r\n  (click)=\"addValidator()\"\r\n  [attr.aria-label]=\"'validator.add' | uiT: 'Add validator'\"\r\n  data-testid=\"validator-add\"\r\n>\r\n  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n  {{ 'validator.add' | uiT: 'Add validator' }}\r\n</button>\r\n", styles: [":host{display:block}.validator-list{display:flex;flex-direction:column;gap:var(--space-2)}.validator-list__empty{display:block;padding:4px 0;color:var(--color-neutral-500);font-size:12px}.validator-item{border:1px solid var(--nvb-card-border-color, var(--color-neutral-200));border-radius:var(--nvb-control-radius, var(--radius-md));padding:7px;background:var(--nvb-card-bg, var(--color-neutral-000));box-shadow:none}.validator-item__header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--nvb-control-height);color:var(--color-neutral-700);font-size:12px}.validator-item__title-wrap{display:inline-flex;flex:1;min-width:0;align-items:center;gap:6px}.validator-item__summary,.validator-item__message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.validator-item__summary{min-width:0;color:var(--color-neutral-800);font-weight:650}.validator-item__meta{display:flex;align-items:center;gap:6px;min-width:0;margin:4px 0 0 calc(var(--nvb-control-height) + 12px);color:var(--color-neutral-600);font-size:11px;line-height:1.35}.validator-item__message{min-width:0}.validator-dialog__backdrop{position:fixed;inset:0;z-index:2147483450;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.validator-dialog{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(760px,100%);max-height:min(88vh,860px);overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);outline:0}.validator-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--color-neutral-200)}.validator-dialog__title-wrap{display:grid;gap:2px;min-width:0}.validator-dialog__title-wrap strong{color:var(--color-neutral-900);font-size:16px;line-height:22px;font-weight:600}.validator-dialog__title-wrap span{overflow:hidden;color:var(--color-neutral-500);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.validator-dialog__body{min-height:0;overflow:auto;padding:16px 24px 24px}.validator-dialog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.validator-dialog__label{display:flex;flex-direction:column;gap:4px;color:var(--color-neutral-600);font-size:11px}.validator-dialog__label--full{grid-column:1/-1}.validator-dialog__editor{height:260px;min-height:260px}.validator-dialog__mode-tabs{display:inline-flex;align-self:flex-start;overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-050)}.validator-dialog__mode-tab{min-height:28px;border:0;border-right:1px solid var(--color-neutral-200);padding:0 10px;background:transparent;color:var(--color-neutral-600);cursor:pointer;font:inherit;font-size:12px}.validator-dialog__mode-tab:last-child{border-right:0}.validator-dialog__mode-tab--active{background:var(--color-neutral-000);color:var(--color-primary-700);font-weight:650}.validator-builder{display:grid;gap:12px;padding:12px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-025, var(--color-neutral-050))}.validator-builder__rows{display:grid;gap:8px}.validator-builder__line{display:grid;grid-template-columns:62px minmax(120px,1.15fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(120px,1fr) 34px;gap:8px;align-items:center}.validator-builder__prefix{display:flex;align-items:center}.validator-builder__pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-000);color:var(--color-neutral-700);font-size:12px;font-weight:650}.validator-builder__input{width:100%;min-width:0}.validator-builder__actions{display:flex;flex-wrap:wrap;gap:8px}.validator-builder__remove{justify-self:end}.nvb-control__add-row-button{margin-top:var(--space-3)}@media(max-width:860px){.validator-builder__line{grid-template-columns:1fr}.validator-builder__remove{justify-self:start}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: NativeCodeEditor, selector: "native-code-editor", inputs: ["value", "language", "theme", "readOnly", "completions"], outputs: ["valueChange", "editorBlur"] }, { kind: "component", type: BuilderActionButton, selector: "builder-action-button", inputs: ["label", "ariaLabel", "testId", "title", "icon", "className", "tone", "size", "align", "active", "fullWidth", "disabled"], outputs: ["clicked"] }, { kind: "component", type: BuilderIconButton, selector: "builder-icon-button", inputs: ["icon", "ariaLabel", "title", "testId", "iconSet", "size", "tone", "ghost", "dragHandle", "active", "disabled", "className"], outputs: ["clicked"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ValidatorsAttribute, isStandalone: true, selector: "validators-attribute", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, elementType: { classPropertyName: "elementType", publicName: "elementType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div class=\"validator-list\">\r\n  @for (validator of validators(); track $index; let i = $index) {\r\n    <article class=\"validator-item\" [attr.data-testid]=\"'validator-item-' + i\">\r\n      <header class=\"validator-item__header\">\r\n        <div class=\"validator-item__title-wrap\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"validator-item__edit nvb-icon-button\"\r\n            (click)=\"openValidatorEditor(i)\"\r\n            [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n            [attr.data-testid]=\"'validator-edit-' + i\"\r\n          >\r\n            <nvb-icon name=\"edit\"></nvb-icon>\r\n          </button>\r\n          <strong>#{{ i + 1 }}</strong>\r\n          <span class=\"validator-item__summary\">{{ resolveValidatorSummary(validator) }}</span>\r\n        </div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"validator-item__remove nvb-icon-button nvb-icon-button--danger\"\r\n          (click)=\"removeValidator(i)\"\r\n          [attr.aria-label]=\"'validator.remove' | uiT: 'Remove validator'\"\r\n          [attr.data-testid]=\"'validator-remove-' + i\"\r\n        >\r\n          <nvb-icon name=\"delete\"></nvb-icon>\r\n        </button>\r\n      </header>\r\n\r\n      <div class=\"validator-item__meta\">\r\n        <span class=\"validator-item__message\">{{ resolveValidatorMessage(validator) }}</span>\r\n      </div>\r\n    </article>\r\n\r\n    @if (isValidatorExpanded(i)) {\r\n      <div\r\n        class=\"validator-dialog__backdrop\"\r\n        data-testid=\"validator-dialog-backdrop\"\r\n      >\r\n        <div\r\n          class=\"validator-dialog\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby=\"validator-dialog-title\"\r\n          aria-describedby=\"validator-dialog-description\"\r\n          [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n          data-testid=\"validator-dialog\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <div class=\"validator-dialog__header\">\r\n            <div class=\"validator-dialog__title-wrap\">\r\n              <span id=\"validator-dialog-title\" class=\"nvb-sr-only\">\r\n                {{ 'validator.edit' | uiT: 'Edit validator' }}\r\n              </span>\r\n              <span id=\"validator-dialog-description\" class=\"nvb-sr-only\">\r\n                {{ resolveValidatorSummary(validator) }}\r\n              </span>\r\n              <strong>{{ 'validator.edit' | uiT: 'Edit validator' }}</strong>\r\n              <span>{{ resolveValidatorSummary(validator) }}</span>\r\n            </div>\r\n            <button\r\n              type=\"button\"\r\n              class=\"validator-dialog__close nvb-icon-button nvb-icon-button--sx\"\r\n              (click)=\"closeValidatorEditor()\"\r\n              [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n              data-testid=\"validator-dialog-close\"\r\n            >\r\n              <nvb-icon name=\"close\"></nvb-icon>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"validator-dialog__body\">\r\n            <div class=\"validator-dialog__grid\">\r\n              <label class=\"validator-dialog__label\">\r\n                {{ 'validator.type' | uiT: 'Type' }}\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.type\"\r\n                  (ngModelChange)=\"onValidatorTypeChange(validator)\"\r\n                  data-testid=\"validator-dialog-type\"\r\n                >\r\n                  @for (option of validatorTypeOptionsFor(validator); track option.value) {\r\n                    <option [value]=\"option.value\">{{ option.label }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n\r\n              @if (hasValueField(validator)) {\r\n                <label class=\"validator-dialog__label\">\r\n                  {{ resolveValueLabel(validator) || ('validator.value' | uiT: 'Value') }}\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"nvb-control__attribute-input\"\r\n                    [(ngModel)]=\"validator.value\"\r\n                    [spellcheck]=\"false\"\r\n                    [placeholder]=\"resolveValuePlaceholder(validator)\"\r\n                    (ngModelChange)=\"onValidatorChanged()\"\r\n                    data-testid=\"validator-dialog-value\"\r\n                  />\r\n                </label>\r\n              }\r\n\r\n              @if (isCustomField(validator)) {\r\n                <div class=\"validator-dialog__label validator-dialog__label--full\">\r\n                  {{ 'validator.condition' | uiT: 'Condition (error when true)' }}\r\n                  <div class=\"validator-dialog__mode-tabs\" role=\"tablist\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'code'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'code'\"\r\n                      (click)=\"setConditionEditorMode('code')\"\r\n                    >\r\n                      {{ 'code.mode.code' | uiT: 'Code' }}\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'builder'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'builder'\"\r\n                      (click)=\"setConditionEditorMode('builder')\"\r\n                    >\r\n                      {{ 'logic.mode.builder' | uiT: 'Builder' }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  @if (activeEditorMode() === 'builder') {\r\n                    <div class=\"validator-builder\" data-testid=\"validator-dialog-builder\">\r\n                      <datalist [id]=\"fieldSuggestionListId\">\r\n                        @for (field of fieldOptions(); track field.value) {\r\n                          <option [value]=\"field.value\">{{ field.label }}</option>\r\n                        }\r\n                      </datalist>\r\n\r\n                      <div class=\"validator-builder__rows\">\r\n                        @for (row of conditionRows; track trackByConditionRow($index, row); let rowIndex = $index) {\r\n                          <div class=\"validator-builder__line\">\r\n                            <div class=\"validator-builder__prefix\">\r\n                              @if (rowIndex === 0) {\r\n                                <span class=\"validator-builder__pill\">\r\n                                  {{ 'code.builder.if' | uiT: 'If' }}\r\n                                </span>\r\n                              } @else {\r\n                                <nvb-select\r\n                                  class=\"validator-builder__input validator-builder__input--join\"\r\n                                  [(ngModel)]=\"row.joinWith\"\r\n                                >\r\n                                  <option value=\"&&\">{{ 'code.builder.and' | uiT: 'And' }}</option>\r\n                                  <option value=\"||\">{{ 'code.builder.or' | uiT: 'Or' }}</option>\r\n                                </nvb-select>\r\n                              }\r\n                            </div>\r\n\r\n                            <input\r\n                              class=\"validator-builder__input validator-builder__input--field nvb-control__text-input\"\r\n                              type=\"text\"\r\n                              spellcheck=\"false\"\r\n                              autocomplete=\"off\"\r\n                              [attr.list]=\"fieldSuggestionListId\"\r\n                              [placeholder]=\"'code.builder.left' | uiT: 'Left field'\"\r\n                              [(ngModel)]=\"row.leftField\"\r\n                              (ngModelChange)=\"onConditionFieldChanged(row)\"\r\n                            />\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--operator\"\r\n                              [(ngModel)]=\"row.operator\"\r\n                            >\r\n                              @for (operator of getRowOperators(row); track operator.value) {\r\n                                <option [value]=\"operator.value\">{{ operator.label }}</option>\r\n                              }\r\n                            </nvb-select>\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--source\"\r\n                              [(ngModel)]=\"row.valueSource\"\r\n                              (ngModelChange)=\"onConditionValueSourceChanged(row)\"\r\n                            >\r\n                              <option value=\"literal\">{{ 'code.builder.value' | uiT: 'Value' }}</option>\r\n                              <option value=\"field\">{{ 'code.builder.field' | uiT: 'Field' }}</option>\r\n                            </nvb-select>\r\n\r\n                            @if (row.valueSource === 'field') {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                type=\"text\"\r\n                                spellcheck=\"false\"\r\n                                autocomplete=\"off\"\r\n                                [attr.list]=\"fieldSuggestionListId\"\r\n                                [placeholder]=\"'code.builder.rightField' | uiT: 'Right field'\"\r\n                                [(ngModel)]=\"row.fieldValue\"\r\n                              />\r\n                            } @else if (getRowFieldType(row) === 'boolean') {\r\n                              <nvb-select\r\n                                class=\"validator-builder__input validator-builder__input--value\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              >\r\n                                <option value=\"true\">true</option>\r\n                                <option value=\"false\">false</option>\r\n                              </nvb-select>\r\n                            } @else {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                [type]=\"getInputType(row)\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              />\r\n                            }\r\n\r\n                            @if (rowIndex > 0) {\r\n                              <builder-icon-button\r\n                                class=\"validator-builder__remove\"\r\n                                className=\"validator-builder__remove\"\r\n                                icon=\"delete\"\r\n                                tone=\"danger\"\r\n                                size=\"sm\"\r\n                                [ariaLabel]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                [title]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                (clicked)=\"removeConditionRow(row.id)\"\r\n                              />\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n\r\n                      <div class=\"validator-builder__actions\">\r\n                        <builder-action-button\r\n                          tone=\"neutral\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.addCondition' | uiT: 'Add condition'\"\r\n                          (clicked)=\"addConditionRow()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"subtle\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.clear' | uiT: 'Clear'\"\r\n                          (clicked)=\"clearConditions()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"primary\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.apply' | uiT: 'Apply to code'\"\r\n                          (clicked)=\"applyBuilderToValidatorCondition(validator)\"\r\n                        />\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <div class=\"validator-dialog__editor\">\r\n                      <native-code-editor\r\n                        language=\"expression\"\r\n                        [value]=\"validator.condition || ''\"\r\n                        [completions]=\"getValidatorConditionCompletions()\"\r\n                        (valueChange)=\"setValidatorCondition(validator, $event)\"\r\n                        (editorBlur)=\"setValidatorCondition(validator, $event)\"\r\n                        data-testid=\"validator-dialog-condition\"\r\n                      />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <label class=\"validator-dialog__label validator-dialog__label--full\">\r\n                {{ 'validator.message' | uiT: 'Message' }}\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.message\"\r\n                  [spellcheck]=\"false\"\r\n                  placeholder=\"Invalid value.\"\r\n                  (ngModelChange)=\"onValidatorChanged()\"\r\n                />\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  } @empty {\r\n    <small class=\"validator-list__empty\">\r\n      {{ 'validator.empty' | uiT: 'No validators yet.' }}\r\n    </small>\r\n  }\r\n</div>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"nvb-control__add-row-button\"\r\n  (click)=\"addValidator()\"\r\n  [attr.aria-label]=\"'validator.add' | uiT: 'Add validator'\"\r\n  data-testid=\"validator-add\"\r\n>\r\n  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n  {{ 'validator.add' | uiT: 'Add validator' }}\r\n</button>\r\n", styles: [":host{display:block}.validator-list{display:flex;flex-direction:column;gap:var(--space-2)}.validator-list__empty{display:block;padding:4px 0;color:var(--color-neutral-500);font-size:12px}.validator-item{border:1px solid var(--nvb-card-border-color, var(--color-neutral-200));border-radius:var(--nvb-control-radius, var(--radius-md));padding:7px;background:var(--nvb-card-bg, var(--color-neutral-000));box-shadow:none}.validator-item__header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--nvb-control-height);color:var(--color-neutral-700);font-size:12px}.validator-item__title-wrap{display:inline-flex;flex:1;min-width:0;align-items:center;gap:6px}.validator-item__summary,.validator-item__message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.validator-item__summary{min-width:0;color:var(--color-neutral-800);font-weight:650}.validator-item__meta{display:flex;align-items:center;gap:6px;min-width:0;margin:4px 0 0 calc(var(--nvb-control-height) + 12px);color:var(--color-neutral-600);font-size:11px;line-height:1.35}.validator-item__message{min-width:0}.validator-dialog__backdrop{position:fixed;inset:0;z-index:2147483450;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.validator-dialog{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(760px,100%);max-height:min(88vh,860px);overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);outline:0}.validator-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--color-neutral-200)}.validator-dialog__title-wrap{display:grid;gap:2px;min-width:0}.validator-dialog__title-wrap strong{color:var(--color-neutral-900);font-size:16px;line-height:22px;font-weight:600}.validator-dialog__title-wrap span{overflow:hidden;color:var(--color-neutral-500);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.validator-dialog__body{min-height:0;overflow:auto;padding:16px 24px 24px}.validator-dialog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.validator-dialog__label{display:flex;flex-direction:column;gap:4px;color:var(--color-neutral-600);font-size:11px}.validator-dialog__label--full{grid-column:1/-1}.validator-dialog__editor{height:260px;min-height:260px}.validator-dialog__mode-tabs{display:inline-flex;align-self:flex-start;overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-050)}.validator-dialog__mode-tab{min-height:28px;border:0;border-right:1px solid var(--color-neutral-200);padding:0 10px;background:transparent;color:var(--color-neutral-600);cursor:pointer;font:inherit;font-size:12px}.validator-dialog__mode-tab:last-child{border-right:0}.validator-dialog__mode-tab--active{background:var(--color-neutral-000);color:var(--color-primary-700);font-weight:650}.validator-builder{display:grid;gap:12px;padding:12px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-025, var(--color-neutral-050))}.validator-builder__rows{display:grid;gap:8px}.validator-builder__line{display:grid;grid-template-columns:62px minmax(120px,1.15fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(120px,1fr) 34px;gap:8px;align-items:center}.validator-builder__prefix{display:flex;align-items:center}.validator-builder__pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-000);color:var(--color-neutral-700);font-size:12px;font-weight:650}.validator-builder__input{width:100%;min-width:0}.validator-builder__actions{display:flex;flex-wrap:wrap;gap:8px}.validator-builder__remove{justify-self:end}.nvb-control__add-row-button{margin-top:var(--space-3)}@media(max-width:860px){.validator-builder__line{grid-template-columns:1fr}.validator-builder__remove{justify-self:start}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: NativeCodeEditor, selector: "native-code-editor", inputs: ["value", "language", "theme", "readOnly", "completions"], outputs: ["valueChange", "editorBlur"] }, { kind: "component", type: BuilderActionButton, selector: "builder-action-button", inputs: ["label", "ariaLabel", "testId", "title", "icon", "className", "tone", "size", "align", "active", "fullWidth", "disabled"], outputs: ["clicked"] }, { kind: "component", type: BuilderIconButton, selector: "builder-icon-button", inputs: ["icon", "ariaLabel", "title", "testId", "iconSet", "size", "tone", "ghost", "dragHandle", "active", "disabled", "className"], outputs: ["clicked"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ValidatorsAttribute, decorators: [{
             type: Component,
@@ -73802,8 +74076,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NativeCodeEditor,
                         BuilderActionButton,
                         BuilderIconButton,
-                    ], template: "<div class=\"validator-list\">\r\n  @for (validator of validators(); track $index; let i = $index) {\r\n    <article class=\"validator-item\" [attr.data-testid]=\"'validator-item-' + i\">\r\n      <header class=\"validator-item__header\">\r\n        <div class=\"validator-item__title-wrap\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"validator-item__edit nvb-icon-button\"\r\n            (click)=\"openValidatorEditor(i)\"\r\n            [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n            [attr.data-testid]=\"'validator-edit-' + i\"\r\n          >\r\n            <nvb-icon name=\"edit\"></nvb-icon>\r\n          </button>\r\n          <strong>#{{ i + 1 }}</strong>\r\n          <span class=\"validator-item__summary\">{{ resolveValidatorSummary(validator) }}</span>\r\n        </div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"validator-item__remove nvb-icon-button nvb-icon-button--danger\"\r\n          (click)=\"removeValidator(i)\"\r\n          [attr.aria-label]=\"'validator.remove' | uiT: 'Remove validator'\"\r\n          [attr.data-testid]=\"'validator-remove-' + i\"\r\n        >\r\n          <nvb-icon name=\"delete\"></nvb-icon>\r\n        </button>\r\n      </header>\r\n\r\n      <div class=\"validator-item__meta\">\r\n        <span class=\"validator-item__message\">{{ resolveValidatorMessage(validator) }}</span>\r\n      </div>\r\n    </article>\r\n\r\n    @if (isValidatorExpanded(i)) {\r\n      <div\r\n        class=\"validator-dialog__backdrop\"\r\n        data-testid=\"validator-dialog-backdrop\"\r\n      >\r\n        <div\r\n          class=\"validator-dialog\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby=\"validator-dialog-title\"\r\n          aria-describedby=\"validator-dialog-description\"\r\n          [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n          data-testid=\"validator-dialog\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <div class=\"validator-dialog__header\">\r\n            <div class=\"validator-dialog__title-wrap\">\r\n              <span id=\"validator-dialog-title\" class=\"nvb-sr-only\">\r\n                {{ 'validator.edit' | uiT: 'Edit validator' }}\r\n              </span>\r\n              <span id=\"validator-dialog-description\" class=\"nvb-sr-only\">\r\n                {{ resolveValidatorSummary(validator) }}\r\n              </span>\r\n              <strong>{{ 'validator.edit' | uiT: 'Edit validator' }}</strong>\r\n              <span>{{ resolveValidatorSummary(validator) }}</span>\r\n            </div>\r\n            <button\r\n              type=\"button\"\r\n              class=\"validator-dialog__close nvb-icon-button nvb-icon-button--sx\"\r\n              (click)=\"closeValidatorEditor()\"\r\n              [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n              data-testid=\"validator-dialog-close\"\r\n            >\r\n              <nvb-icon name=\"close\"></nvb-icon>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"validator-dialog__body\">\r\n            <div class=\"validator-dialog__grid\">\r\n              <label class=\"validator-dialog__label\">\r\n                {{ 'validator.type' | uiT: 'Type' }}\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.type\"\r\n                  (ngModelChange)=\"onValidatorTypeChange(validator)\"\r\n                  data-testid=\"validator-dialog-type\"\r\n                >\r\n                  @for (option of validatorTypeOptions; track option.value) {\r\n                    <option [value]=\"option.value\">{{ option.label }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n\r\n              @if (hasValueField(validator)) {\r\n                <label class=\"validator-dialog__label\">\r\n                  {{ 'validator.value' | uiT: 'Value' }}\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"nvb-control__attribute-input\"\r\n                    [(ngModel)]=\"validator.value\"\r\n                    [spellcheck]=\"false\"\r\n                    [placeholder]=\"isPatternField(validator) ? '^[0-9]{4}$' : '10'\"\r\n                    (ngModelChange)=\"onValidatorChanged()\"\r\n                    data-testid=\"validator-dialog-value\"\r\n                  />\r\n                </label>\r\n              }\r\n\r\n              @if (isCustomField(validator)) {\r\n                <div class=\"validator-dialog__label validator-dialog__label--full\">\r\n                  {{ 'validator.condition' | uiT: 'Condition (error when true)' }}\r\n                  <div class=\"validator-dialog__mode-tabs\" role=\"tablist\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'code'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'code'\"\r\n                      (click)=\"setConditionEditorMode('code')\"\r\n                    >\r\n                      {{ 'code.mode.code' | uiT: 'Code' }}\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'builder'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'builder'\"\r\n                      (click)=\"setConditionEditorMode('builder')\"\r\n                    >\r\n                      {{ 'logic.mode.builder' | uiT: 'Builder' }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  @if (activeEditorMode() === 'builder') {\r\n                    <div class=\"validator-builder\" data-testid=\"validator-dialog-builder\">\r\n                      <datalist [id]=\"fieldSuggestionListId\">\r\n                        @for (field of fieldOptions(); track field.value) {\r\n                          <option [value]=\"field.value\">{{ field.label }}</option>\r\n                        }\r\n                      </datalist>\r\n\r\n                      <div class=\"validator-builder__rows\">\r\n                        @for (row of conditionRows; track trackByConditionRow($index, row); let rowIndex = $index) {\r\n                          <div class=\"validator-builder__line\">\r\n                            <div class=\"validator-builder__prefix\">\r\n                              @if (rowIndex === 0) {\r\n                                <span class=\"validator-builder__pill\">\r\n                                  {{ 'code.builder.if' | uiT: 'If' }}\r\n                                </span>\r\n                              } @else {\r\n                                <nvb-select\r\n                                  class=\"validator-builder__input validator-builder__input--join\"\r\n                                  [(ngModel)]=\"row.joinWith\"\r\n                                >\r\n                                  <option value=\"&&\">{{ 'code.builder.and' | uiT: 'And' }}</option>\r\n                                  <option value=\"||\">{{ 'code.builder.or' | uiT: 'Or' }}</option>\r\n                                </nvb-select>\r\n                              }\r\n                            </div>\r\n\r\n                            <input\r\n                              class=\"validator-builder__input validator-builder__input--field nvb-control__text-input\"\r\n                              type=\"text\"\r\n                              spellcheck=\"false\"\r\n                              autocomplete=\"off\"\r\n                              [attr.list]=\"fieldSuggestionListId\"\r\n                              [placeholder]=\"'code.builder.left' | uiT: 'Left field'\"\r\n                              [(ngModel)]=\"row.leftField\"\r\n                              (ngModelChange)=\"onConditionFieldChanged(row)\"\r\n                            />\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--operator\"\r\n                              [(ngModel)]=\"row.operator\"\r\n                            >\r\n                              @for (operator of getRowOperators(row); track operator.value) {\r\n                                <option [value]=\"operator.value\">{{ operator.label }}</option>\r\n                              }\r\n                            </nvb-select>\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--source\"\r\n                              [(ngModel)]=\"row.valueSource\"\r\n                              (ngModelChange)=\"onConditionValueSourceChanged(row)\"\r\n                            >\r\n                              <option value=\"literal\">{{ 'code.builder.value' | uiT: 'Value' }}</option>\r\n                              <option value=\"field\">{{ 'code.builder.field' | uiT: 'Field' }}</option>\r\n                            </nvb-select>\r\n\r\n                            @if (row.valueSource === 'field') {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                type=\"text\"\r\n                                spellcheck=\"false\"\r\n                                autocomplete=\"off\"\r\n                                [attr.list]=\"fieldSuggestionListId\"\r\n                                [placeholder]=\"'code.builder.rightField' | uiT: 'Right field'\"\r\n                                [(ngModel)]=\"row.fieldValue\"\r\n                              />\r\n                            } @else if (getRowFieldType(row) === 'boolean') {\r\n                              <nvb-select\r\n                                class=\"validator-builder__input validator-builder__input--value\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              >\r\n                                <option value=\"true\">true</option>\r\n                                <option value=\"false\">false</option>\r\n                              </nvb-select>\r\n                            } @else {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                [type]=\"getInputType(row)\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              />\r\n                            }\r\n\r\n                            @if (rowIndex > 0) {\r\n                              <builder-icon-button\r\n                                class=\"validator-builder__remove\"\r\n                                className=\"validator-builder__remove\"\r\n                                icon=\"delete\"\r\n                                tone=\"danger\"\r\n                                size=\"sm\"\r\n                                [ariaLabel]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                [title]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                (clicked)=\"removeConditionRow(row.id)\"\r\n                              />\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n\r\n                      <div class=\"validator-builder__actions\">\r\n                        <builder-action-button\r\n                          tone=\"neutral\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.addCondition' | uiT: 'Add condition'\"\r\n                          (clicked)=\"addConditionRow()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"subtle\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.clear' | uiT: 'Clear'\"\r\n                          (clicked)=\"clearConditions()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"primary\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.apply' | uiT: 'Apply to code'\"\r\n                          (clicked)=\"applyBuilderToValidatorCondition(validator)\"\r\n                        />\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <div class=\"validator-dialog__editor\">\r\n                      <native-code-editor\r\n                        language=\"expression\"\r\n                        [value]=\"validator.condition || ''\"\r\n                        [completions]=\"getValidatorConditionCompletions()\"\r\n                        (valueChange)=\"setValidatorCondition(validator, $event)\"\r\n                        (editorBlur)=\"setValidatorCondition(validator, $event)\"\r\n                        data-testid=\"validator-dialog-condition\"\r\n                      />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <label class=\"validator-dialog__label validator-dialog__label--full\">\r\n                {{ 'validator.message' | uiT: 'Message' }}\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.message\"\r\n                  [spellcheck]=\"false\"\r\n                  placeholder=\"Invalid value.\"\r\n                  (ngModelChange)=\"onValidatorChanged()\"\r\n                />\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  } @empty {\r\n    <small class=\"validator-list__empty\">\r\n      {{ 'validator.empty' | uiT: 'No validators yet.' }}\r\n    </small>\r\n  }\r\n</div>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"nvb-control__add-row-button\"\r\n  (click)=\"addValidator()\"\r\n  [attr.aria-label]=\"'validator.add' | uiT: 'Add validator'\"\r\n  data-testid=\"validator-add\"\r\n>\r\n  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n  {{ 'validator.add' | uiT: 'Add validator' }}\r\n</button>\r\n", styles: [":host{display:block}.validator-list{display:flex;flex-direction:column;gap:var(--space-2)}.validator-list__empty{display:block;padding:4px 0;color:var(--color-neutral-500);font-size:12px}.validator-item{border:1px solid var(--nvb-card-border-color, var(--color-neutral-200));border-radius:var(--nvb-control-radius, var(--radius-md));padding:7px;background:var(--nvb-card-bg, var(--color-neutral-000));box-shadow:none}.validator-item__header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--nvb-control-height);color:var(--color-neutral-700);font-size:12px}.validator-item__title-wrap{display:inline-flex;flex:1;min-width:0;align-items:center;gap:6px}.validator-item__summary,.validator-item__message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.validator-item__summary{min-width:0;color:var(--color-neutral-800);font-weight:650}.validator-item__meta{display:flex;align-items:center;gap:6px;min-width:0;margin:4px 0 0 calc(var(--nvb-control-height) + 12px);color:var(--color-neutral-600);font-size:11px;line-height:1.35}.validator-item__message{min-width:0}.validator-dialog__backdrop{position:fixed;inset:0;z-index:2147483450;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.validator-dialog{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(760px,100%);max-height:min(88vh,860px);overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);outline:0}.validator-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--color-neutral-200)}.validator-dialog__title-wrap{display:grid;gap:2px;min-width:0}.validator-dialog__title-wrap strong{color:var(--color-neutral-900);font-size:16px;line-height:22px;font-weight:600}.validator-dialog__title-wrap span{overflow:hidden;color:var(--color-neutral-500);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.validator-dialog__body{min-height:0;overflow:auto;padding:16px 24px 24px}.validator-dialog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.validator-dialog__label{display:flex;flex-direction:column;gap:4px;color:var(--color-neutral-600);font-size:11px}.validator-dialog__label--full{grid-column:1/-1}.validator-dialog__editor{height:260px;min-height:260px}.validator-dialog__mode-tabs{display:inline-flex;align-self:flex-start;overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-050)}.validator-dialog__mode-tab{min-height:28px;border:0;border-right:1px solid var(--color-neutral-200);padding:0 10px;background:transparent;color:var(--color-neutral-600);cursor:pointer;font:inherit;font-size:12px}.validator-dialog__mode-tab:last-child{border-right:0}.validator-dialog__mode-tab--active{background:var(--color-neutral-000);color:var(--color-primary-700);font-weight:650}.validator-builder{display:grid;gap:12px;padding:12px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-025, var(--color-neutral-050))}.validator-builder__rows{display:grid;gap:8px}.validator-builder__line{display:grid;grid-template-columns:62px minmax(120px,1.15fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(120px,1fr) 34px;gap:8px;align-items:center}.validator-builder__prefix{display:flex;align-items:center}.validator-builder__pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-000);color:var(--color-neutral-700);font-size:12px;font-weight:650}.validator-builder__input{width:100%;min-width:0}.validator-builder__actions{display:flex;flex-wrap:wrap;gap:8px}.validator-builder__remove{justify-self:end}.nvb-control__add-row-button{margin-top:var(--space-3)}@media(max-width:860px){.validator-builder__line{grid-template-columns:1fr}.validator-builder__remove{justify-self:start}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
+                    ], template: "<div class=\"validator-list\">\r\n  @for (validator of validators(); track $index; let i = $index) {\r\n    <article class=\"validator-item\" [attr.data-testid]=\"'validator-item-' + i\">\r\n      <header class=\"validator-item__header\">\r\n        <div class=\"validator-item__title-wrap\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"validator-item__edit nvb-icon-button\"\r\n            (click)=\"openValidatorEditor(i)\"\r\n            [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n            [attr.data-testid]=\"'validator-edit-' + i\"\r\n          >\r\n            <nvb-icon name=\"edit\"></nvb-icon>\r\n          </button>\r\n          <strong>#{{ i + 1 }}</strong>\r\n          <span class=\"validator-item__summary\">{{ resolveValidatorSummary(validator) }}</span>\r\n        </div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"validator-item__remove nvb-icon-button nvb-icon-button--danger\"\r\n          (click)=\"removeValidator(i)\"\r\n          [attr.aria-label]=\"'validator.remove' | uiT: 'Remove validator'\"\r\n          [attr.data-testid]=\"'validator-remove-' + i\"\r\n        >\r\n          <nvb-icon name=\"delete\"></nvb-icon>\r\n        </button>\r\n      </header>\r\n\r\n      <div class=\"validator-item__meta\">\r\n        <span class=\"validator-item__message\">{{ resolveValidatorMessage(validator) }}</span>\r\n      </div>\r\n    </article>\r\n\r\n    @if (isValidatorExpanded(i)) {\r\n      <div\r\n        class=\"validator-dialog__backdrop\"\r\n        data-testid=\"validator-dialog-backdrop\"\r\n      >\r\n        <div\r\n          class=\"validator-dialog\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby=\"validator-dialog-title\"\r\n          aria-describedby=\"validator-dialog-description\"\r\n          [attr.aria-label]=\"'validator.edit' | uiT: 'Edit validator'\"\r\n          data-testid=\"validator-dialog\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <div class=\"validator-dialog__header\">\r\n            <div class=\"validator-dialog__title-wrap\">\r\n              <span id=\"validator-dialog-title\" class=\"nvb-sr-only\">\r\n                {{ 'validator.edit' | uiT: 'Edit validator' }}\r\n              </span>\r\n              <span id=\"validator-dialog-description\" class=\"nvb-sr-only\">\r\n                {{ resolveValidatorSummary(validator) }}\r\n              </span>\r\n              <strong>{{ 'validator.edit' | uiT: 'Edit validator' }}</strong>\r\n              <span>{{ resolveValidatorSummary(validator) }}</span>\r\n            </div>\r\n            <button\r\n              type=\"button\"\r\n              class=\"validator-dialog__close nvb-icon-button nvb-icon-button--sx\"\r\n              (click)=\"closeValidatorEditor()\"\r\n              [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n              data-testid=\"validator-dialog-close\"\r\n            >\r\n              <nvb-icon name=\"close\"></nvb-icon>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"validator-dialog__body\">\r\n            <div class=\"validator-dialog__grid\">\r\n              <label class=\"validator-dialog__label\">\r\n                {{ 'validator.type' | uiT: 'Type' }}\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.type\"\r\n                  (ngModelChange)=\"onValidatorTypeChange(validator)\"\r\n                  data-testid=\"validator-dialog-type\"\r\n                >\r\n                  @for (option of validatorTypeOptionsFor(validator); track option.value) {\r\n                    <option [value]=\"option.value\">{{ option.label }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n\r\n              @if (hasValueField(validator)) {\r\n                <label class=\"validator-dialog__label\">\r\n                  {{ resolveValueLabel(validator) || ('validator.value' | uiT: 'Value') }}\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"nvb-control__attribute-input\"\r\n                    [(ngModel)]=\"validator.value\"\r\n                    [spellcheck]=\"false\"\r\n                    [placeholder]=\"resolveValuePlaceholder(validator)\"\r\n                    (ngModelChange)=\"onValidatorChanged()\"\r\n                    data-testid=\"validator-dialog-value\"\r\n                  />\r\n                </label>\r\n              }\r\n\r\n              @if (isCustomField(validator)) {\r\n                <div class=\"validator-dialog__label validator-dialog__label--full\">\r\n                  {{ 'validator.condition' | uiT: 'Condition (error when true)' }}\r\n                  <div class=\"validator-dialog__mode-tabs\" role=\"tablist\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'code'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'code'\"\r\n                      (click)=\"setConditionEditorMode('code')\"\r\n                    >\r\n                      {{ 'code.mode.code' | uiT: 'Code' }}\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"validator-dialog__mode-tab\"\r\n                      [class.validator-dialog__mode-tab--active]=\"activeEditorMode() === 'builder'\"\r\n                      [attr.aria-selected]=\"activeEditorMode() === 'builder'\"\r\n                      (click)=\"setConditionEditorMode('builder')\"\r\n                    >\r\n                      {{ 'logic.mode.builder' | uiT: 'Builder' }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  @if (activeEditorMode() === 'builder') {\r\n                    <div class=\"validator-builder\" data-testid=\"validator-dialog-builder\">\r\n                      <datalist [id]=\"fieldSuggestionListId\">\r\n                        @for (field of fieldOptions(); track field.value) {\r\n                          <option [value]=\"field.value\">{{ field.label }}</option>\r\n                        }\r\n                      </datalist>\r\n\r\n                      <div class=\"validator-builder__rows\">\r\n                        @for (row of conditionRows; track trackByConditionRow($index, row); let rowIndex = $index) {\r\n                          <div class=\"validator-builder__line\">\r\n                            <div class=\"validator-builder__prefix\">\r\n                              @if (rowIndex === 0) {\r\n                                <span class=\"validator-builder__pill\">\r\n                                  {{ 'code.builder.if' | uiT: 'If' }}\r\n                                </span>\r\n                              } @else {\r\n                                <nvb-select\r\n                                  class=\"validator-builder__input validator-builder__input--join\"\r\n                                  [(ngModel)]=\"row.joinWith\"\r\n                                >\r\n                                  <option value=\"&&\">{{ 'code.builder.and' | uiT: 'And' }}</option>\r\n                                  <option value=\"||\">{{ 'code.builder.or' | uiT: 'Or' }}</option>\r\n                                </nvb-select>\r\n                              }\r\n                            </div>\r\n\r\n                            <input\r\n                              class=\"validator-builder__input validator-builder__input--field nvb-control__text-input\"\r\n                              type=\"text\"\r\n                              spellcheck=\"false\"\r\n                              autocomplete=\"off\"\r\n                              [attr.list]=\"fieldSuggestionListId\"\r\n                              [placeholder]=\"'code.builder.left' | uiT: 'Left field'\"\r\n                              [(ngModel)]=\"row.leftField\"\r\n                              (ngModelChange)=\"onConditionFieldChanged(row)\"\r\n                            />\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--operator\"\r\n                              [(ngModel)]=\"row.operator\"\r\n                            >\r\n                              @for (operator of getRowOperators(row); track operator.value) {\r\n                                <option [value]=\"operator.value\">{{ operator.label }}</option>\r\n                              }\r\n                            </nvb-select>\r\n\r\n                            <nvb-select\r\n                              class=\"validator-builder__input validator-builder__input--source\"\r\n                              [(ngModel)]=\"row.valueSource\"\r\n                              (ngModelChange)=\"onConditionValueSourceChanged(row)\"\r\n                            >\r\n                              <option value=\"literal\">{{ 'code.builder.value' | uiT: 'Value' }}</option>\r\n                              <option value=\"field\">{{ 'code.builder.field' | uiT: 'Field' }}</option>\r\n                            </nvb-select>\r\n\r\n                            @if (row.valueSource === 'field') {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                type=\"text\"\r\n                                spellcheck=\"false\"\r\n                                autocomplete=\"off\"\r\n                                [attr.list]=\"fieldSuggestionListId\"\r\n                                [placeholder]=\"'code.builder.rightField' | uiT: 'Right field'\"\r\n                                [(ngModel)]=\"row.fieldValue\"\r\n                              />\r\n                            } @else if (getRowFieldType(row) === 'boolean') {\r\n                              <nvb-select\r\n                                class=\"validator-builder__input validator-builder__input--value\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              >\r\n                                <option value=\"true\">true</option>\r\n                                <option value=\"false\">false</option>\r\n                              </nvb-select>\r\n                            } @else {\r\n                              <input\r\n                                class=\"validator-builder__input validator-builder__input--value nvb-control__text-input\"\r\n                                [type]=\"getInputType(row)\"\r\n                                [(ngModel)]=\"row.literalValue\"\r\n                              />\r\n                            }\r\n\r\n                            @if (rowIndex > 0) {\r\n                              <builder-icon-button\r\n                                class=\"validator-builder__remove\"\r\n                                className=\"validator-builder__remove\"\r\n                                icon=\"delete\"\r\n                                tone=\"danger\"\r\n                                size=\"sm\"\r\n                                [ariaLabel]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                [title]=\"'code.builder.remove' | uiT: 'Remove condition'\"\r\n                                (clicked)=\"removeConditionRow(row.id)\"\r\n                              />\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n\r\n                      <div class=\"validator-builder__actions\">\r\n                        <builder-action-button\r\n                          tone=\"neutral\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.addCondition' | uiT: 'Add condition'\"\r\n                          (clicked)=\"addConditionRow()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"subtle\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.clear' | uiT: 'Clear'\"\r\n                          (clicked)=\"clearConditions()\"\r\n                        />\r\n                        <builder-action-button\r\n                          tone=\"primary\"\r\n                          size=\"sm\"\r\n                          [label]=\"'code.builder.apply' | uiT: 'Apply to code'\"\r\n                          (clicked)=\"applyBuilderToValidatorCondition(validator)\"\r\n                        />\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <div class=\"validator-dialog__editor\">\r\n                      <native-code-editor\r\n                        language=\"expression\"\r\n                        [value]=\"validator.condition || ''\"\r\n                        [completions]=\"getValidatorConditionCompletions()\"\r\n                        (valueChange)=\"setValidatorCondition(validator, $event)\"\r\n                        (editorBlur)=\"setValidatorCondition(validator, $event)\"\r\n                        data-testid=\"validator-dialog-condition\"\r\n                      />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <label class=\"validator-dialog__label validator-dialog__label--full\">\r\n                {{ 'validator.message' | uiT: 'Message' }}\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"validator.message\"\r\n                  [spellcheck]=\"false\"\r\n                  placeholder=\"Invalid value.\"\r\n                  (ngModelChange)=\"onValidatorChanged()\"\r\n                />\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  } @empty {\r\n    <small class=\"validator-list__empty\">\r\n      {{ 'validator.empty' | uiT: 'No validators yet.' }}\r\n    </small>\r\n  }\r\n</div>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"nvb-control__add-row-button\"\r\n  (click)=\"addValidator()\"\r\n  [attr.aria-label]=\"'validator.add' | uiT: 'Add validator'\"\r\n  data-testid=\"validator-add\"\r\n>\r\n  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n  {{ 'validator.add' | uiT: 'Add validator' }}\r\n</button>\r\n", styles: [":host{display:block}.validator-list{display:flex;flex-direction:column;gap:var(--space-2)}.validator-list__empty{display:block;padding:4px 0;color:var(--color-neutral-500);font-size:12px}.validator-item{border:1px solid var(--nvb-card-border-color, var(--color-neutral-200));border-radius:var(--nvb-control-radius, var(--radius-md));padding:7px;background:var(--nvb-card-bg, var(--color-neutral-000));box-shadow:none}.validator-item__header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--nvb-control-height);color:var(--color-neutral-700);font-size:12px}.validator-item__title-wrap{display:inline-flex;flex:1;min-width:0;align-items:center;gap:6px}.validator-item__summary,.validator-item__message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.validator-item__summary{min-width:0;color:var(--color-neutral-800);font-weight:650}.validator-item__meta{display:flex;align-items:center;gap:6px;min-width:0;margin:4px 0 0 calc(var(--nvb-control-height) + 12px);color:var(--color-neutral-600);font-size:11px;line-height:1.35}.validator-item__message{min-width:0}.validator-dialog__backdrop{position:fixed;inset:0;z-index:2147483450;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.validator-dialog{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(760px,100%);max-height:min(88vh,860px);overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);outline:0}.validator-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--color-neutral-200)}.validator-dialog__title-wrap{display:grid;gap:2px;min-width:0}.validator-dialog__title-wrap strong{color:var(--color-neutral-900);font-size:16px;line-height:22px;font-weight:600}.validator-dialog__title-wrap span{overflow:hidden;color:var(--color-neutral-500);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.validator-dialog__body{min-height:0;overflow:auto;padding:16px 24px 24px}.validator-dialog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.validator-dialog__label{display:flex;flex-direction:column;gap:4px;color:var(--color-neutral-600);font-size:11px}.validator-dialog__label--full{grid-column:1/-1}.validator-dialog__editor{height:260px;min-height:260px}.validator-dialog__mode-tabs{display:inline-flex;align-self:flex-start;overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-050)}.validator-dialog__mode-tab{min-height:28px;border:0;border-right:1px solid var(--color-neutral-200);padding:0 10px;background:transparent;color:var(--color-neutral-600);cursor:pointer;font:inherit;font-size:12px}.validator-dialog__mode-tab:last-child{border-right:0}.validator-dialog__mode-tab--active{background:var(--color-neutral-000);color:var(--color-primary-700);font-weight:650}.validator-builder{display:grid;gap:12px;padding:12px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-025, var(--color-neutral-050))}.validator-builder__rows{display:grid;gap:8px}.validator-builder__line{display:grid;grid-template-columns:62px minmax(120px,1.15fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(120px,1fr) 34px;gap:8px;align-items:center}.validator-builder__prefix{display:flex;align-items:center}.validator-builder__pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius, var(--radius-sm));background:var(--color-neutral-000);color:var(--color-neutral-700);font-size:12px;font-weight:650}.validator-builder__input{width:100%;min-width:0}.validator-builder__actions{display:flex;flex-wrap:wrap;gap:8px}.validator-builder__remove{justify-self:end}.nvb-control__add-row-button{margin-top:var(--space-3)}@media(max-width:860px){.validator-builder__line{grid-template-columns:1fr}.validator-builder__remove{justify-self:start}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], elementType: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementType", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 class TemplateNameAttribute {
     property = input.required(...(ngDevMode ? [{ debugName: "property" }] : /* istanbul ignore next */ []));
@@ -77644,7 +77918,7 @@ class PropertiesSidebar {
         this.propertyHighlightTimeoutId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PropertiesSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PropertiesSidebar, isStandalone: true, selector: "properties-sidebar", ngImport: i0, template: "<div class=\"properties-sidebar\" data-testid=\"properties-sidebar-root\">\r\n  <div class=\"properties-sidebar__context\">\r\n    <div class=\"properties-sidebar__context-title\">\r\n      {{ getFocusedElementDisplayLabel() }}\r\n    </div>\r\n    @if (getFocusedElementMetaLabel(); as focusedElementMeta) {\r\n      <div class=\"properties-sidebar__context-meta\">\r\n        {{ focusedElementMeta }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"properties-sidebar__search\">\r\n    <builder-search-input\r\n      class=\"properties-sidebar__search-input-wrap\"\r\n      [value]=\"propertySearchTerm()\"\r\n      [placeholder]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [ariaLabel]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [clearAriaLabel]=\"'common.clear' | uiT: 'Clear search'\"\r\n      testId=\"property-search-input\"\r\n      (valueChanged)=\"propertySearchTerm.set($event); syncSelectedCategoryWithVisibleProperties()\"\r\n      (cleared)=\"clearPropertySearch()\"\r\n    />\r\n\r\n    @let propertyMatches = getPropertySearchMatches();\r\n    @if (propertySearchTerm().trim()) {\r\n      <div class=\"properties-sidebar__search-results\" data-testid=\"property-search-results\">\r\n        @if (!propertyMatches.length) {\r\n          <div class=\"properties-sidebar__search-empty\">\r\n            {{ 'properties.searchEmpty' | uiT: 'No matches found.' }}\r\n          </div>\r\n        } @else {\r\n          @for (match of propertyMatches; track match.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"properties-sidebar__search-result\"\r\n              (click)=\"navigateToProperty(match)\"\r\n              [attr.data-testid]=\"'property-search-result-' + match.key\"\r\n            >\r\n              <span class=\"properties-sidebar__search-result-label\">{{ match.label }}</span>\r\n              <span class=\"properties-sidebar__search-result-meta\">\r\n                {{ 'propertyCategory.' + match.categoryName | uiT: match.categoryLabel }}\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"properties-sidebar__groups\">\r\n    @for (propertyCategory of propertyCategories(); track propertyCategory.name) {\r\n      @if (categoryHasVisibleProperties(propertyCategory.name)) {\r\n        <li class=\"properties-sidebar__group\">\r\n          @let isActive = propertyCategory.name === selectedCategory();\r\n          <button\r\n            type=\"button\"\r\n            class=\"properties-sidebar__group-button nvb-button nvb-button--subtle nvb-button--full nvb-button--left nvb-button--ms\"\r\n            [ngClass]=\"{ 'properties-sidebar__group-button--active': isActive }\"\r\n            (click)=\"selectCategory(propertyCategory.name)\"\r\n            [attr.data-testid]=\"'property-category-' + propertyCategory.name\"\r\n          >\r\n            <span\r\n              class=\"material-symbols-outlined properties-sidebar__group-arrow\"\r\n              [ngClass]=\"{ 'properties-sidebar__group-arrow--active': isActive }\"\r\n              >chevron_right</span\r\n            >\r\n            <span>\r\n              {{ 'propertyCategory.' + propertyCategory.name | uiT: propertyCategory.label }}\r\n            </span>\r\n          </button>\r\n          @if (propertyCategory.name === selectedCategory()) {\r\n            @let sections = getSectionsForCategory(propertyCategory.name);\r\n            @let renderVersion = propertyRenderVersion();\r\n            <div class=\"properties-sidebar__table\" [attr.data-render-version]=\"renderVersion\">\r\n              @for (section of sections; track section.name) {\r\n                @if (hasVisibleProperties(section.propertyKeys)) {\r\n                  <section class=\"properties-sidebar__section\">\r\n                    <div class=\"properties-sidebar__section-body\">\r\n                      @for (key of section.propertyKeys; track key) {\r\n                        @let property = properties()[key];\r\n                        @if (!property.hidden && selectedCategory() === property.category) {\r\n                          <div\r\n                            class=\"properties-sidebar__property\"\r\n                            [attr.data-testid]=\"'property-row-' + key\"\r\n                            [attr.data-property-type]=\"property.type\"\r\n                            [attr.data-property-category]=\"property.category\"\r\n                            [class.properties-sidebar__property--highlighted]=\"\r\n                              highlightedPropertyKey() === key\r\n                            \"\r\n                            [attr.tabindex]=\"highlightedPropertyKey() === key ? 0 : -1\"\r\n                          >\r\n                            @switch (property.type) {\r\n                              @case ('logicExpressions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <logic-attribute\r\n                                    [properties]=\"properties()\"\r\n                                    [logicKeys]=\"logicExpressionKeys()\"\r\n                                    (onValueChange)=\"setLogicPropertyValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('text') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [ownerElement]=\"element()\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setTextPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('number') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <number-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('size') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <size-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('padding') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <padding-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('color') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <color-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('checkbox') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--checkbox\"\r\n                                >\r\n                                  <div class=\"properties-sidebar__checkbox-row\">\r\n                                    <label class=\"properties-sidebar__checkbox-option\">\r\n                                      <checkbox-attribute\r\n                                        [property]=\"property\"\r\n                                        (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                      />\r\n                                      <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                    </label>\r\n                                    @if (getPropertyHint(key, property.type); as hint) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"properties-sidebar__hint\"\r\n                                        [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                        [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                        (mouseenter)=\"\r\n                                          setPropertyHintVisible(true, hint, $event, key)\r\n                                        \"\r\n                                        (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                        (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                        (blur)=\"setPropertyHintVisible(false)\"\r\n                                      >\r\n                                        <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                        @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                          <app-tooltip\r\n                                            [text]=\"propertyHintText()\"\r\n                                            [metaText]=\"propertyHintMetaText()\"\r\n                                            [top]=\"propertyHintTop()\"\r\n                                            [left]=\"propertyHintLeft()\"\r\n                                            [interactive]=\"true\"\r\n                                            (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                            (mouseLeft)=\"hidePropertyHint()\"\r\n                                          />\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  </div>\r\n                                </div>\r\n                              }\r\n                              @case ('checklist') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <checklist-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('textarea') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-area-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('htmlCode') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <html-code-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('file') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <file-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('select') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <select-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <source-name-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('templateName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <template-name-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [fieldMap]=\"getTemplateFieldMap(key)\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                    (fieldMapChange)=\"setTemplateFieldMapValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('columnList') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('options') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <option-attribute\r\n                                    [property]=\"property\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('progressFlowItems') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <progress-flow-items-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('selectButtonOptions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <select-button-options-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableRequestParams') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-request-params-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceMapper') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <source-mapper-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('eventActions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <event-actions-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('variantRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <variant-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('validators') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <validators-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableColumns') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableStatusRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-status-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('custom') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <custom-property-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </section>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.properties-sidebar{--ps-bg: color-mix(in oklab, var(--color-neutral-050) 82%, var(--color-neutral-000));--ps-surface: var(--color-neutral-000);--ps-surface-muted: var(--nvb-surface-muted-bg);--ps-border: var(--color-neutral-200);--ps-border-strong: var(--color-neutral-300);--ps-text: var(--color-neutral-900);--ps-muted: var(--color-neutral-600);--ps-faint: var(--color-neutral-500);--ps-active: var(--color-primary-600);--ps-active-bg: color-mix(in oklab, var(--color-primary-050) 64%, var(--color-neutral-000));--nvb-input-height: 32px;--nvb-control-height: 32px;--nvb-input-padding-x: 10px;--nvb-control-padding-x: 10px;--nvb-input-radius: 4px;--nvb-control-radius: 4px;--nvb-button-radius: 4px;--nvb-input-font-size: 12px;--nvb-control-font-size: 12px;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;color:var(--ps-text);background:var(--ps-bg)}.properties-sidebar__context{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__context-title{min-width:0;color:var(--ps-text);font-size:14px;font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__context-meta{max-width:110px;padding:2px 6px;border:1px solid var(--ps-border);border-radius:999px;background:color-mix(in oklab,var(--color-primary-050) 26%,var(--ps-surface));color:var(--ps-muted);font-size:10px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__notice{flex-shrink:0;margin:8px 10px 0;padding:8px 10px;border:1px solid color-mix(in oklab,var(--color-warning-500) 32%,var(--ps-border));border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-warning-500) 7%,var(--ps-surface));color:var(--color-warning-800);font-size:11px;line-height:1.4}.properties-sidebar__search{flex-shrink:0;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__search-input-wrap{position:relative}.properties-sidebar__search-input{border-color:var(--ps-border-strong)}.properties-sidebar__search-clear{color:var(--ps-muted)}.properties-sidebar__search-results{display:grid;gap:2px;max-height:260px;overflow:auto;margin-top:6px;padding:4px;border:1px solid var(--ps-border);border-radius:var(--nvb-menu-radius, var(--nvb-control-radius));background:var(--ps-surface);box-shadow:var(--nvb-shadow-8)}.properties-sidebar__search-empty{padding:10px;color:var(--ps-muted);font-size:12px;text-align:center}.properties-sidebar__search-result{width:100%;display:grid;gap:2px;padding:7px 8px;border:0;border-radius:4px;background:transparent;text-align:left;cursor:pointer;transition:background-color .12s ease}.properties-sidebar__search-result:hover{background:var(--ps-surface-muted)}.properties-sidebar__search-result:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.properties-sidebar__search-result-label{color:var(--ps-text);font-size:12px;font-weight:600}.properties-sidebar__search-result-meta{color:var(--ps-muted);font-size:11px;line-height:1.35}.properties-sidebar__groups{flex:1;min-height:0;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--ps-border-strong) transparent}.properties-sidebar__group{list-style:none;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__group:last-child{border-bottom:0}.properties-sidebar__group-button{width:100%;min-height:36px;padding:0 12px;border:0;border-radius:0;background:var(--ps-surface);color:var(--ps-muted);display:flex;align-items:center;justify-content:flex-start;gap:7px;box-shadow:none;text-align:left;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none;transition:background-color .12s ease,color .12s ease}.properties-sidebar__group-button:hover{background:var(--ps-surface-muted);color:var(--ps-text)}.properties-sidebar__group-button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--ps-active) 60%,transparent)}.properties-sidebar__group-button--active{background:var(--ps-active-bg);color:var(--ps-text)}.properties-sidebar__group-button--active:before{content:\"\";width:2px;align-self:stretch;min-height:18px;margin:8px 1px 8px 0;border-radius:999px;background:var(--ps-active);flex-shrink:0}.properties-sidebar__group-arrow{color:var(--ps-faint);font-size:15px;flex-shrink:0;transition:transform .12s ease}.properties-sidebar__group-arrow--active{transform:rotate(90deg);color:var(--ps-active)}.properties-sidebar__list-items{display:flex;flex-direction:column;gap:0;padding:0}.properties-sidebar__table{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--ps-surface)}.properties-sidebar__section{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;border-top:0;background:var(--ps-surface)}.properties-sidebar__section-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0}.properties-sidebar__property{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 12px;border-left:2px solid transparent;background:var(--ps-surface);transition:border-color .12s ease,background-color .12s ease}.properties-sidebar__property--highlighted{border-left-color:var(--ps-active);background:var(--ps-active-bg);outline:none}.properties-sidebar__label{width:100%;min-width:0;position:relative;z-index:1;justify-self:stretch;display:inline-flex;align-items:center;gap:4px;padding:0;color:var(--ps-muted);font-size:11px;font-weight:600;line-height:1.35}.properties-sidebar__label span{min-width:0;overflow:hidden;text-overflow:ellipsis}.properties-sidebar__label:hover,.properties-sidebar__label:focus-within{z-index:80}.properties-sidebar__attribute{width:100%;min-width:0;grid-column:1;margin-top:0}.properties-sidebar__field--full,.properties-sidebar__field--value{grid-column:1;display:grid;grid-template-columns:1fr}.properties-sidebar__field--checkbox{grid-column:1;margin-top:0}.properties-sidebar__hint{width:14px;height:14px;border:1px solid var(--color-neutral-200);border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;cursor:help;position:relative;transition:background-color .12s ease,color .12s ease}.properties-sidebar__hint:before{content:\"?\";font-size:10px;font-weight:600;line-height:1}.properties-sidebar__hint:hover{background:var(--color-neutral-150, var(--color-neutral-100));border-color:var(--color-neutral-300);color:var(--color-neutral-700)}.properties-sidebar__hint .nvb-icon-svg{display:none}.properties-sidebar__checkbox-row{min-height:var(--nvb-control-height);display:flex;align-items:center;gap:7px}.properties-sidebar__checkbox-option{min-width:0;display:inline-flex;align-items:center;gap:7px;color:var(--ps-text);font-size:12px;font-weight:500;line-height:1.35;cursor:pointer}.properties-sidebar__checkbox-option checkbox-attribute{flex-shrink:0;display:inline-flex;align-items:center}.properties-sidebar__checkbox-option span{min-width:0}\n"], dependencies: [{ kind: "component", type: TextAttribute, selector: "text-attribute", inputs: ["property", "propertyKey", "ownerFocusKey", "ownerElement"], outputs: ["onValueChange"] }, { kind: "component", type: CheckboxAttribute, selector: "checkbox-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: ChecklistAttribute, selector: "checklist-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TextAreaAttribute, selector: "text-area-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SelectAttribute, selector: "select-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "component", type: ColumnsAttribute, selector: "columns-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: NumberAttribute, selector: "number-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: OptionAttribute, selector: "option-attribute", inputs: ["property", "ownerFocusKey"], outputs: ["onValueChange"] }, { kind: "component", type: ProgressFlowItemsAttribute, selector: "progress-flow-items-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SourceMapperAttribute, selector: "source-mapper-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SizeAttribute, selector: "size-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: PaddingAttribute, selector: "padding-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: ColorAttribute, selector: "color-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: EventActionsAttribute, selector: "event-actions-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TableColumnsAttribute, selector: "table-columns-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SourceNameAttribute, selector: "source-name-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TableStatusRulesAttribute, selector: "table-status-rules-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: ValidatorsAttribute, selector: "validators-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TemplateNameAttribute, selector: "template-name-attribute", inputs: ["property", "propertyKey", "fieldMap"], outputs: ["onValueChange", "fieldMapChange"] }, { kind: "component", type: HtmlCodeAttribute, selector: "html-code-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "component", type: FileAttribute, selector: "file-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SelectButtonOptionsAttribute, selector: "select-button-options-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TableRequestParamsAttribute, selector: "table-request-params-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: VariantRulesAttribute, selector: "variant-rules-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: LogicAttribute, selector: "logic-attribute", inputs: ["properties", "logicKeys"], outputs: ["onValueChange"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "metaText", "top", "left", "interactive"], outputs: ["mouseEntered", "mouseLeft"] }, { kind: "component", type: BuilderSearchInput, selector: "builder-search-input", inputs: ["value", "placeholder", "ariaLabel", "testId", "clearAriaLabel", "showSearchIcon"], outputs: ["valueChanged", "cleared"] }, { kind: "component", type: CustomPropertyAttribute, selector: "custom-property-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PropertiesSidebar, isStandalone: true, selector: "properties-sidebar", ngImport: i0, template: "<div class=\"properties-sidebar\" data-testid=\"properties-sidebar-root\">\r\n  <div class=\"properties-sidebar__context\">\r\n    <div class=\"properties-sidebar__context-title\">\r\n      {{ getFocusedElementDisplayLabel() }}\r\n    </div>\r\n    @if (getFocusedElementMetaLabel(); as focusedElementMeta) {\r\n      <div class=\"properties-sidebar__context-meta\">\r\n        {{ focusedElementMeta }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"properties-sidebar__search\">\r\n    <builder-search-input\r\n      class=\"properties-sidebar__search-input-wrap\"\r\n      [value]=\"propertySearchTerm()\"\r\n      [placeholder]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [ariaLabel]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [clearAriaLabel]=\"'common.clear' | uiT: 'Clear search'\"\r\n      testId=\"property-search-input\"\r\n      (valueChanged)=\"propertySearchTerm.set($event); syncSelectedCategoryWithVisibleProperties()\"\r\n      (cleared)=\"clearPropertySearch()\"\r\n    />\r\n\r\n    @let propertyMatches = getPropertySearchMatches();\r\n    @if (propertySearchTerm().trim()) {\r\n      <div class=\"properties-sidebar__search-results\" data-testid=\"property-search-results\">\r\n        @if (!propertyMatches.length) {\r\n          <div class=\"properties-sidebar__search-empty\">\r\n            {{ 'properties.searchEmpty' | uiT: 'No matches found.' }}\r\n          </div>\r\n        } @else {\r\n          @for (match of propertyMatches; track match.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"properties-sidebar__search-result\"\r\n              (click)=\"navigateToProperty(match)\"\r\n              [attr.data-testid]=\"'property-search-result-' + match.key\"\r\n            >\r\n              <span class=\"properties-sidebar__search-result-label\">{{ match.label }}</span>\r\n              <span class=\"properties-sidebar__search-result-meta\">\r\n                {{ 'propertyCategory.' + match.categoryName | uiT: match.categoryLabel }}\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"properties-sidebar__groups\">\r\n    @for (propertyCategory of propertyCategories(); track propertyCategory.name) {\r\n      @if (categoryHasVisibleProperties(propertyCategory.name)) {\r\n        <li class=\"properties-sidebar__group\">\r\n          @let isActive = propertyCategory.name === selectedCategory();\r\n          <button\r\n            type=\"button\"\r\n            class=\"properties-sidebar__group-button nvb-button nvb-button--subtle nvb-button--full nvb-button--left nvb-button--ms\"\r\n            [ngClass]=\"{ 'properties-sidebar__group-button--active': isActive }\"\r\n            (click)=\"selectCategory(propertyCategory.name)\"\r\n            [attr.data-testid]=\"'property-category-' + propertyCategory.name\"\r\n          >\r\n            <span\r\n              class=\"material-symbols-outlined properties-sidebar__group-arrow\"\r\n              [ngClass]=\"{ 'properties-sidebar__group-arrow--active': isActive }\"\r\n              >chevron_right</span\r\n            >\r\n            <span>\r\n              {{ 'propertyCategory.' + propertyCategory.name | uiT: propertyCategory.label }}\r\n            </span>\r\n          </button>\r\n          @if (propertyCategory.name === selectedCategory()) {\r\n            @let sections = getSectionsForCategory(propertyCategory.name);\r\n            @let renderVersion = propertyRenderVersion();\r\n            <div class=\"properties-sidebar__table\" [attr.data-render-version]=\"renderVersion\">\r\n              @for (section of sections; track section.name) {\r\n                @if (hasVisibleProperties(section.propertyKeys)) {\r\n                  <section class=\"properties-sidebar__section\">\r\n                    <div class=\"properties-sidebar__section-body\">\r\n                      @for (key of section.propertyKeys; track key) {\r\n                        @let property = properties()[key];\r\n                        @if (!property.hidden && selectedCategory() === property.category) {\r\n                          <div\r\n                            class=\"properties-sidebar__property\"\r\n                            [attr.data-testid]=\"'property-row-' + key\"\r\n                            [attr.data-property-type]=\"property.type\"\r\n                            [attr.data-property-category]=\"property.category\"\r\n                            [class.properties-sidebar__property--highlighted]=\"\r\n                              highlightedPropertyKey() === key\r\n                            \"\r\n                            [attr.tabindex]=\"highlightedPropertyKey() === key ? 0 : -1\"\r\n                          >\r\n                            @switch (property.type) {\r\n                              @case ('logicExpressions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <logic-attribute\r\n                                    [properties]=\"properties()\"\r\n                                    [logicKeys]=\"logicExpressionKeys()\"\r\n                                    (onValueChange)=\"setLogicPropertyValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('text') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [ownerElement]=\"element()\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setTextPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('number') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <number-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('size') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <size-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('padding') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <padding-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('color') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <color-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('checkbox') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--checkbox\"\r\n                                >\r\n                                  <div class=\"properties-sidebar__checkbox-row\">\r\n                                    <label class=\"properties-sidebar__checkbox-option\">\r\n                                      <checkbox-attribute\r\n                                        [property]=\"property\"\r\n                                        (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                      />\r\n                                      <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                    </label>\r\n                                    @if (getPropertyHint(key, property.type); as hint) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"properties-sidebar__hint\"\r\n                                        [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                        [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                        (mouseenter)=\"\r\n                                          setPropertyHintVisible(true, hint, $event, key)\r\n                                        \"\r\n                                        (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                        (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                        (blur)=\"setPropertyHintVisible(false)\"\r\n                                      >\r\n                                        <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                        @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                          <app-tooltip\r\n                                            [text]=\"propertyHintText()\"\r\n                                            [metaText]=\"propertyHintMetaText()\"\r\n                                            [top]=\"propertyHintTop()\"\r\n                                            [left]=\"propertyHintLeft()\"\r\n                                            [interactive]=\"true\"\r\n                                            (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                            (mouseLeft)=\"hidePropertyHint()\"\r\n                                          />\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  </div>\r\n                                </div>\r\n                              }\r\n                              @case ('checklist') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <checklist-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('textarea') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-area-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('htmlCode') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <html-code-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('file') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <file-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('select') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <select-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <source-name-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('templateName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <template-name-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [fieldMap]=\"getTemplateFieldMap(key)\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                    (fieldMapChange)=\"setTemplateFieldMapValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('columnList') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('options') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <option-attribute\r\n                                    [property]=\"property\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('progressFlowItems') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <progress-flow-items-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('selectButtonOptions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <select-button-options-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableRequestParams') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-request-params-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceMapper') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <source-mapper-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('eventActions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <event-actions-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('variantRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <variant-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('validators') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <validators-attribute\r\n                                    [property]=\"property\"\r\n                                    [elementType]=\"element()?.type ?? ''\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableColumns') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableStatusRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-status-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('custom') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <custom-property-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </section>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.properties-sidebar{--ps-bg: color-mix(in oklab, var(--color-neutral-050) 82%, var(--color-neutral-000));--ps-surface: var(--color-neutral-000);--ps-surface-muted: var(--nvb-surface-muted-bg);--ps-border: var(--color-neutral-200);--ps-border-strong: var(--color-neutral-300);--ps-text: var(--color-neutral-900);--ps-muted: var(--color-neutral-600);--ps-faint: var(--color-neutral-500);--ps-active: var(--color-primary-600);--ps-active-bg: color-mix(in oklab, var(--color-primary-050) 64%, var(--color-neutral-000));--nvb-input-height: 32px;--nvb-control-height: 32px;--nvb-input-padding-x: 10px;--nvb-control-padding-x: 10px;--nvb-input-radius: 4px;--nvb-control-radius: 4px;--nvb-button-radius: 4px;--nvb-input-font-size: 12px;--nvb-control-font-size: 12px;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;color:var(--ps-text);background:var(--ps-bg)}.properties-sidebar__context{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__context-title{min-width:0;color:var(--ps-text);font-size:14px;font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__context-meta{max-width:110px;padding:2px 6px;border:1px solid var(--ps-border);border-radius:999px;background:color-mix(in oklab,var(--color-primary-050) 26%,var(--ps-surface));color:var(--ps-muted);font-size:10px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__notice{flex-shrink:0;margin:8px 10px 0;padding:8px 10px;border:1px solid color-mix(in oklab,var(--color-warning-500) 32%,var(--ps-border));border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-warning-500) 7%,var(--ps-surface));color:var(--color-warning-800);font-size:11px;line-height:1.4}.properties-sidebar__search{flex-shrink:0;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__search-input-wrap{position:relative}.properties-sidebar__search-input{border-color:var(--ps-border-strong)}.properties-sidebar__search-clear{color:var(--ps-muted)}.properties-sidebar__search-results{display:grid;gap:2px;max-height:260px;overflow:auto;margin-top:6px;padding:4px;border:1px solid var(--ps-border);border-radius:var(--nvb-menu-radius, var(--nvb-control-radius));background:var(--ps-surface);box-shadow:var(--nvb-shadow-8)}.properties-sidebar__search-empty{padding:10px;color:var(--ps-muted);font-size:12px;text-align:center}.properties-sidebar__search-result{width:100%;display:grid;gap:2px;padding:7px 8px;border:0;border-radius:4px;background:transparent;text-align:left;cursor:pointer;transition:background-color .12s ease}.properties-sidebar__search-result:hover{background:var(--ps-surface-muted)}.properties-sidebar__search-result:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.properties-sidebar__search-result-label{color:var(--ps-text);font-size:12px;font-weight:600}.properties-sidebar__search-result-meta{color:var(--ps-muted);font-size:11px;line-height:1.35}.properties-sidebar__groups{flex:1;min-height:0;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--ps-border-strong) transparent}.properties-sidebar__group{list-style:none;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__group:last-child{border-bottom:0}.properties-sidebar__group-button{width:100%;min-height:36px;padding:0 12px;border:0;border-radius:0;background:var(--ps-surface);color:var(--ps-muted);display:flex;align-items:center;justify-content:flex-start;gap:7px;box-shadow:none;text-align:left;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none;transition:background-color .12s ease,color .12s ease}.properties-sidebar__group-button:hover{background:var(--ps-surface-muted);color:var(--ps-text)}.properties-sidebar__group-button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--ps-active) 60%,transparent)}.properties-sidebar__group-button--active{background:var(--ps-active-bg);color:var(--ps-text)}.properties-sidebar__group-button--active:before{content:\"\";width:2px;align-self:stretch;min-height:18px;margin:8px 1px 8px 0;border-radius:999px;background:var(--ps-active);flex-shrink:0}.properties-sidebar__group-arrow{color:var(--ps-faint);font-size:15px;flex-shrink:0;transition:transform .12s ease}.properties-sidebar__group-arrow--active{transform:rotate(90deg);color:var(--ps-active)}.properties-sidebar__list-items{display:flex;flex-direction:column;gap:0;padding:0}.properties-sidebar__table{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--ps-surface)}.properties-sidebar__section{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;border-top:0;background:var(--ps-surface)}.properties-sidebar__section-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0}.properties-sidebar__property{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 12px;border-left:2px solid transparent;background:var(--ps-surface);transition:border-color .12s ease,background-color .12s ease}.properties-sidebar__property--highlighted{border-left-color:var(--ps-active);background:var(--ps-active-bg);outline:none}.properties-sidebar__label{width:100%;min-width:0;position:relative;z-index:1;justify-self:stretch;display:inline-flex;align-items:center;gap:4px;padding:0;color:var(--ps-muted);font-size:11px;font-weight:600;line-height:1.35}.properties-sidebar__label span{min-width:0;overflow:hidden;text-overflow:ellipsis}.properties-sidebar__label:hover,.properties-sidebar__label:focus-within{z-index:80}.properties-sidebar__attribute{width:100%;min-width:0;grid-column:1;margin-top:0}.properties-sidebar__field--full,.properties-sidebar__field--value{grid-column:1;display:grid;grid-template-columns:1fr}.properties-sidebar__field--checkbox{grid-column:1;margin-top:0}.properties-sidebar__hint{width:14px;height:14px;border:1px solid var(--color-neutral-200);border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;cursor:help;position:relative;transition:background-color .12s ease,color .12s ease}.properties-sidebar__hint:before{content:\"?\";font-size:10px;font-weight:600;line-height:1}.properties-sidebar__hint:hover{background:var(--color-neutral-150, var(--color-neutral-100));border-color:var(--color-neutral-300);color:var(--color-neutral-700)}.properties-sidebar__hint .nvb-icon-svg{display:none}.properties-sidebar__checkbox-row{min-height:var(--nvb-control-height);display:flex;align-items:center;gap:7px}.properties-sidebar__checkbox-option{min-width:0;display:inline-flex;align-items:center;gap:7px;color:var(--ps-text);font-size:12px;font-weight:500;line-height:1.35;cursor:pointer}.properties-sidebar__checkbox-option checkbox-attribute{flex-shrink:0;display:inline-flex;align-items:center}.properties-sidebar__checkbox-option span{min-width:0}\n"], dependencies: [{ kind: "component", type: TextAttribute, selector: "text-attribute", inputs: ["property", "propertyKey", "ownerFocusKey", "ownerElement"], outputs: ["onValueChange"] }, { kind: "component", type: CheckboxAttribute, selector: "checkbox-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: ChecklistAttribute, selector: "checklist-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TextAreaAttribute, selector: "text-area-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SelectAttribute, selector: "select-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "component", type: ColumnsAttribute, selector: "columns-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: NumberAttribute, selector: "number-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: OptionAttribute, selector: "option-attribute", inputs: ["property", "ownerFocusKey"], outputs: ["onValueChange"] }, { kind: "component", type: ProgressFlowItemsAttribute, selector: "progress-flow-items-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SourceMapperAttribute, selector: "source-mapper-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SizeAttribute, selector: "size-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: PaddingAttribute, selector: "padding-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: ColorAttribute, selector: "color-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: EventActionsAttribute, selector: "event-actions-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TableColumnsAttribute, selector: "table-columns-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SourceNameAttribute, selector: "source-name-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TableStatusRulesAttribute, selector: "table-status-rules-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: ValidatorsAttribute, selector: "validators-attribute", inputs: ["property", "elementType"], outputs: ["onValueChange"] }, { kind: "component", type: TemplateNameAttribute, selector: "template-name-attribute", inputs: ["property", "propertyKey", "fieldMap"], outputs: ["onValueChange", "fieldMapChange"] }, { kind: "component", type: HtmlCodeAttribute, selector: "html-code-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "component", type: FileAttribute, selector: "file-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: SelectButtonOptionsAttribute, selector: "select-button-options-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: TableRequestParamsAttribute, selector: "table-request-params-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: VariantRulesAttribute, selector: "variant-rules-attribute", inputs: ["property"], outputs: ["onValueChange"] }, { kind: "component", type: LogicAttribute, selector: "logic-attribute", inputs: ["properties", "logicKeys"], outputs: ["onValueChange"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "metaText", "top", "left", "interactive"], outputs: ["mouseEntered", "mouseLeft"] }, { kind: "component", type: BuilderSearchInput, selector: "builder-search-input", inputs: ["value", "placeholder", "ariaLabel", "testId", "clearAriaLabel", "showSearchIcon"], outputs: ["valueChanged", "cleared"] }, { kind: "component", type: CustomPropertyAttribute, selector: "custom-property-attribute", inputs: ["property", "propertyKey"], outputs: ["onValueChange"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PropertiesSidebar, decorators: [{
             type: Component,
@@ -77681,7 +77955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         TooltipComponent,
                         BuilderSearchInput,
                         CustomPropertyAttribute,
-                    ], template: "<div class=\"properties-sidebar\" data-testid=\"properties-sidebar-root\">\r\n  <div class=\"properties-sidebar__context\">\r\n    <div class=\"properties-sidebar__context-title\">\r\n      {{ getFocusedElementDisplayLabel() }}\r\n    </div>\r\n    @if (getFocusedElementMetaLabel(); as focusedElementMeta) {\r\n      <div class=\"properties-sidebar__context-meta\">\r\n        {{ focusedElementMeta }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"properties-sidebar__search\">\r\n    <builder-search-input\r\n      class=\"properties-sidebar__search-input-wrap\"\r\n      [value]=\"propertySearchTerm()\"\r\n      [placeholder]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [ariaLabel]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [clearAriaLabel]=\"'common.clear' | uiT: 'Clear search'\"\r\n      testId=\"property-search-input\"\r\n      (valueChanged)=\"propertySearchTerm.set($event); syncSelectedCategoryWithVisibleProperties()\"\r\n      (cleared)=\"clearPropertySearch()\"\r\n    />\r\n\r\n    @let propertyMatches = getPropertySearchMatches();\r\n    @if (propertySearchTerm().trim()) {\r\n      <div class=\"properties-sidebar__search-results\" data-testid=\"property-search-results\">\r\n        @if (!propertyMatches.length) {\r\n          <div class=\"properties-sidebar__search-empty\">\r\n            {{ 'properties.searchEmpty' | uiT: 'No matches found.' }}\r\n          </div>\r\n        } @else {\r\n          @for (match of propertyMatches; track match.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"properties-sidebar__search-result\"\r\n              (click)=\"navigateToProperty(match)\"\r\n              [attr.data-testid]=\"'property-search-result-' + match.key\"\r\n            >\r\n              <span class=\"properties-sidebar__search-result-label\">{{ match.label }}</span>\r\n              <span class=\"properties-sidebar__search-result-meta\">\r\n                {{ 'propertyCategory.' + match.categoryName | uiT: match.categoryLabel }}\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"properties-sidebar__groups\">\r\n    @for (propertyCategory of propertyCategories(); track propertyCategory.name) {\r\n      @if (categoryHasVisibleProperties(propertyCategory.name)) {\r\n        <li class=\"properties-sidebar__group\">\r\n          @let isActive = propertyCategory.name === selectedCategory();\r\n          <button\r\n            type=\"button\"\r\n            class=\"properties-sidebar__group-button nvb-button nvb-button--subtle nvb-button--full nvb-button--left nvb-button--ms\"\r\n            [ngClass]=\"{ 'properties-sidebar__group-button--active': isActive }\"\r\n            (click)=\"selectCategory(propertyCategory.name)\"\r\n            [attr.data-testid]=\"'property-category-' + propertyCategory.name\"\r\n          >\r\n            <span\r\n              class=\"material-symbols-outlined properties-sidebar__group-arrow\"\r\n              [ngClass]=\"{ 'properties-sidebar__group-arrow--active': isActive }\"\r\n              >chevron_right</span\r\n            >\r\n            <span>\r\n              {{ 'propertyCategory.' + propertyCategory.name | uiT: propertyCategory.label }}\r\n            </span>\r\n          </button>\r\n          @if (propertyCategory.name === selectedCategory()) {\r\n            @let sections = getSectionsForCategory(propertyCategory.name);\r\n            @let renderVersion = propertyRenderVersion();\r\n            <div class=\"properties-sidebar__table\" [attr.data-render-version]=\"renderVersion\">\r\n              @for (section of sections; track section.name) {\r\n                @if (hasVisibleProperties(section.propertyKeys)) {\r\n                  <section class=\"properties-sidebar__section\">\r\n                    <div class=\"properties-sidebar__section-body\">\r\n                      @for (key of section.propertyKeys; track key) {\r\n                        @let property = properties()[key];\r\n                        @if (!property.hidden && selectedCategory() === property.category) {\r\n                          <div\r\n                            class=\"properties-sidebar__property\"\r\n                            [attr.data-testid]=\"'property-row-' + key\"\r\n                            [attr.data-property-type]=\"property.type\"\r\n                            [attr.data-property-category]=\"property.category\"\r\n                            [class.properties-sidebar__property--highlighted]=\"\r\n                              highlightedPropertyKey() === key\r\n                            \"\r\n                            [attr.tabindex]=\"highlightedPropertyKey() === key ? 0 : -1\"\r\n                          >\r\n                            @switch (property.type) {\r\n                              @case ('logicExpressions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <logic-attribute\r\n                                    [properties]=\"properties()\"\r\n                                    [logicKeys]=\"logicExpressionKeys()\"\r\n                                    (onValueChange)=\"setLogicPropertyValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('text') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [ownerElement]=\"element()\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setTextPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('number') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <number-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('size') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <size-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('padding') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <padding-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('color') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <color-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('checkbox') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--checkbox\"\r\n                                >\r\n                                  <div class=\"properties-sidebar__checkbox-row\">\r\n                                    <label class=\"properties-sidebar__checkbox-option\">\r\n                                      <checkbox-attribute\r\n                                        [property]=\"property\"\r\n                                        (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                      />\r\n                                      <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                    </label>\r\n                                    @if (getPropertyHint(key, property.type); as hint) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"properties-sidebar__hint\"\r\n                                        [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                        [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                        (mouseenter)=\"\r\n                                          setPropertyHintVisible(true, hint, $event, key)\r\n                                        \"\r\n                                        (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                        (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                        (blur)=\"setPropertyHintVisible(false)\"\r\n                                      >\r\n                                        <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                        @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                          <app-tooltip\r\n                                            [text]=\"propertyHintText()\"\r\n                                            [metaText]=\"propertyHintMetaText()\"\r\n                                            [top]=\"propertyHintTop()\"\r\n                                            [left]=\"propertyHintLeft()\"\r\n                                            [interactive]=\"true\"\r\n                                            (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                            (mouseLeft)=\"hidePropertyHint()\"\r\n                                          />\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  </div>\r\n                                </div>\r\n                              }\r\n                              @case ('checklist') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <checklist-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('textarea') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-area-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('htmlCode') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <html-code-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('file') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <file-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('select') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <select-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <source-name-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('templateName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <template-name-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [fieldMap]=\"getTemplateFieldMap(key)\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                    (fieldMapChange)=\"setTemplateFieldMapValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('columnList') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('options') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <option-attribute\r\n                                    [property]=\"property\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('progressFlowItems') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <progress-flow-items-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('selectButtonOptions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <select-button-options-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableRequestParams') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-request-params-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceMapper') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <source-mapper-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('eventActions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <event-actions-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('variantRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <variant-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('validators') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <validators-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableColumns') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableStatusRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-status-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('custom') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <custom-property-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </section>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.properties-sidebar{--ps-bg: color-mix(in oklab, var(--color-neutral-050) 82%, var(--color-neutral-000));--ps-surface: var(--color-neutral-000);--ps-surface-muted: var(--nvb-surface-muted-bg);--ps-border: var(--color-neutral-200);--ps-border-strong: var(--color-neutral-300);--ps-text: var(--color-neutral-900);--ps-muted: var(--color-neutral-600);--ps-faint: var(--color-neutral-500);--ps-active: var(--color-primary-600);--ps-active-bg: color-mix(in oklab, var(--color-primary-050) 64%, var(--color-neutral-000));--nvb-input-height: 32px;--nvb-control-height: 32px;--nvb-input-padding-x: 10px;--nvb-control-padding-x: 10px;--nvb-input-radius: 4px;--nvb-control-radius: 4px;--nvb-button-radius: 4px;--nvb-input-font-size: 12px;--nvb-control-font-size: 12px;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;color:var(--ps-text);background:var(--ps-bg)}.properties-sidebar__context{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__context-title{min-width:0;color:var(--ps-text);font-size:14px;font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__context-meta{max-width:110px;padding:2px 6px;border:1px solid var(--ps-border);border-radius:999px;background:color-mix(in oklab,var(--color-primary-050) 26%,var(--ps-surface));color:var(--ps-muted);font-size:10px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__notice{flex-shrink:0;margin:8px 10px 0;padding:8px 10px;border:1px solid color-mix(in oklab,var(--color-warning-500) 32%,var(--ps-border));border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-warning-500) 7%,var(--ps-surface));color:var(--color-warning-800);font-size:11px;line-height:1.4}.properties-sidebar__search{flex-shrink:0;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__search-input-wrap{position:relative}.properties-sidebar__search-input{border-color:var(--ps-border-strong)}.properties-sidebar__search-clear{color:var(--ps-muted)}.properties-sidebar__search-results{display:grid;gap:2px;max-height:260px;overflow:auto;margin-top:6px;padding:4px;border:1px solid var(--ps-border);border-radius:var(--nvb-menu-radius, var(--nvb-control-radius));background:var(--ps-surface);box-shadow:var(--nvb-shadow-8)}.properties-sidebar__search-empty{padding:10px;color:var(--ps-muted);font-size:12px;text-align:center}.properties-sidebar__search-result{width:100%;display:grid;gap:2px;padding:7px 8px;border:0;border-radius:4px;background:transparent;text-align:left;cursor:pointer;transition:background-color .12s ease}.properties-sidebar__search-result:hover{background:var(--ps-surface-muted)}.properties-sidebar__search-result:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.properties-sidebar__search-result-label{color:var(--ps-text);font-size:12px;font-weight:600}.properties-sidebar__search-result-meta{color:var(--ps-muted);font-size:11px;line-height:1.35}.properties-sidebar__groups{flex:1;min-height:0;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--ps-border-strong) transparent}.properties-sidebar__group{list-style:none;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__group:last-child{border-bottom:0}.properties-sidebar__group-button{width:100%;min-height:36px;padding:0 12px;border:0;border-radius:0;background:var(--ps-surface);color:var(--ps-muted);display:flex;align-items:center;justify-content:flex-start;gap:7px;box-shadow:none;text-align:left;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none;transition:background-color .12s ease,color .12s ease}.properties-sidebar__group-button:hover{background:var(--ps-surface-muted);color:var(--ps-text)}.properties-sidebar__group-button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--ps-active) 60%,transparent)}.properties-sidebar__group-button--active{background:var(--ps-active-bg);color:var(--ps-text)}.properties-sidebar__group-button--active:before{content:\"\";width:2px;align-self:stretch;min-height:18px;margin:8px 1px 8px 0;border-radius:999px;background:var(--ps-active);flex-shrink:0}.properties-sidebar__group-arrow{color:var(--ps-faint);font-size:15px;flex-shrink:0;transition:transform .12s ease}.properties-sidebar__group-arrow--active{transform:rotate(90deg);color:var(--ps-active)}.properties-sidebar__list-items{display:flex;flex-direction:column;gap:0;padding:0}.properties-sidebar__table{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--ps-surface)}.properties-sidebar__section{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;border-top:0;background:var(--ps-surface)}.properties-sidebar__section-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0}.properties-sidebar__property{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 12px;border-left:2px solid transparent;background:var(--ps-surface);transition:border-color .12s ease,background-color .12s ease}.properties-sidebar__property--highlighted{border-left-color:var(--ps-active);background:var(--ps-active-bg);outline:none}.properties-sidebar__label{width:100%;min-width:0;position:relative;z-index:1;justify-self:stretch;display:inline-flex;align-items:center;gap:4px;padding:0;color:var(--ps-muted);font-size:11px;font-weight:600;line-height:1.35}.properties-sidebar__label span{min-width:0;overflow:hidden;text-overflow:ellipsis}.properties-sidebar__label:hover,.properties-sidebar__label:focus-within{z-index:80}.properties-sidebar__attribute{width:100%;min-width:0;grid-column:1;margin-top:0}.properties-sidebar__field--full,.properties-sidebar__field--value{grid-column:1;display:grid;grid-template-columns:1fr}.properties-sidebar__field--checkbox{grid-column:1;margin-top:0}.properties-sidebar__hint{width:14px;height:14px;border:1px solid var(--color-neutral-200);border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;cursor:help;position:relative;transition:background-color .12s ease,color .12s ease}.properties-sidebar__hint:before{content:\"?\";font-size:10px;font-weight:600;line-height:1}.properties-sidebar__hint:hover{background:var(--color-neutral-150, var(--color-neutral-100));border-color:var(--color-neutral-300);color:var(--color-neutral-700)}.properties-sidebar__hint .nvb-icon-svg{display:none}.properties-sidebar__checkbox-row{min-height:var(--nvb-control-height);display:flex;align-items:center;gap:7px}.properties-sidebar__checkbox-option{min-width:0;display:inline-flex;align-items:center;gap:7px;color:var(--ps-text);font-size:12px;font-weight:500;line-height:1.35;cursor:pointer}.properties-sidebar__checkbox-option checkbox-attribute{flex-shrink:0;display:inline-flex;align-items:center}.properties-sidebar__checkbox-option span{min-width:0}\n"] }]
+                    ], template: "<div class=\"properties-sidebar\" data-testid=\"properties-sidebar-root\">\r\n  <div class=\"properties-sidebar__context\">\r\n    <div class=\"properties-sidebar__context-title\">\r\n      {{ getFocusedElementDisplayLabel() }}\r\n    </div>\r\n    @if (getFocusedElementMetaLabel(); as focusedElementMeta) {\r\n      <div class=\"properties-sidebar__context-meta\">\r\n        {{ focusedElementMeta }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"properties-sidebar__search\">\r\n    <builder-search-input\r\n      class=\"properties-sidebar__search-input-wrap\"\r\n      [value]=\"propertySearchTerm()\"\r\n      [placeholder]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [ariaLabel]=\"'properties.search' | uiT: 'Search properties'\"\r\n      [clearAriaLabel]=\"'common.clear' | uiT: 'Clear search'\"\r\n      testId=\"property-search-input\"\r\n      (valueChanged)=\"propertySearchTerm.set($event); syncSelectedCategoryWithVisibleProperties()\"\r\n      (cleared)=\"clearPropertySearch()\"\r\n    />\r\n\r\n    @let propertyMatches = getPropertySearchMatches();\r\n    @if (propertySearchTerm().trim()) {\r\n      <div class=\"properties-sidebar__search-results\" data-testid=\"property-search-results\">\r\n        @if (!propertyMatches.length) {\r\n          <div class=\"properties-sidebar__search-empty\">\r\n            {{ 'properties.searchEmpty' | uiT: 'No matches found.' }}\r\n          </div>\r\n        } @else {\r\n          @for (match of propertyMatches; track match.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"properties-sidebar__search-result\"\r\n              (click)=\"navigateToProperty(match)\"\r\n              [attr.data-testid]=\"'property-search-result-' + match.key\"\r\n            >\r\n              <span class=\"properties-sidebar__search-result-label\">{{ match.label }}</span>\r\n              <span class=\"properties-sidebar__search-result-meta\">\r\n                {{ 'propertyCategory.' + match.categoryName | uiT: match.categoryLabel }}\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"properties-sidebar__groups\">\r\n    @for (propertyCategory of propertyCategories(); track propertyCategory.name) {\r\n      @if (categoryHasVisibleProperties(propertyCategory.name)) {\r\n        <li class=\"properties-sidebar__group\">\r\n          @let isActive = propertyCategory.name === selectedCategory();\r\n          <button\r\n            type=\"button\"\r\n            class=\"properties-sidebar__group-button nvb-button nvb-button--subtle nvb-button--full nvb-button--left nvb-button--ms\"\r\n            [ngClass]=\"{ 'properties-sidebar__group-button--active': isActive }\"\r\n            (click)=\"selectCategory(propertyCategory.name)\"\r\n            [attr.data-testid]=\"'property-category-' + propertyCategory.name\"\r\n          >\r\n            <span\r\n              class=\"material-symbols-outlined properties-sidebar__group-arrow\"\r\n              [ngClass]=\"{ 'properties-sidebar__group-arrow--active': isActive }\"\r\n              >chevron_right</span\r\n            >\r\n            <span>\r\n              {{ 'propertyCategory.' + propertyCategory.name | uiT: propertyCategory.label }}\r\n            </span>\r\n          </button>\r\n          @if (propertyCategory.name === selectedCategory()) {\r\n            @let sections = getSectionsForCategory(propertyCategory.name);\r\n            @let renderVersion = propertyRenderVersion();\r\n            <div class=\"properties-sidebar__table\" [attr.data-render-version]=\"renderVersion\">\r\n              @for (section of sections; track section.name) {\r\n                @if (hasVisibleProperties(section.propertyKeys)) {\r\n                  <section class=\"properties-sidebar__section\">\r\n                    <div class=\"properties-sidebar__section-body\">\r\n                      @for (key of section.propertyKeys; track key) {\r\n                        @let property = properties()[key];\r\n                        @if (!property.hidden && selectedCategory() === property.category) {\r\n                          <div\r\n                            class=\"properties-sidebar__property\"\r\n                            [attr.data-testid]=\"'property-row-' + key\"\r\n                            [attr.data-property-type]=\"property.type\"\r\n                            [attr.data-property-category]=\"property.category\"\r\n                            [class.properties-sidebar__property--highlighted]=\"\r\n                              highlightedPropertyKey() === key\r\n                            \"\r\n                            [attr.tabindex]=\"highlightedPropertyKey() === key ? 0 : -1\"\r\n                          >\r\n                            @switch (property.type) {\r\n                              @case ('logicExpressions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <logic-attribute\r\n                                    [properties]=\"properties()\"\r\n                                    [logicKeys]=\"logicExpressionKeys()\"\r\n                                    (onValueChange)=\"setLogicPropertyValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('text') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [ownerElement]=\"element()\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setTextPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('number') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <number-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('size') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <size-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('padding') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <padding-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('color') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <color-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('checkbox') {\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--checkbox\"\r\n                                >\r\n                                  <div class=\"properties-sidebar__checkbox-row\">\r\n                                    <label class=\"properties-sidebar__checkbox-option\">\r\n                                      <checkbox-attribute\r\n                                        [property]=\"property\"\r\n                                        (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                      />\r\n                                      <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                    </label>\r\n                                    @if (getPropertyHint(key, property.type); as hint) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"properties-sidebar__hint\"\r\n                                        [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                        [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                        (mouseenter)=\"\r\n                                          setPropertyHintVisible(true, hint, $event, key)\r\n                                        \"\r\n                                        (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                        (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                        (blur)=\"setPropertyHintVisible(false)\"\r\n                                      >\r\n                                        <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                        @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                          <app-tooltip\r\n                                            [text]=\"propertyHintText()\"\r\n                                            [metaText]=\"propertyHintMetaText()\"\r\n                                            [top]=\"propertyHintTop()\"\r\n                                            [left]=\"propertyHintLeft()\"\r\n                                            [interactive]=\"true\"\r\n                                            (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                            (mouseLeft)=\"hidePropertyHint()\"\r\n                                          />\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  </div>\r\n                                </div>\r\n                              }\r\n                              @case ('checklist') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <checklist-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('textarea') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <text-area-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('htmlCode') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <html-code-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('file') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <file-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('select') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <select-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <source-name-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('templateName') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <template-name-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    [fieldMap]=\"getTemplateFieldMap(key)\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                    (fieldMapChange)=\"setTemplateFieldMapValue($event)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('columnList') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('options') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <option-attribute\r\n                                    [property]=\"property\"\r\n                                    [ownerFocusKey]=\"resolveFocusedElementOwnerFocusKey()\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('progressFlowItems') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <progress-flow-items-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('selectButtonOptions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <select-button-options-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableRequestParams') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-request-params-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('sourceMapper') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <source-mapper-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('eventActions') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <event-actions-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('variantRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <variant-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('validators') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <validators-attribute\r\n                                    [property]=\"property\"\r\n                                    [elementType]=\"element()?.type ?? ''\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableColumns') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-columns-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('tableStatusRules') {\r\n                                <div\r\n                                  class=\"properties-sidebar__label properties-sidebar__label--full\"\r\n                                >\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n\r\n                                  @if (getPropertyHint(key, property.type); as hint) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"properties-sidebar__hint\"\r\n                                      [attr.aria-label]=\"'Hint: ' + property.label\"\r\n                                      [attr.aria-expanded]=\"propertyHintVisible()\"\r\n                                      (mouseenter)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (mouseleave)=\"setPropertyHintVisible(false)\"\r\n                                      (focus)=\"setPropertyHintVisible(true, hint, $event, key)\"\r\n                                      (blur)=\"setPropertyHintVisible(false)\"\r\n                                    >\r\n                                      <nvb-icon name=\"help\" ariaLabel=\"Hint\"></nvb-icon>\r\n                                      @if (propertyHintVisible() && propertyHintText() === hint) {\r\n                                        <app-tooltip\r\n                                          [text]=\"propertyHintText()\"\r\n                                          [metaText]=\"propertyHintMetaText()\"\r\n                                          [top]=\"propertyHintTop()\"\r\n                                          [left]=\"propertyHintLeft()\"\r\n                                          [interactive]=\"true\"\r\n                                          (mouseEntered)=\"keepPropertyHintVisible()\"\r\n                                          (mouseLeft)=\"hidePropertyHint()\"\r\n                                        />\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--full\"\r\n                                >\r\n                                  <table-status-rules-attribute\r\n                                    [property]=\"property\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                              @case ('custom') {\r\n                                <div class=\"properties-sidebar__label\">\r\n                                  <span>{{ 'property.' + key | uiT: property.label }}</span>\r\n                                </div>\r\n                                <div\r\n                                  class=\"properties-sidebar__attribute properties-sidebar__field--value\"\r\n                                >\r\n                                  <custom-property-attribute\r\n                                    [property]=\"property\"\r\n                                    [propertyKey]=\"key\"\r\n                                    (onValueChange)=\"setPropertyValue($event, key)\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </section>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.properties-sidebar{--ps-bg: color-mix(in oklab, var(--color-neutral-050) 82%, var(--color-neutral-000));--ps-surface: var(--color-neutral-000);--ps-surface-muted: var(--nvb-surface-muted-bg);--ps-border: var(--color-neutral-200);--ps-border-strong: var(--color-neutral-300);--ps-text: var(--color-neutral-900);--ps-muted: var(--color-neutral-600);--ps-faint: var(--color-neutral-500);--ps-active: var(--color-primary-600);--ps-active-bg: color-mix(in oklab, var(--color-primary-050) 64%, var(--color-neutral-000));--nvb-input-height: 32px;--nvb-control-height: 32px;--nvb-input-padding-x: 10px;--nvb-control-padding-x: 10px;--nvb-input-radius: 4px;--nvb-control-radius: 4px;--nvb-button-radius: 4px;--nvb-input-font-size: 12px;--nvb-control-font-size: 12px;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;color:var(--ps-text);background:var(--ps-bg)}.properties-sidebar__context{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__context-title{min-width:0;color:var(--ps-text);font-size:14px;font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__context-meta{max-width:110px;padding:2px 6px;border:1px solid var(--ps-border);border-radius:999px;background:color-mix(in oklab,var(--color-primary-050) 26%,var(--ps-surface));color:var(--ps-muted);font-size:10px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties-sidebar__notice{flex-shrink:0;margin:8px 10px 0;padding:8px 10px;border:1px solid color-mix(in oklab,var(--color-warning-500) 32%,var(--ps-border));border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-warning-500) 7%,var(--ps-surface));color:var(--color-warning-800);font-size:11px;line-height:1.4}.properties-sidebar__search{flex-shrink:0;padding:10px 12px;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__search-input-wrap{position:relative}.properties-sidebar__search-input{border-color:var(--ps-border-strong)}.properties-sidebar__search-clear{color:var(--ps-muted)}.properties-sidebar__search-results{display:grid;gap:2px;max-height:260px;overflow:auto;margin-top:6px;padding:4px;border:1px solid var(--ps-border);border-radius:var(--nvb-menu-radius, var(--nvb-control-radius));background:var(--ps-surface);box-shadow:var(--nvb-shadow-8)}.properties-sidebar__search-empty{padding:10px;color:var(--ps-muted);font-size:12px;text-align:center}.properties-sidebar__search-result{width:100%;display:grid;gap:2px;padding:7px 8px;border:0;border-radius:4px;background:transparent;text-align:left;cursor:pointer;transition:background-color .12s ease}.properties-sidebar__search-result:hover{background:var(--ps-surface-muted)}.properties-sidebar__search-result:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.properties-sidebar__search-result-label{color:var(--ps-text);font-size:12px;font-weight:600}.properties-sidebar__search-result-meta{color:var(--ps-muted);font-size:11px;line-height:1.35}.properties-sidebar__groups{flex:1;min-height:0;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--ps-border-strong) transparent}.properties-sidebar__group{list-style:none;border-bottom:1px solid var(--ps-border);background:var(--ps-surface)}.properties-sidebar__group:last-child{border-bottom:0}.properties-sidebar__group-button{width:100%;min-height:36px;padding:0 12px;border:0;border-radius:0;background:var(--ps-surface);color:var(--ps-muted);display:flex;align-items:center;justify-content:flex-start;gap:7px;box-shadow:none;text-align:left;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none;transition:background-color .12s ease,color .12s ease}.properties-sidebar__group-button:hover{background:var(--ps-surface-muted);color:var(--ps-text)}.properties-sidebar__group-button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--ps-active) 60%,transparent)}.properties-sidebar__group-button--active{background:var(--ps-active-bg);color:var(--ps-text)}.properties-sidebar__group-button--active:before{content:\"\";width:2px;align-self:stretch;min-height:18px;margin:8px 1px 8px 0;border-radius:999px;background:var(--ps-active);flex-shrink:0}.properties-sidebar__group-arrow{color:var(--ps-faint);font-size:15px;flex-shrink:0;transition:transform .12s ease}.properties-sidebar__group-arrow--active{transform:rotate(90deg);color:var(--ps-active)}.properties-sidebar__list-items{display:flex;flex-direction:column;gap:0;padding:0}.properties-sidebar__table{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--ps-surface)}.properties-sidebar__section{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;border-top:0;background:var(--ps-surface)}.properties-sidebar__section-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0}.properties-sidebar__property{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 12px;border-left:2px solid transparent;background:var(--ps-surface);transition:border-color .12s ease,background-color .12s ease}.properties-sidebar__property--highlighted{border-left-color:var(--ps-active);background:var(--ps-active-bg);outline:none}.properties-sidebar__label{width:100%;min-width:0;position:relative;z-index:1;justify-self:stretch;display:inline-flex;align-items:center;gap:4px;padding:0;color:var(--ps-muted);font-size:11px;font-weight:600;line-height:1.35}.properties-sidebar__label span{min-width:0;overflow:hidden;text-overflow:ellipsis}.properties-sidebar__label:hover,.properties-sidebar__label:focus-within{z-index:80}.properties-sidebar__attribute{width:100%;min-width:0;grid-column:1;margin-top:0}.properties-sidebar__field--full,.properties-sidebar__field--value{grid-column:1;display:grid;grid-template-columns:1fr}.properties-sidebar__field--checkbox{grid-column:1;margin-top:0}.properties-sidebar__hint{width:14px;height:14px;border:1px solid var(--color-neutral-200);border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;cursor:help;position:relative;transition:background-color .12s ease,color .12s ease}.properties-sidebar__hint:before{content:\"?\";font-size:10px;font-weight:600;line-height:1}.properties-sidebar__hint:hover{background:var(--color-neutral-150, var(--color-neutral-100));border-color:var(--color-neutral-300);color:var(--color-neutral-700)}.properties-sidebar__hint .nvb-icon-svg{display:none}.properties-sidebar__checkbox-row{min-height:var(--nvb-control-height);display:flex;align-items:center;gap:7px}.properties-sidebar__checkbox-option{min-width:0;display:inline-flex;align-items:center;gap:7px;color:var(--ps-text);font-size:12px;font-weight:500;line-height:1.35;cursor:pointer}.properties-sidebar__checkbox-option checkbox-attribute{flex-shrink:0;display:inline-flex;align-items:center}.properties-sidebar__checkbox-option span{min-width:0}\n"] }]
         }] });
 
 class NvbJsonObjectCreator {
@@ -80649,13 +80923,22 @@ const LICENSE_VALIDATION_URL = 'https://api.ngxviewbuilder.io';
 // publish build'a. Perpetual fallback modelis: raktas dengia visas versijas,
 // isleistas iki jo expiresAt. Pasibaigus licencijai padengtos versijos veikia
 // amzinai be watermark; velesnes (parsisiustos is npm) — watermark, kol neatsinaujinta.
-const RELEASE_DATE = new Date('2026-07-21T00:00:00Z');
+const RELEASE_DATE = new Date('2026-07-23T00:00:00Z');
 // Oficialus vieso demo puslapio hostname'ai — jiems watermark/license modalai
 // visada islaikomi isjungti, nepriklausomai nuo rakto/serverio busenos. SAUGU:
 // tai musu paciu valdomas domenas, tad integratorius savo produkcinei app'ai
 // negali "pasidaryti" siuo hostname — realus jo vartotojai visada matys jo
 // tikra domena naršykleje, ne demo.ngxviewbuilder.io.
 const OFFICIAL_DEMO_HOSTNAMES = new Set(['demo.ngxviewbuilder.io']);
+// PUBLIC BETA (iki 1.0.0): visas licencijos enforcement isjungtas — jokio
+// watermark, jokiu modalu, nesvarbu ar raktas paduotas, ar ne. Kol produktas
+// dar beta ir komercines licencijos apskritai neparduodamos, VISI vartotojai
+// yra "free", tad rodyti "NO LICENSE" watermark butu klaidinga (nera ka pirkti).
+// Docs pricing.md zada "completely free until 1.0.0" — sis flag'as ta uztikrina.
+// PRIE 1.0.0 RELEASE: perjungti i `false`, kad missing/invalid/outdated vel
+// rodytu watermark + modalus (ir apsvarstyti markMissing() modalo pridejima —
+// zr. licensing memory TODO).
+const BETA_FREE_NO_ENFORCEMENT = true;
 const CACHE_KEY = 'ngx_vb_license_validation_v2';
 const CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
 const MODAL_SHOWN_KEY = 'ngx_vb_license_modal_shown';
@@ -80689,7 +80972,7 @@ class LicenseService {
         }
         this.status.set({
             initialized: true,
-            missing: !this.isOfficialDemoHost(),
+            missing: !this.isEnforcementSuppressed(),
             outdated: false,
             invalid: false,
             expiresAt: null,
@@ -80699,6 +80982,10 @@ class LicenseService {
     isOfficialDemoHost() {
         return typeof window !== 'undefined' && OFFICIAL_DEMO_HOSTNAMES.has(window.location.hostname);
     }
+    /** true kai watermark/modalu enforcement isjungtas: beta metu arba oficialiame demo. */
+    isEnforcementSuppressed() {
+        return BETA_FREE_NO_ENFORCEMENT || this.isOfficialDemoHost();
+    }
     saveModalTimestamp() {
         try {
             localStorage.setItem(MODAL_SHOWN_KEY, Date.now().toString());
@@ -80722,7 +81009,7 @@ class LicenseService {
         this.shouldShowInvalidModal.set(false);
     }
     initialize() {
-        if (this.isOfficialDemoHost()) {
+        if (this.isEnforcementSuppressed()) {
             const payload = this.parseKey(this.licenseKey);
             this.status.set({
                 initialized: true,
@@ -81192,14 +81479,11 @@ class AiChatPanel {
     attachedFiles = signal([], ...(ngDevMode ? [{ debugName: "attachedFiles" }] : /* istanbul ignore next */ []));
     modelDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "modelDropdownOpen" }] : /* istanbul ignore next */ []));
     copiedKey = signal(null, ...(ngDevMode ? [{ debugName: "copiedKey" }] : /* istanbul ignore next */ []));
-    static TEXT_EXTENSIONS = new Set([
-        'txt', 'log', 'md', 'csv', 'json', 'xml', 'yaml', 'yml',
-        'js', 'ts', 'jsx', 'tsx', 'py', 'sql', 'html', 'css', 'scss',
-        'sh', 'bash', 'conf', 'env', 'ini', 'toml', 'lock',
-    ]);
-    static DOCX_EXTENSIONS = new Set(['docx', 'doc']);
-    static MAX_FILE_CHARS = 40_000;
-    static MAX_TOTAL_FILE_CHARS = 100_000;
+    // Files are sent to the backend as raw bytes; the panel does not parse them.
+    // These guards only keep a single WebSocket message from getting unreasonably
+    // large, since the browser still has to encode and send it.
+    static MAX_FILE_BYTES = 10 * 1024 * 1024; // 10 MB per file
+    static MAX_TOTAL_FILE_BYTES = 25 * 1024 * 1024; // 25 MB total
     parsedMessages = computed(() => this.aiChatService.messages().map(msg => ({
         ...msg,
         segments: this.parseSegments(msg.text),
@@ -81253,10 +81537,16 @@ class AiChatPanel {
         this.fileInputRef?.nativeElement.click();
     }
     onFilesSelected(event) {
-        const files = event.target.files;
+        const input = event.target;
+        const files = input.files;
         if (!files?.length)
             return;
         Array.from(files).forEach((file) => {
+            if (file.size > AiChatPanel.MAX_FILE_BYTES) {
+                const mb = AiChatPanel.MAX_FILE_BYTES / (1024 * 1024);
+                this.aiChatService.errorText.set(`"${file.name}" is larger than ${mb} MB and was not attached.`);
+                return;
+            }
             if (file.type.startsWith('image/')) {
                 const reader = new FileReader();
                 reader.onload = () => {
@@ -81267,59 +81557,23 @@ class AiChatPanel {
                 };
                 reader.readAsDataURL(file);
             }
-            else if (this.isTextFile(file)) {
+            else {
+                // Attach the raw file. Nothing is parsed here: the panel is only an
+                // input/output surface, and the backend decides how to read each file.
                 const reader = new FileReader();
                 reader.onload = () => {
-                    const raw = reader.result;
-                    const content = raw.length > AiChatPanel.MAX_FILE_CHARS
-                        ? raw.slice(0, AiChatPanel.MAX_FILE_CHARS) + '\n[...truncated]'
-                        : raw;
-                    this.attachedFiles.update((fs) => [...fs, { name: file.name, content, size: file.size }]);
+                    const result = reader.result; // "data:<mime>;base64,<data>"
+                    const comma = result.indexOf(',');
+                    const data = comma >= 0 ? result.slice(comma + 1) : result;
+                    this.attachedFiles.update((fs) => [
+                        ...fs,
+                        { name: file.name, mimeType: file.type || 'application/octet-stream', size: file.size, data },
+                    ]);
                 };
-                reader.readAsText(file, 'utf-8');
-            }
-            else if (this.isWordFile(file)) {
-                void this.extractWordText(file);
+                reader.readAsDataURL(file);
             }
         });
-        event.target.value = '';
-    }
-    isTextFile(file) {
-        if (file.type.startsWith('text/'))
-            return true;
-        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
-        return AiChatPanel.TEXT_EXTENSIONS.has(ext);
-    }
-    isWordFile(file) {
-        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
-        return AiChatPanel.DOCX_EXTENSIONS.has(ext);
-    }
-    async extractWordText(file) {
-        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
-        if (ext === 'doc') {
-            this.attachedFiles.update((fs) => [
-                ...fs,
-                { name: file.name, content: '[.doc (old Word format) is not supported. Please save the file as .docx or .txt and try again.]', size: file.size },
-            ]);
-            return;
-        }
-        try {
-            const arrayBuffer = await file.arrayBuffer();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const mammoth = await import('mammoth');
-            const result = await mammoth.extractRawText({ arrayBuffer });
-            const raw = result.value ?? '';
-            const content = raw.length > AiChatPanel.MAX_FILE_CHARS
-                ? raw.slice(0, AiChatPanel.MAX_FILE_CHARS) + '\n[...truncated]'
-                : raw;
-            this.attachedFiles.update((fs) => [...fs, { name: file.name, content: content || '[Empty document]', size: file.size }]);
-        }
-        catch {
-            this.attachedFiles.update((fs) => [
-                ...fs,
-                { name: file.name, content: '[Could not extract text from this Word document]', size: file.size },
-            ]);
-        }
+        input.value = '';
     }
     removeAttachment(index) {
         this.attachedImages.update((imgs) => imgs.filter((_, i) => i !== index));
@@ -81331,8 +81585,7 @@ class AiChatPanel {
         window.open(img.dataUrl, '_blank');
     }
     previewFile(file) {
-        const blob = new Blob([file.content], { type: 'text/plain;charset=utf-8' });
-        window.open(URL.createObjectURL(blob), '_blank');
+        window.open(`data:${file.mimeType};base64,${file.data}`, '_blank');
     }
     copyCode(content, mi, si) {
         void navigator.clipboard.writeText(content.trim()).then(() => {
@@ -81396,15 +81649,15 @@ class AiChatPanel {
             payload['images'] = images.map((img) => ({ mediaType: img.mediaType, dataUrl: img.dataUrl }));
         }
         if (files.length > 0) {
-            let totalChars = 0;
+            let totalBytes = 0;
             payload['files'] = files
                 .filter((f) => {
-                if (totalChars >= AiChatPanel.MAX_TOTAL_FILE_CHARS)
+                if (totalBytes + f.size > AiChatPanel.MAX_TOTAL_FILE_BYTES)
                     return false;
-                totalChars += f.content.length;
+                totalBytes += f.size;
                 return true;
             })
-                .map((f) => ({ name: f.name, content: f.content }));
+                .map((f) => ({ name: f.name, mimeType: f.mimeType, size: f.size, data: f.data }));
         }
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify(payload));
@@ -90257,4 +90510,4 @@ class ChoiceModel {
  */
 
 export { ForgeInitializerService as $, APPLICATION_LOCALE_VALUE as A, BadgeModel as B, ChartModel as C, DynamicTextPipe as D, ElementActionService as E, ElementActionButtonToneEnum as F, ElementActionButtonVariantEnum as G, ElementActionDialogOperationEnum as H, ElementActionResponseModeEnum as I, ElementActionSetValueModeEnum as J, ElementActionToastPositionEnum as K, ElementActionToastVariantEnum as L, MarkupSecurityService as M, NvbIcon as N, ElementActionTriggerEnum as O, ElementActionTypeEnum as P, ElementBaseModel as Q, ElementDataSourceUseForEnum as R, StateService as S, ElementExecutionModeEnum as T, UiTranslationService as U, ElementFocusService as V, ElementTypesEnum as W, EmptyBlockModel as X, EventService as Y, ExpressionService as Z, FileUploadModel as _, ElementWrapper as a, TableColumnAlignEnum as a$, HeaderTabEnum as a0, IconModel as a1, IframeModel as a2, ImageModel as a3, LOCALE_CHOICES as a4, ListBoxModel as a5, ListGridModel as a6, MessageCardModel as a7, MultiSelectInputModel as a8, NGX_VIEW_BUILDER_PROJECT_LAYER as a9, NgxViewBuilderRuntime as aA, NgxViewBuilderSaveRequestedSourceEnum as aB, NgxViewBuilderTableSettingsSourceEnum as aC, NgxViewBuilderThemeModeEnum as aD, NgxViewBuilderTriggerEngineService as aE, NgxViewBuilderTriggerEventEnum as aF, NgxViewBuilderValidator as aG, NgxViewBuilderWebsocketMessageModeEnum as aH, NumberInputModel as aI, NumberStepperModel as aJ, PageTitleModel as aK, PanelModel as aL, PhoneInputModel as aM, ProgressBarModel as aN, ProgressFlowModel as aO, PropertyModel as aP, RadioInputModel as aQ, RichTextModel as aR, RuntimeVariableSourceTypeEnum as aS, SelectButtonModel as aT, SelectInputModel as aU, SignaturePadModel as aV, SingleCheckboxModel as aW, SliderModel as aX, SpacerModel as aY, SplitterModel as aZ, StatsCardModel as a_, NGX_VIEW_BUILDER_TEMPLATES_CAPABILITY as aa, NGX_VIEW_BUILDER_TEMPLATES_FEATURE_PACK_ID as ab, NGX_VIEW_BUILDER_UI_TRANSLATIONS as ac, NgxViewBuilder as ad, NgxViewBuilderActionExecutorService as ae, NgxViewBuilderAlignEnum as af, NgxViewBuilderApiService as ag, NgxViewBuilderAutomationActionTypeEnum as ah, NgxViewBuilderAutomationService as ai, NgxViewBuilderBuilder as aj, NgxViewBuilderBuilderTabRenderModeEnum as ak, NgxViewBuilderChromePositionEnum as al, NgxViewBuilderDataSourceTypeEnum as am, NgxViewBuilderDialogCloseReasonEnum as an, NgxViewBuilderExecutionReasonEnum as ao, NgxViewBuilderHeadlessService as ap, NgxViewBuilderInteractionStatusEnum as aq, NgxViewBuilderPageNavigationModeEnum as ar, NgxViewBuilderPreviewModeEnum as as, NgxViewBuilderProcessService as at, NgxViewBuilderRenderModeEnum as au, NgxViewBuilderRenderPhaseEnum as av, NgxViewBuilderRenderer as aw, NgxViewBuilderRuleExecutedBranchEnum as ax, NgxViewBuilderRuleRunModeEnum as ay, NgxViewBuilderRulesEngineService as az, AUTOMATION_BUILDER_TAB_ID as b, TableColumnCellActionsDisplayModeEnum as b0, TableColumnTypeEnum as b1, TableFilterControlTypeEnum as b2, TableFilterOptionsSourceTypeEnum as b3, TableInlineEditStartModeEnum as b4, TableInlineEditorTypeEnum as b5, TableModel as b6, TableRowActionsDropdownButtonStyleEnum as b7, TableStatusToneEnum as b8, TabsModel as b9, TabsProModel as ba, TemplateEngineService as bb, TemplateStorageModeEnum as bc, TemplatesEditor as bd, TextAreaModel as be, TextInputModel as bf, TimePickerModel as bg, ToastModel as bh, ToggleSwitchModel as bi, UiTranslatePipe as bj, ValueChangeTriggerEnum as bk, VideoModel as bl, bridgeNgxViewBuilderApiEvents as bm, createTemplatesLibraryProperty as bn, provideNgxViewBuilderExtensions as bo, provideNgxViewBuilderProjectLayer as bp, provideNgxViewBuilderProjectLayers as bq, provideNgxViewBuilderRuntime as br, provideNgxViewBuilderUiTranslations as bs, AccordionModel as c, ApplicationLocaleService as d, AutocompleteModel as e, AutomationStudio as f, AvatarModel as g, BreadcrumbsModel as h, BuilderModel as i, BuilderPageDisplayModeEnum as j, ButtonModel as k, CheckboxInputModel as l, ChoiceModel as m, ColumnFragmentModeEnum as n, CreatorStructureService as o, CustomHtmlModel as p, DatePickerModel as q, DateRangeModel as r, DialogModel as s, DividerModel as t, DocumentationGenerator as u, DynamicPanelModel as v, DynamicTableColumnModel as w, DynamicTableModel as x, DynamicTableRowColumnModel as y, EN_UI_DICTIONARY as z };
-//# sourceMappingURL=ngx-view-builder-ngx-view-builder-CYvIsFw-.mjs.map
+//# sourceMappingURL=ngx-view-builder-ngx-view-builder-DUoF0Ief.mjs.map