ngx-view-builder 0.1.2 → 0.1.4

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

@@ -2316,7 +2316,7 @@ __decorate([
 ], MultiSelectInputModel.prototype, "setValue", null);
 
 class SingleCheckboxModel extends ElementBaseModel {
-    checkboxLabel = 'Pasirinkta';
+    checkboxLabel = 'Selected';
     value = false;
     dataService;
     constructor(data, dataService) {
@@ -2325,7 +2325,7 @@ class SingleCheckboxModel extends ElementBaseModel {
             Object.assign(this, data);
         }
         this.dataService = dataService;
-        this.checkboxLabel = String(this.checkboxLabel ?? 'Pasirinkta').trim() || 'Pasirinkta';
+        this.checkboxLabel = String(this.checkboxLabel ?? 'Selected').trim() || 'Selected';
         this.value = this.parseBoolean(this.value);
     }
     isChecked() {
@@ -10037,7 +10037,7 @@ class DataSourceService {
             return this.expressionService.runPropertyConditionSync(context, expression);
         }
         catch (error) {
-            throw new Error(`Data source "${source.name}" dataFunction klaida: ${error instanceof Error ? error.message : 'nezinoma klaida'}`);
+            throw new Error(`Data source "${source.name}" dataFunction error: ${error instanceof Error ? error.message : 'unknown error'}`);
         }
     }
     normalizePayloadTemplate(value, sourceName) {
@@ -14192,7 +14192,7 @@ class ValidatorService {
                 return { valid: true, message: '' };
             }
             const valid = String(value ?? '').length >= minLength;
-            return this.createValidationResult(valid, validator.message || `Minimalus ilgis: ${minLength}.`, element);
+            return this.createValidationResult(valid, validator.message || `Minimum length: ${minLength}.`, element);
         }
         if (type === 'maxlength') {
             const maxLength = this.toNumber(validator?.value);
@@ -14200,7 +14200,7 @@ class ValidatorService {
                 return { valid: true, message: '' };
             }
             const valid = String(value ?? '').length <= maxLength;
-            return this.createValidationResult(valid, validator.message || `Maksimalus ilgis: ${maxLength}.`, element);
+            return this.createValidationResult(valid, validator.message || `Maximum length: ${maxLength}.`, element);
         }
         if (type === 'pattern') {
             const pattern = String(validator?.value ?? '').trim();
@@ -14296,7 +14296,7 @@ class ValidatorService {
     }
     resolveRequiredMessage(element) {
         const customMessage = String(element?.requiredMessage ?? '').trim();
-        return this.resolveValidationMessagePlaceholders(customMessage || 'Laukas yra privalomas.', element);
+        return this.resolveValidationMessagePlaceholders(customMessage || 'This field is required.', element);
     }
     createValidationResult(valid, message, element) {
         return {
@@ -27119,7 +27119,7 @@ class NvbSelect {
                 useExisting: forwardRef(() => NvbSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "nativeSelectRef", first: true, predicate: ["nativeSelect"], descendants: true, static: true }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, static: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "optionButtonRefs", predicate: ["optionButton"], descendants: true }], ngImport: i0, template: "<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\r\n  <select #nativeSelect class=\"nvb-select__native\" (change)=\"onNativeChange($event)\">\r\n    <ng-content />\r\n  </select>\r\n\r\n  <button\r\n    #triggerButton\r\n    type=\"button\"\r\n    class=\"nvb-select__trigger\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (click)=\"onTriggerClick($event)\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus($event)\"\r\n    (blur)=\"onTriggerBlur($event)\"\r\n  >\r\n    <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\r\n      {{ selectedLabel() }}\r\n    </span>\r\n    <span class=\"nvb-select__arrow\" aria-hidden=\"true\">&#9662;</span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #menuRef\r\n      class=\"nvb-select__menu\"\r\n      [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\r\n      [id]=\"menuId\"\r\n      role=\"listbox\"\r\n      [style.left.px]=\"menuLeft()\"\r\n      [style.top.px]=\"menuTop()\"\r\n      [style.width.px]=\"menuWidth()\"\r\n      [style.maxHeight.px]=\"menuMaxHeight()\"\r\n    >\r\n      @for (option of options(); track option.value + ':' + $index; let i = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"nvb-select__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [disabled]=\"option.disabled\"\r\n          [attr.aria-selected]=\"option.value === value\"\r\n          [class.nvb-select__option--selected]=\"option.value === value\"\r\n          [class.nvb-select__option--active]=\"i === activeIndex()\"\r\n          (mousedown)=\"onOptionMouseDown(i, $event)\"\r\n          (click)=\"onOptionClick(i, $event)\"\r\n        >\r\n          {{ option.label }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--color-neutral-000);--nvb-select-menu-border: var(--color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--color-neutral-700);--nvb-select-option-hover-bg: var(--color-primary-050);--nvb-select-option-hover-color: var(--color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 14%, var(--color-neutral-000) );--nvb-select-option-selected-color: var(--color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--color-neutral-900) 10%, transparent);--nvb-select-option-radius: 4px;--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.dark){--nvb-select-menu-bg: color-mix(in oklch, var(--color-neutral-900) 82%, var(--color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--color-neutral-600) 70%, var(--color-neutral-700) );--nvb-select-option-color: var(--color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--color-primary-400) 22%, var(--color-neutral-900) );--nvb-select-option-hover-color: var(--color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 30%, var(--color-neutral-900) );--nvb-select-option-selected-color: var(--color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, 4px);background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left;animation:nvb-select-menu-in .14s ease-out}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}@keyframes nvb-select-menu-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.nvb-select__menu--top{animation-name:nvb-select-menu-in-top}@keyframes nvb-select-menu-in-top{0%{opacity:0;transform:translateY(calc(-100% - 6px)) scale(.98)}to{opacity:1;transform:translateY(calc(-100% - 6px)) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-select__menu{animation:none}}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--color-neutral-500) 36%,transparent);border-radius:999px}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--color-neutral-500) 54%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "nativeSelectRef", first: true, predicate: ["nativeSelect"], descendants: true, static: true }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, static: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "optionButtonRefs", predicate: ["optionButton"], descendants: true }], ngImport: i0, template: "<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\r\n  <select #nativeSelect class=\"nvb-select__native\" (change)=\"onNativeChange($event)\">\r\n    <ng-content />\r\n  </select>\r\n\r\n  <button\r\n    #triggerButton\r\n    type=\"button\"\r\n    class=\"nvb-select__trigger\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (click)=\"onTriggerClick($event)\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus($event)\"\r\n    (blur)=\"onTriggerBlur($event)\"\r\n  >\r\n    <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\r\n      {{ selectedLabel() }}\r\n    </span>\r\n    <span class=\"nvb-select__arrow\" aria-hidden=\"true\">&#9662;</span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #menuRef\r\n      class=\"nvb-select__menu\"\r\n      [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\r\n      [id]=\"menuId\"\r\n      role=\"listbox\"\r\n      [style.left.px]=\"menuLeft()\"\r\n      [style.top.px]=\"menuTop()\"\r\n      [style.width.px]=\"menuWidth()\"\r\n      [style.maxHeight.px]=\"menuMaxHeight()\"\r\n    >\r\n      @for (option of options(); track option.value + ':' + $index; let i = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"nvb-select__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [disabled]=\"option.disabled\"\r\n          [attr.aria-selected]=\"option.value === value\"\r\n          [class.nvb-select__option--selected]=\"option.value === value\"\r\n          [class.nvb-select__option--active]=\"i === activeIndex()\"\r\n          (mousedown)=\"onOptionMouseDown(i, $event)\"\r\n          (click)=\"onOptionClick(i, $event)\"\r\n        >\r\n          {{ option.label }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--color-neutral-000);--nvb-select-menu-border: var(--color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--color-neutral-700);--nvb-select-option-hover-bg: var(--color-primary-050);--nvb-select-option-hover-color: var(--color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 14%, var(--color-neutral-000) );--nvb-select-option-selected-color: var(--color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--color-neutral-900) 10%, transparent);--nvb-select-option-radius: 4px;--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.dark){--nvb-select-menu-bg: color-mix(in oklch, var(--color-neutral-900) 82%, var(--color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--color-neutral-600) 70%, var(--color-neutral-700) );--nvb-select-option-color: var(--color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--color-primary-400) 22%, var(--color-neutral-900) );--nvb-select-option-hover-color: var(--color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 30%, var(--color-neutral-900) );--nvb-select-option-selected-color: var(--color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, 4px);background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--color-neutral-500) 36%,transparent);border-radius:999px}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--color-neutral-500) 54%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NvbSelect, decorators: [{
             type: Component,
@@ -27129,7 +27129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => NvbSelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\r\n  <select #nativeSelect class=\"nvb-select__native\" (change)=\"onNativeChange($event)\">\r\n    <ng-content />\r\n  </select>\r\n\r\n  <button\r\n    #triggerButton\r\n    type=\"button\"\r\n    class=\"nvb-select__trigger\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (click)=\"onTriggerClick($event)\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus($event)\"\r\n    (blur)=\"onTriggerBlur($event)\"\r\n  >\r\n    <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\r\n      {{ selectedLabel() }}\r\n    </span>\r\n    <span class=\"nvb-select__arrow\" aria-hidden=\"true\">&#9662;</span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #menuRef\r\n      class=\"nvb-select__menu\"\r\n      [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\r\n      [id]=\"menuId\"\r\n      role=\"listbox\"\r\n      [style.left.px]=\"menuLeft()\"\r\n      [style.top.px]=\"menuTop()\"\r\n      [style.width.px]=\"menuWidth()\"\r\n      [style.maxHeight.px]=\"menuMaxHeight()\"\r\n    >\r\n      @for (option of options(); track option.value + ':' + $index; let i = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"nvb-select__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [disabled]=\"option.disabled\"\r\n          [attr.aria-selected]=\"option.value === value\"\r\n          [class.nvb-select__option--selected]=\"option.value === value\"\r\n          [class.nvb-select__option--active]=\"i === activeIndex()\"\r\n          (mousedown)=\"onOptionMouseDown(i, $event)\"\r\n          (click)=\"onOptionClick(i, $event)\"\r\n        >\r\n          {{ option.label }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--color-neutral-000);--nvb-select-menu-border: var(--color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--color-neutral-700);--nvb-select-option-hover-bg: var(--color-primary-050);--nvb-select-option-hover-color: var(--color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 14%, var(--color-neutral-000) );--nvb-select-option-selected-color: var(--color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--color-neutral-900) 10%, transparent);--nvb-select-option-radius: 4px;--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.dark){--nvb-select-menu-bg: color-mix(in oklch, var(--color-neutral-900) 82%, var(--color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--color-neutral-600) 70%, var(--color-neutral-700) );--nvb-select-option-color: var(--color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--color-primary-400) 22%, var(--color-neutral-900) );--nvb-select-option-hover-color: var(--color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 30%, var(--color-neutral-900) );--nvb-select-option-selected-color: var(--color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, 4px);background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left;animation:nvb-select-menu-in .14s ease-out}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}@keyframes nvb-select-menu-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.nvb-select__menu--top{animation-name:nvb-select-menu-in-top}@keyframes nvb-select-menu-in-top{0%{opacity:0;transform:translateY(calc(-100% - 6px)) scale(.98)}to{opacity:1;transform:translateY(calc(-100% - 6px)) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-select__menu{animation:none}}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--color-neutral-500) 36%,transparent);border-radius:999px}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--color-neutral-500) 54%,transparent)}\n"] }]
+                    ], template: "<div class=\"nvb-select__control\" [class.nvb-select__control--open]=\"isOpen()\">\r\n  <select #nativeSelect class=\"nvb-select__native\" (change)=\"onNativeChange($event)\">\r\n    <ng-content />\r\n  </select>\r\n\r\n  <button\r\n    #triggerButton\r\n    type=\"button\"\r\n    class=\"nvb-select__trigger\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (click)=\"onTriggerClick($event)\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus($event)\"\r\n    (blur)=\"onTriggerBlur($event)\"\r\n  >\r\n    <span class=\"nvb-select__value\" [class.nvb-select__value--placeholder]=\"isPlaceholder()\">\r\n      {{ selectedLabel() }}\r\n    </span>\r\n    <span class=\"nvb-select__arrow\" aria-hidden=\"true\">&#9662;</span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #menuRef\r\n      class=\"nvb-select__menu\"\r\n      [class.nvb-select__menu--top]=\"menuPlacement() === 'top'\"\r\n      [id]=\"menuId\"\r\n      role=\"listbox\"\r\n      [style.left.px]=\"menuLeft()\"\r\n      [style.top.px]=\"menuTop()\"\r\n      [style.width.px]=\"menuWidth()\"\r\n      [style.maxHeight.px]=\"menuMaxHeight()\"\r\n    >\r\n      @for (option of options(); track option.value + ':' + $index; let i = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"nvb-select__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [disabled]=\"option.disabled\"\r\n          [attr.aria-selected]=\"option.value === value\"\r\n          [class.nvb-select__option--selected]=\"option.value === value\"\r\n          [class.nvb-select__option--active]=\"i === activeIndex()\"\r\n          (mousedown)=\"onOptionMouseDown(i, $event)\"\r\n          (click)=\"onOptionClick(i, $event)\"\r\n        >\r\n          {{ option.label }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-block;width:100%;min-width:0;border:0!important;padding:0!important;background:transparent!important;--nvb-select-trigger-border-width: var(--nvb-input-border-width, 1px);--nvb-select-trigger-border-color: var(--nvb-input-border-color, var(--color-neutral-300));--nvb-select-trigger-bg: var(--nvb-input-bg, var(--color-neutral-000));--nvb-select-trigger-color: var(--nvb-input-text-color, var(--color-neutral-700));--nvb-select-trigger-placeholder-color: var( --nvb-input-placeholder-color, var(--color-neutral-500) );--nvb-select-trigger-focus-border-color: var( --nvb-input-focus-border-color, var(--color-primary-500) );--nvb-select-trigger-focus-ring: var( --nvb-focus-ring, 0 0 0 2px color-mix(in oklch, var(--color-primary-500) 28%, transparent) );--nvb-select-trigger-padding-inline-start: 10px;--nvb-select-trigger-padding-inline-end: 30px;--nvb-select-trigger-hover-bg: var(--nvb-select-trigger-bg);--nvb-select-arrow-inset-inline-end: 10px;--nvb-select-menu-bg: var(--color-neutral-000);--nvb-select-menu-border: var(--color-neutral-300);--nvb-select-menu-border-width: 1px;--nvb-select-menu-radius: var(--nvb-input-radius, var(--radius-md));--nvb-select-menu-padding: 4px;--nvb-select-option-color: var(--color-neutral-700);--nvb-select-option-hover-bg: var(--color-primary-050);--nvb-select-option-hover-color: var(--color-primary-700);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 14%, var(--color-neutral-000) );--nvb-select-option-selected-color: var(--color-primary-700);--nvb-select-menu-shadow: 0 12px 24px color-mix(in oklab, var(--color-neutral-900) 10%, transparent);--nvb-select-option-radius: 4px;--nvb-select-option-min-height: 30px;--nvb-select-option-padding-block: 6px;--nvb-select-option-padding-inline: 10px}:host(.nvb-select--fit-content){width:fit-content;max-width:100%}:host-context([data-theme=dark]),:host-context(.nvb-root.dark),:host-context(.nvb-root[data-theme=dark]),:host-context(.dark){--nvb-select-menu-bg: color-mix(in oklch, var(--color-neutral-900) 82%, var(--color-neutral-800));--nvb-select-menu-border: color-mix( in oklch, var(--color-neutral-600) 70%, var(--color-neutral-700) );--nvb-select-option-color: var(--color-neutral-100);--nvb-select-option-hover-bg: color-mix( in oklch, var(--color-primary-400) 22%, var(--color-neutral-900) );--nvb-select-option-hover-color: var(--color-neutral-000);--nvb-select-option-selected-bg: color-mix( in oklch, var(--color-primary-500) 30%, var(--color-neutral-900) );--nvb-select-option-selected-color: var(--color-neutral-000);--nvb-select-menu-shadow: none}.nvb-select__control{position:relative;width:100%}.nvb-select__control--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}:host(.nvb-select--fit-content) .nvb-select__control,:host(.nvb-select--fit-content) .nvb-select__trigger{width:fit-content;min-width:var(--nvb-select-fit-min-width, 84px);max-width:100%}:host(.nvb-select--fit-content) .nvb-select__trigger{padding-inline:8px 24px}.nvb-select__native{position:absolute;inset:0;width:0;height:0;min-height:0;opacity:0;pointer-events:none;appearance:none;border:0;padding:0}.nvb-select__trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--nvb-input-height, 40px);border:var(--nvb-select-trigger-border-width) solid var(--nvb-select-trigger-border-color);border-radius:var(--nvb-input-radius, 4px);background:var(--nvb-select-trigger-bg);color:var(--nvb-select-trigger-color);font:inherit;line-height:1.2;padding:0 var(--nvb-select-trigger-padding-inline-end) 0 var(--nvb-select-trigger-padding-inline-start);text-align:left;display:inline-flex;align-items:center;position:relative;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-select__trigger:hover:not(:disabled){background:var(--nvb-select-trigger-hover-bg)}.nvb-select__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-select__trigger:focus-visible{border-color:var(--nvb-select-trigger-focus-border-color);box-shadow:var(--nvb-select-trigger-focus-ring);outline:0}.nvb-select__value{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-select__value--placeholder{color:var(--nvb-select-trigger-placeholder-color)}.nvb-select__arrow{position:absolute;inset-inline-end:var(--nvb-select-arrow-inset-inline-end);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-neutral-500);font-size:11px;line-height:1;transition:transform .14s ease}.nvb-select__control--open .nvb-select__arrow{transform:translateY(-50%) rotate(180deg)}.nvb-select__menu{position:fixed;inset-inline:auto;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);width:auto;min-width:0;max-height:min(280px,45vh);padding:var(--nvb-select-menu-padding);border-radius:var(--nvb-select-menu-radius);border:var(--nvb-select-menu-border-width) solid var(--nvb-select-menu-border);background:var(--nvb-select-menu-bg);box-shadow:var(--nvb-select-menu-shadow);overflow:auto;transform-origin:top left}:host(.nvb-select--fit-content) .nvb-select__menu,.nvb-select__menu--top{inset-inline:auto}.nvb-select__menu--top{transform:translateY(calc(-100% - 6px));transform-origin:bottom left}:host(.nvb-select--fit-content) .nvb-select__menu{min-width:0;max-width:min(var(--nvb-select-fit-menu-max-width, 320px),100vw - 16px)}.nvb-select__option{width:100%;border:0;border-radius:var(--nvb-select-option-radius);background:transparent;color:var(--nvb-select-option-color);text-align:left;font:inherit;font-size:14px;line-height:1.25;min-height:var(--nvb-select-option-min-height);padding:var(--nvb-select-option-padding-block) var(--nvb-select-option-padding-inline);cursor:pointer}:host(.nvb-select--fit-content) .nvb-select__option{white-space:nowrap}.nvb-select__option:hover:not(:disabled),.nvb-select__option--active:not(:disabled){background:var(--nvb-select-option-hover-bg);color:var(--nvb-select-option-hover-color)}.nvb-select__option--selected:not(:disabled){background:var(--nvb-select-option-selected-bg);color:var(--nvb-select-option-selected-color)}.nvb-select__option:disabled{opacity:.48;cursor:not-allowed}.nvb-select__menu::-webkit-scrollbar{width:9px}.nvb-select__menu::-webkit-scrollbar-track{background:transparent}.nvb-select__menu::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--color-neutral-500) 36%,transparent);border-radius:999px}.nvb-select__menu::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--color-neutral-500) 54%,transparent)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nativeSelectRef: [{
                 type: ViewChild,
                 args: ['nativeSelect', { static: true }]
@@ -29590,11 +29590,11 @@ class AccordionElement {
         return Boolean(model.disabled) || Boolean(model.readOnly);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionElement, isStandalone: true, selector: "accordion-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, rowsTemplate: { classPropertyName: "rowsTemplate", publicName: "rowsTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"nvb-accordion\" data-testid=\"accordion-root\">\r\n  @if (itemTemplateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"itemTemplateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"itemTemplateStyleKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n\r\n  @for (item of visibleItems(); track resolveItemIdentity(item, $index); let itemIndex = $index) {\r\n    <article\r\n      class=\"nvb-accordion__item\"\r\n      [ngClass]=\"{ 'nvb-accordion__item--open': isActiveItem(item, itemIndex) }\"\r\n      [attr.data-testid]=\"'accordion-section-' + resolveItemIdentity(item, itemIndex)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"nvb-accordion__header\"\r\n        [ngClass]=\"{ 'nvb-accordion__header--disabled': isItemDisabled(item) }\"\r\n        [disabled]=\"isItemDisabled(item)\"\r\n        [attr.id]=\"resolveItemButtonId(item, itemIndex)\"\r\n        [attr.aria-expanded]=\"isActiveItem(item, itemIndex)\"\r\n        [attr.aria-controls]=\"resolveItemPanelId(item, itemIndex)\"\r\n        [attr.data-testid]=\"'accordion-item-' + resolveItemIdentity(item, itemIndex)\"\r\n        (click)=\"onItemClick(item, itemIndex, $event)\"\r\n      >\r\n        @if (hasItemTemplate()) {\r\n          <span\r\n            class=\"nvb-accordion__template\"\r\n            [attr.data-nvb-template-scope]=\"itemTemplateScopeId\"\r\n            [innerHTML]=\"renderItemTemplate(item, itemIndex)\"\r\n          ></span>\r\n        } @else {\r\n          <span class=\"nvb-accordion__label\">{{\r\n            resolveItemLabel(item, itemIndex) | dynamicText: model()\r\n          }}</span>\r\n        }\r\n        <span class=\"material-symbols-outlined nvb-accordion__arrow\">expand_more</span>\r\n      </button>\r\n\r\n      @if (isActiveItem(item, itemIndex)) {\r\n        <section\r\n          class=\"nvb-accordion__content\"\r\n          [class.nvb-accordion__content--empty]=\"!hasContentRows()\"\r\n          [attr.id]=\"resolveItemPanelId(item, itemIndex)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"resolveItemButtonId(item, itemIndex)\"\r\n          [attr.data-testid]=\"'accordion-content-' + resolveItemIdentity(item, itemIndex)\"\r\n        >\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            } @else {\r\n              <ng-content></ng-content>\r\n            }\r\n          } @else if (isEditor()) {\r\n            <div\r\n              class=\"nvb-accordion__placeholder\"\r\n              [class.nvb-accordion__placeholder--overlay]=\"hoveredElementName === model().name\"\r\n              [attr.data-testid]=\"'accordion-empty-builder-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">note_stack_add</span>\r\n              <p>{{ 'accordion.emptyBuilder' | uiT: 'Drop content into accordion section' }}</p>\r\n\r\n              @if (dropOverlay()) {\r\n                <div\r\n                  class=\"nvb-accordion__drop-overlay\"\r\n                  (dragover)=\"onDragOver($event)\"\r\n                  (dragleave)=\"onDragLeave($event)\"\r\n                  (drop)=\"onDrop($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n          } @else if (item.value) {\r\n            <div\r\n              class=\"nvb-accordion__item-description\"\r\n              [attr.data-testid]=\"'accordion-description-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              {{ item.value | dynamicText: model() }}\r\n            </div>\r\n          }\r\n        </section>\r\n      }\r\n    </article>\r\n  } @empty {\r\n    <div class=\"nvb-accordion__empty\">\r\n      {{ 'accordion.noItems' | uiT: 'No accordion items configured' }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.nvb-accordion{width:100%;border:1px solid color-mix(in oklab,var(--color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius);overflow:hidden;background:var(--color-neutral-000);box-shadow:var(--nvb-card-shadow)}.nvb-accordion__item+.nvb-accordion__item{border-top:1px solid color-mix(in oklab,var(--color-neutral-200) 88%,transparent)}.nvb-accordion__header{width:100%;border:none;background:linear-gradient(180deg,color-mix(in oklab,var(--color-neutral-050) 84%,var(--color-neutral-000)) 0%,var(--color-neutral-000) 100%);color:var(--color-neutral-700);min-height:var(--nvb-tablist-height, 40px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease}.nvb-accordion__header:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 58%,transparent)}.nvb-accordion__header:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-neutral-000))}.nvb-accordion__header--disabled,.nvb-accordion__header:disabled{opacity:.5;cursor:not-allowed}.nvb-accordion__label{min-width:0;word-break:break-word}.nvb-accordion__template{display:block;min-width:0;flex:1 1 auto}.nvb-accordion__arrow{font-size:18px;color:var(--color-neutral-500);transition:transform .16s ease;flex-shrink:0}.nvb-accordion__item--open .nvb-accordion__arrow{transform:rotate(180deg);color:var(--color-primary-600)}.nvb-accordion__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-neutral-000));animation:nvb-accordion-content-in .18s ease-out;transform-origin:top}.nvb-accordion__content--empty{padding:0}@keyframes nvb-accordion-content-in{0%{opacity:0;transform:scaleY(.96) translateY(-4px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.nvb-accordion__content,.nvb-accordion__arrow{animation:none;transition:none}}.nvb-accordion__item-description{padding:0;color:var(--color-neutral-700);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.nvb-accordion__placeholder{position:relative;min-height:120px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);margin:10px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-accordion__placeholder span{font-size:30px}.nvb-accordion__placeholder p{margin:0;font-size:13px}.nvb-accordion__placeholder--overlay{background:var(--color-primary-050)}.nvb-accordion__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-accordion__empty{padding:14px 12px;color:var(--color-neutral-500);font-size:12px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionElement, isStandalone: true, selector: "accordion-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, rowsTemplate: { classPropertyName: "rowsTemplate", publicName: "rowsTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"nvb-accordion\" data-testid=\"accordion-root\">\r\n  @if (itemTemplateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"itemTemplateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"itemTemplateStyleKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n\r\n  @for (item of visibleItems(); track resolveItemIdentity(item, $index); let itemIndex = $index) {\r\n    <article\r\n      class=\"nvb-accordion__item\"\r\n      [ngClass]=\"{ 'nvb-accordion__item--open': isActiveItem(item, itemIndex) }\"\r\n      [attr.data-testid]=\"'accordion-section-' + resolveItemIdentity(item, itemIndex)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"nvb-accordion__header\"\r\n        [ngClass]=\"{ 'nvb-accordion__header--disabled': isItemDisabled(item) }\"\r\n        [disabled]=\"isItemDisabled(item)\"\r\n        [attr.id]=\"resolveItemButtonId(item, itemIndex)\"\r\n        [attr.aria-expanded]=\"isActiveItem(item, itemIndex)\"\r\n        [attr.aria-controls]=\"resolveItemPanelId(item, itemIndex)\"\r\n        [attr.data-testid]=\"'accordion-item-' + resolveItemIdentity(item, itemIndex)\"\r\n        (click)=\"onItemClick(item, itemIndex, $event)\"\r\n      >\r\n        @if (hasItemTemplate()) {\r\n          <span\r\n            class=\"nvb-accordion__template\"\r\n            [attr.data-nvb-template-scope]=\"itemTemplateScopeId\"\r\n            [innerHTML]=\"renderItemTemplate(item, itemIndex)\"\r\n          ></span>\r\n        } @else {\r\n          <span class=\"nvb-accordion__label\">{{\r\n            resolveItemLabel(item, itemIndex) | dynamicText: model()\r\n          }}</span>\r\n        }\r\n        <span class=\"material-symbols-outlined nvb-accordion__arrow\">expand_more</span>\r\n      </button>\r\n\r\n      @if (isActiveItem(item, itemIndex)) {\r\n        <section\r\n          class=\"nvb-accordion__content\"\r\n          [class.nvb-accordion__content--empty]=\"!hasContentRows()\"\r\n          [attr.id]=\"resolveItemPanelId(item, itemIndex)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"resolveItemButtonId(item, itemIndex)\"\r\n          [attr.data-testid]=\"'accordion-content-' + resolveItemIdentity(item, itemIndex)\"\r\n        >\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            } @else {\r\n              <ng-content></ng-content>\r\n            }\r\n          } @else if (isEditor()) {\r\n            <div\r\n              class=\"nvb-accordion__placeholder\"\r\n              [class.nvb-accordion__placeholder--overlay]=\"hoveredElementName === model().name\"\r\n              [attr.data-testid]=\"'accordion-empty-builder-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">note_stack_add</span>\r\n              <p>{{ 'accordion.emptyBuilder' | uiT: 'Drop content into accordion section' }}</p>\r\n\r\n              @if (dropOverlay()) {\r\n                <div\r\n                  class=\"nvb-accordion__drop-overlay\"\r\n                  (dragover)=\"onDragOver($event)\"\r\n                  (dragleave)=\"onDragLeave($event)\"\r\n                  (drop)=\"onDrop($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n          } @else if (item.value) {\r\n            <div\r\n              class=\"nvb-accordion__item-description\"\r\n              [attr.data-testid]=\"'accordion-description-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              {{ item.value | dynamicText: model() }}\r\n            </div>\r\n          }\r\n        </section>\r\n      }\r\n    </article>\r\n  } @empty {\r\n    <div class=\"nvb-accordion__empty\">\r\n      {{ 'accordion.noItems' | uiT: 'No accordion items configured' }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.nvb-accordion{width:100%;border:1px solid color-mix(in oklab,var(--color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius);overflow:hidden;background:var(--color-neutral-000);box-shadow:var(--nvb-card-shadow)}.nvb-accordion__item+.nvb-accordion__item{border-top:1px solid color-mix(in oklab,var(--color-neutral-200) 88%,transparent)}.nvb-accordion__header{width:100%;border:none;background:linear-gradient(180deg,color-mix(in oklab,var(--color-neutral-050) 84%,var(--color-neutral-000)) 0%,var(--color-neutral-000) 100%);color:var(--color-neutral-700);min-height:var(--nvb-tablist-height, 40px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease}.nvb-accordion__header:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 58%,transparent)}.nvb-accordion__header:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-neutral-000))}.nvb-accordion__header--disabled,.nvb-accordion__header:disabled{opacity:.5;cursor:not-allowed}.nvb-accordion__label{min-width:0;word-break:break-word}.nvb-accordion__template{display:block;min-width:0;flex:1 1 auto}.nvb-accordion__arrow{font-size:18px;color:var(--color-neutral-500);transition:transform .16s ease;flex-shrink:0}.nvb-accordion__item--open .nvb-accordion__arrow{transform:rotate(180deg);color:var(--color-primary-600)}.nvb-accordion__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-neutral-000));transform-origin:top}.nvb-accordion__content--empty{padding:0}@media(prefers-reduced-motion:reduce){.nvb-accordion__arrow{transition:none}}.nvb-accordion__item-description{padding:0;color:var(--color-neutral-700);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.nvb-accordion__placeholder{position:relative;min-height:120px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);margin:10px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-accordion__placeholder span{font-size:30px}.nvb-accordion__placeholder p{margin:0;font-size:13px}.nvb-accordion__placeholder--overlay{background:var(--color-primary-050)}.nvb-accordion__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-accordion__empty{padding:14px 12px;color:var(--color-neutral-500);font-size:12px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionElement, decorators: [{
             type: Component,
-            args: [{ selector: 'accordion-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgTemplateOutlet, DynamicTextPipe, UiTranslatePipe, NvbStyleOutlet], template: "<div class=\"nvb-accordion\" data-testid=\"accordion-root\">\r\n  @if (itemTemplateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"itemTemplateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"itemTemplateStyleKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n\r\n  @for (item of visibleItems(); track resolveItemIdentity(item, $index); let itemIndex = $index) {\r\n    <article\r\n      class=\"nvb-accordion__item\"\r\n      [ngClass]=\"{ 'nvb-accordion__item--open': isActiveItem(item, itemIndex) }\"\r\n      [attr.data-testid]=\"'accordion-section-' + resolveItemIdentity(item, itemIndex)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"nvb-accordion__header\"\r\n        [ngClass]=\"{ 'nvb-accordion__header--disabled': isItemDisabled(item) }\"\r\n        [disabled]=\"isItemDisabled(item)\"\r\n        [attr.id]=\"resolveItemButtonId(item, itemIndex)\"\r\n        [attr.aria-expanded]=\"isActiveItem(item, itemIndex)\"\r\n        [attr.aria-controls]=\"resolveItemPanelId(item, itemIndex)\"\r\n        [attr.data-testid]=\"'accordion-item-' + resolveItemIdentity(item, itemIndex)\"\r\n        (click)=\"onItemClick(item, itemIndex, $event)\"\r\n      >\r\n        @if (hasItemTemplate()) {\r\n          <span\r\n            class=\"nvb-accordion__template\"\r\n            [attr.data-nvb-template-scope]=\"itemTemplateScopeId\"\r\n            [innerHTML]=\"renderItemTemplate(item, itemIndex)\"\r\n          ></span>\r\n        } @else {\r\n          <span class=\"nvb-accordion__label\">{{\r\n            resolveItemLabel(item, itemIndex) | dynamicText: model()\r\n          }}</span>\r\n        }\r\n        <span class=\"material-symbols-outlined nvb-accordion__arrow\">expand_more</span>\r\n      </button>\r\n\r\n      @if (isActiveItem(item, itemIndex)) {\r\n        <section\r\n          class=\"nvb-accordion__content\"\r\n          [class.nvb-accordion__content--empty]=\"!hasContentRows()\"\r\n          [attr.id]=\"resolveItemPanelId(item, itemIndex)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"resolveItemButtonId(item, itemIndex)\"\r\n          [attr.data-testid]=\"'accordion-content-' + resolveItemIdentity(item, itemIndex)\"\r\n        >\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            } @else {\r\n              <ng-content></ng-content>\r\n            }\r\n          } @else if (isEditor()) {\r\n            <div\r\n              class=\"nvb-accordion__placeholder\"\r\n              [class.nvb-accordion__placeholder--overlay]=\"hoveredElementName === model().name\"\r\n              [attr.data-testid]=\"'accordion-empty-builder-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">note_stack_add</span>\r\n              <p>{{ 'accordion.emptyBuilder' | uiT: 'Drop content into accordion section' }}</p>\r\n\r\n              @if (dropOverlay()) {\r\n                <div\r\n                  class=\"nvb-accordion__drop-overlay\"\r\n                  (dragover)=\"onDragOver($event)\"\r\n                  (dragleave)=\"onDragLeave($event)\"\r\n                  (drop)=\"onDrop($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n          } @else if (item.value) {\r\n            <div\r\n              class=\"nvb-accordion__item-description\"\r\n              [attr.data-testid]=\"'accordion-description-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              {{ item.value | dynamicText: model() }}\r\n            </div>\r\n          }\r\n        </section>\r\n      }\r\n    </article>\r\n  } @empty {\r\n    <div class=\"nvb-accordion__empty\">\r\n      {{ 'accordion.noItems' | uiT: 'No accordion items configured' }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.nvb-accordion{width:100%;border:1px solid color-mix(in oklab,var(--color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius);overflow:hidden;background:var(--color-neutral-000);box-shadow:var(--nvb-card-shadow)}.nvb-accordion__item+.nvb-accordion__item{border-top:1px solid color-mix(in oklab,var(--color-neutral-200) 88%,transparent)}.nvb-accordion__header{width:100%;border:none;background:linear-gradient(180deg,color-mix(in oklab,var(--color-neutral-050) 84%,var(--color-neutral-000)) 0%,var(--color-neutral-000) 100%);color:var(--color-neutral-700);min-height:var(--nvb-tablist-height, 40px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease}.nvb-accordion__header:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 58%,transparent)}.nvb-accordion__header:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-neutral-000))}.nvb-accordion__header--disabled,.nvb-accordion__header:disabled{opacity:.5;cursor:not-allowed}.nvb-accordion__label{min-width:0;word-break:break-word}.nvb-accordion__template{display:block;min-width:0;flex:1 1 auto}.nvb-accordion__arrow{font-size:18px;color:var(--color-neutral-500);transition:transform .16s ease;flex-shrink:0}.nvb-accordion__item--open .nvb-accordion__arrow{transform:rotate(180deg);color:var(--color-primary-600)}.nvb-accordion__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-neutral-000));animation:nvb-accordion-content-in .18s ease-out;transform-origin:top}.nvb-accordion__content--empty{padding:0}@keyframes nvb-accordion-content-in{0%{opacity:0;transform:scaleY(.96) translateY(-4px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.nvb-accordion__content,.nvb-accordion__arrow{animation:none;transition:none}}.nvb-accordion__item-description{padding:0;color:var(--color-neutral-700);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.nvb-accordion__placeholder{position:relative;min-height:120px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);margin:10px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-accordion__placeholder span{font-size:30px}.nvb-accordion__placeholder p{margin:0;font-size:13px}.nvb-accordion__placeholder--overlay{background:var(--color-primary-050)}.nvb-accordion__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-accordion__empty{padding:14px 12px;color:var(--color-neutral-500);font-size:12px}\n"] }]
+            args: [{ selector: 'accordion-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgTemplateOutlet, DynamicTextPipe, UiTranslatePipe, NvbStyleOutlet], template: "<div class=\"nvb-accordion\" data-testid=\"accordion-root\">\r\n  @if (itemTemplateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"itemTemplateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"itemTemplateStyleKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n\r\n  @for (item of visibleItems(); track resolveItemIdentity(item, $index); let itemIndex = $index) {\r\n    <article\r\n      class=\"nvb-accordion__item\"\r\n      [ngClass]=\"{ 'nvb-accordion__item--open': isActiveItem(item, itemIndex) }\"\r\n      [attr.data-testid]=\"'accordion-section-' + resolveItemIdentity(item, itemIndex)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"nvb-accordion__header\"\r\n        [ngClass]=\"{ 'nvb-accordion__header--disabled': isItemDisabled(item) }\"\r\n        [disabled]=\"isItemDisabled(item)\"\r\n        [attr.id]=\"resolveItemButtonId(item, itemIndex)\"\r\n        [attr.aria-expanded]=\"isActiveItem(item, itemIndex)\"\r\n        [attr.aria-controls]=\"resolveItemPanelId(item, itemIndex)\"\r\n        [attr.data-testid]=\"'accordion-item-' + resolveItemIdentity(item, itemIndex)\"\r\n        (click)=\"onItemClick(item, itemIndex, $event)\"\r\n      >\r\n        @if (hasItemTemplate()) {\r\n          <span\r\n            class=\"nvb-accordion__template\"\r\n            [attr.data-nvb-template-scope]=\"itemTemplateScopeId\"\r\n            [innerHTML]=\"renderItemTemplate(item, itemIndex)\"\r\n          ></span>\r\n        } @else {\r\n          <span class=\"nvb-accordion__label\">{{\r\n            resolveItemLabel(item, itemIndex) | dynamicText: model()\r\n          }}</span>\r\n        }\r\n        <span class=\"material-symbols-outlined nvb-accordion__arrow\">expand_more</span>\r\n      </button>\r\n\r\n      @if (isActiveItem(item, itemIndex)) {\r\n        <section\r\n          class=\"nvb-accordion__content\"\r\n          [class.nvb-accordion__content--empty]=\"!hasContentRows()\"\r\n          [attr.id]=\"resolveItemPanelId(item, itemIndex)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"resolveItemButtonId(item, itemIndex)\"\r\n          [attr.data-testid]=\"'accordion-content-' + resolveItemIdentity(item, itemIndex)\"\r\n        >\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            } @else {\r\n              <ng-content></ng-content>\r\n            }\r\n          } @else if (isEditor()) {\r\n            <div\r\n              class=\"nvb-accordion__placeholder\"\r\n              [class.nvb-accordion__placeholder--overlay]=\"hoveredElementName === model().name\"\r\n              [attr.data-testid]=\"'accordion-empty-builder-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">note_stack_add</span>\r\n              <p>{{ 'accordion.emptyBuilder' | uiT: 'Drop content into accordion section' }}</p>\r\n\r\n              @if (dropOverlay()) {\r\n                <div\r\n                  class=\"nvb-accordion__drop-overlay\"\r\n                  (dragover)=\"onDragOver($event)\"\r\n                  (dragleave)=\"onDragLeave($event)\"\r\n                  (drop)=\"onDrop($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n          } @else if (item.value) {\r\n            <div\r\n              class=\"nvb-accordion__item-description\"\r\n              [attr.data-testid]=\"'accordion-description-' + resolveItemIdentity(item, itemIndex)\"\r\n            >\r\n              {{ item.value | dynamicText: model() }}\r\n            </div>\r\n          }\r\n        </section>\r\n      }\r\n    </article>\r\n  } @empty {\r\n    <div class=\"nvb-accordion__empty\">\r\n      {{ 'accordion.noItems' | uiT: 'No accordion items configured' }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.nvb-accordion{width:100%;border:1px solid color-mix(in oklab,var(--color-neutral-300) 88%,transparent);border-radius:var(--nvb-card-radius);overflow:hidden;background:var(--color-neutral-000);box-shadow:var(--nvb-card-shadow)}.nvb-accordion__item+.nvb-accordion__item{border-top:1px solid color-mix(in oklab,var(--color-neutral-200) 88%,transparent)}.nvb-accordion__header{width:100%;border:none;background:linear-gradient(180deg,color-mix(in oklab,var(--color-neutral-050) 84%,var(--color-neutral-000)) 0%,var(--color-neutral-000) 100%);color:var(--color-neutral-700);min-height:var(--nvb-tablist-height, 40px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease}.nvb-accordion__header:focus-visible{outline:0;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 58%,transparent)}.nvb-accordion__header:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-neutral-000))}.nvb-accordion__header--disabled,.nvb-accordion__header:disabled{opacity:.5;cursor:not-allowed}.nvb-accordion__label{min-width:0;word-break:break-word}.nvb-accordion__template{display:block;min-width:0;flex:1 1 auto}.nvb-accordion__arrow{font-size:18px;color:var(--color-neutral-500);transition:transform .16s ease;flex-shrink:0}.nvb-accordion__item--open .nvb-accordion__arrow{transform:rotate(180deg);color:var(--color-primary-600)}.nvb-accordion__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-neutral-000));transform-origin:top}.nvb-accordion__content--empty{padding:0}@media(prefers-reduced-motion:reduce){.nvb-accordion__arrow{transition:none}}.nvb-accordion__item-description{padding:0;color:var(--color-neutral-700);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.nvb-accordion__placeholder{position:relative;min-height:120px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);margin:10px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.nvb-accordion__placeholder span{font-size:30px}.nvb-accordion__placeholder p{margin:0;font-size:13px}.nvb-accordion__placeholder--overlay{background:var(--color-primary-050)}.nvb-accordion__drop-overlay{position:absolute;inset:0;z-index:20}.nvb-accordion__empty{padding:14px 12px;color:var(--color-neutral-500);font-size:12px}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], rowsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsTemplate", required: false }] }], templateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContext", required: false }] }], isMobileView: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileView", required: false }] }] } });
 
 var accordionElement = /*#__PURE__*/Object.freeze({
@@ -30180,11 +30180,11 @@ class TimePickerElement {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimePickerElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TimePickerElement, isStandalone: true, selector: "time-picker-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscapePressed()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" } }, ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-time-picker\"\r\n    [class.nvb-time-picker--open]=\"isOpen()\"\r\n    [class.nvb-time-picker--disabled]=\"model().disabled\"\r\n    [class.nvb-time-picker--readonly]=\"model().readOnly\"\r\n  >\r\n    <!-- Trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-time-picker__trigger\"\r\n      [id]=\"fieldWrapper.controlId()\"\r\n      [disabled]=\"model().disabled\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.data-testid]=\"model().name ? 'time-picker-' + model().name : 'time-picker'\"\r\n      (click)=\"toggle($event)\"\r\n    >\r\n      @if (displayTime()) {\r\n        <span class=\"nvb-time-picker__value\">{{ displayTime() }}</span>\r\n      } @else {\r\n        <span class=\"nvb-time-picker__placeholder\">{{ model().placeholder || 'Select time' }}</span>\r\n      }\r\n      <span class=\"material-symbols-outlined nvb-time-picker__icon\" aria-hidden=\"true\">schedule</span>\r\n    </button>\r\n\r\n    <!-- Panel -->\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-time-picker__panel\"\r\n        role=\"listbox\"\r\n        [attr.aria-label]=\"'Select time'\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <!-- Hours -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Hours\">\r\n          @for (h of hourOptions(); track h) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"isHourSelected(h)\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"isHourSelected(h)\"\r\n              (click)=\"selectHour(h, $event)\"\r\n            >{{ pad(h) }}</button>\r\n          }\r\n        </div>\r\n\r\n        <span class=\"nvb-time-picker__sep\" aria-hidden=\"true\">:</span>\r\n\r\n        <!-- Minutes -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Minutes\">\r\n          @for (m of minuteOptions(); track m) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"selectedMinute() === m\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"selectedMinute() === m\"\r\n              (click)=\"selectMinute(m, $event)\"\r\n            >{{ pad(m) }}</button>\r\n          }\r\n        </div>\r\n\r\n        @if (format() === '12h') {\r\n          <div class=\"nvb-time-picker__col nvb-time-picker__col--ampm\" role=\"group\" aria-label=\"AM or PM\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'AM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'AM'\"\r\n              (click)=\"selectAmPm('AM', $event)\"\r\n            >AM</button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'PM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'PM'\"\r\n              (click)=\"selectAmPm('PM', $event)\"\r\n            >PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.nvb-time-picker{position:relative;display:block;width:100%}.nvb-time-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:var(--nvb-control-height, 40px);padding:0 12px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);cursor:pointer;font-size:14px;font-family:inherit;text-align:left;transition:border-color .16s ease,box-shadow .16s ease}.nvb-time-picker__trigger:hover:not(:disabled){border-color:var(--color-neutral-400)}.nvb-time-picker__trigger:focus-visible{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker__trigger:disabled{opacity:.6;cursor:not-allowed;background:var(--color-neutral-050, #f8fafc)}.nvb-time-picker--open .nvb-time-picker__trigger{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker--readonly .nvb-time-picker__trigger{background:var(--color-neutral-050, #f8fafc);cursor:default}.nvb-time-picker__value{flex:1;color:var(--color-neutral-900);font-variant-numeric:tabular-nums}.nvb-time-picker__placeholder{flex:1;color:var(--color-neutral-400)}.nvb-time-picker__icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0;transition:color .14s ease}.nvb-time-picker--open .nvb-time-picker__icon,.nvb-time-picker__trigger:hover:not(:disabled) .nvb-time-picker__icon{color:var(--color-primary-500)}.nvb-time-picker__panel{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);display:flex;align-items:flex-start;gap:2px;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));box-shadow:0 4px 6px -1px color-mix(in oklab,var(--color-neutral-900) 8%,transparent),0 8px 20px -4px color-mix(in oklab,var(--color-neutral-900) 10%,transparent);padding:6px 4px;min-width:160px;transform-origin:top left;animation:nvb-time-picker-panel-in .14s ease-out}@keyframes nvb-time-picker-panel-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.nvb-time-picker__col{display:flex;flex-direction:column;overflow-y:auto;max-height:208px;flex:1;gap:1px;scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.nvb-time-picker__col::-webkit-scrollbar{width:4px}.nvb-time-picker__col::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:4px}.nvb-time-picker__col--ampm{flex:0 0 52px;border-left:1px solid var(--color-neutral-100);padding-left:2px}.nvb-time-picker__sep{font-size:16px;font-weight:700;color:var(--color-neutral-400);align-self:flex-start;padding:7px 1px 0;flex-shrink:0}.nvb-time-picker__opt{padding:6px 8px;border:0;border-radius:6px;background:transparent;cursor:pointer;font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums;color:var(--color-neutral-700);text-align:center;white-space:nowrap;flex-shrink:0;transition:background-color .1s ease,color .1s ease}.nvb-time-picker__opt:hover{background:color-mix(in oklab,var(--color-neutral-100) 90%,transparent)}.nvb-time-picker__opt--selected{background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.nvb-time-picker__opt--selected:hover{background:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-surface-mix-target, white))}\n"], dependencies: [{ kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TimePickerElement, isStandalone: true, selector: "time-picker-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscapePressed()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" } }, ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-time-picker\"\r\n    [class.nvb-time-picker--open]=\"isOpen()\"\r\n    [class.nvb-time-picker--disabled]=\"model().disabled\"\r\n    [class.nvb-time-picker--readonly]=\"model().readOnly\"\r\n  >\r\n    <!-- Trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-time-picker__trigger\"\r\n      [id]=\"fieldWrapper.controlId()\"\r\n      [disabled]=\"model().disabled\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.data-testid]=\"model().name ? 'time-picker-' + model().name : 'time-picker'\"\r\n      (click)=\"toggle($event)\"\r\n    >\r\n      @if (displayTime()) {\r\n        <span class=\"nvb-time-picker__value\">{{ displayTime() }}</span>\r\n      } @else {\r\n        <span class=\"nvb-time-picker__placeholder\">{{ model().placeholder || 'Select time' }}</span>\r\n      }\r\n      <span class=\"material-symbols-outlined nvb-time-picker__icon\" aria-hidden=\"true\">schedule</span>\r\n    </button>\r\n\r\n    <!-- Panel -->\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-time-picker__panel\"\r\n        role=\"listbox\"\r\n        [attr.aria-label]=\"'Select time'\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <!-- Hours -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Hours\">\r\n          @for (h of hourOptions(); track h) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"isHourSelected(h)\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"isHourSelected(h)\"\r\n              (click)=\"selectHour(h, $event)\"\r\n            >{{ pad(h) }}</button>\r\n          }\r\n        </div>\r\n\r\n        <span class=\"nvb-time-picker__sep\" aria-hidden=\"true\">:</span>\r\n\r\n        <!-- Minutes -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Minutes\">\r\n          @for (m of minuteOptions(); track m) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"selectedMinute() === m\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"selectedMinute() === m\"\r\n              (click)=\"selectMinute(m, $event)\"\r\n            >{{ pad(m) }}</button>\r\n          }\r\n        </div>\r\n\r\n        @if (format() === '12h') {\r\n          <div class=\"nvb-time-picker__col nvb-time-picker__col--ampm\" role=\"group\" aria-label=\"AM or PM\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'AM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'AM'\"\r\n              (click)=\"selectAmPm('AM', $event)\"\r\n            >AM</button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'PM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'PM'\"\r\n              (click)=\"selectAmPm('PM', $event)\"\r\n            >PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.nvb-time-picker{position:relative;display:block;width:100%}.nvb-time-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:var(--nvb-control-height, 40px);padding:0 12px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);cursor:pointer;font-size:14px;font-family:inherit;text-align:left;transition:border-color .16s ease,box-shadow .16s ease}.nvb-time-picker__trigger:hover:not(:disabled){border-color:var(--color-neutral-400)}.nvb-time-picker__trigger:focus-visible{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker__trigger:disabled{opacity:.6;cursor:not-allowed;background:var(--color-neutral-050, #f8fafc)}.nvb-time-picker--open .nvb-time-picker__trigger{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker--readonly .nvb-time-picker__trigger{background:var(--color-neutral-050, #f8fafc);cursor:default}.nvb-time-picker__value{flex:1;color:var(--color-neutral-900);font-variant-numeric:tabular-nums}.nvb-time-picker__placeholder{flex:1;color:var(--color-neutral-400)}.nvb-time-picker__icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0;transition:color .14s ease}.nvb-time-picker--open .nvb-time-picker__icon,.nvb-time-picker__trigger:hover:not(:disabled) .nvb-time-picker__icon{color:var(--color-primary-500)}.nvb-time-picker__panel{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);display:flex;align-items:flex-start;gap:2px;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));box-shadow:0 4px 6px -1px color-mix(in oklab,var(--color-neutral-900) 8%,transparent),0 8px 20px -4px color-mix(in oklab,var(--color-neutral-900) 10%,transparent);padding:6px 4px;min-width:160px;transform-origin:top left}.nvb-time-picker__col{display:flex;flex-direction:column;overflow-y:auto;max-height:208px;flex:1;gap:1px;scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.nvb-time-picker__col::-webkit-scrollbar{width:4px}.nvb-time-picker__col::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:4px}.nvb-time-picker__col--ampm{flex:0 0 52px;border-left:1px solid var(--color-neutral-100);padding-left:2px}.nvb-time-picker__sep{font-size:16px;font-weight:700;color:var(--color-neutral-400);align-self:flex-start;padding:7px 1px 0;flex-shrink:0}.nvb-time-picker__opt{padding:6px 8px;border:0;border-radius:6px;background:transparent;cursor:pointer;font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums;color:var(--color-neutral-700);text-align:center;white-space:nowrap;flex-shrink:0;transition:background-color .1s ease,color .1s ease}.nvb-time-picker__opt:hover{background:color-mix(in oklab,var(--color-neutral-100) 90%,transparent)}.nvb-time-picker__opt--selected{background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.nvb-time-picker__opt--selected:hover{background:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-surface-mix-target, white))}\n"], dependencies: [{ kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimePickerElement, decorators: [{
             type: Component,
-            args: [{ selector: 'time-picker-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ElementWrapper], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-time-picker\"\r\n    [class.nvb-time-picker--open]=\"isOpen()\"\r\n    [class.nvb-time-picker--disabled]=\"model().disabled\"\r\n    [class.nvb-time-picker--readonly]=\"model().readOnly\"\r\n  >\r\n    <!-- Trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-time-picker__trigger\"\r\n      [id]=\"fieldWrapper.controlId()\"\r\n      [disabled]=\"model().disabled\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.data-testid]=\"model().name ? 'time-picker-' + model().name : 'time-picker'\"\r\n      (click)=\"toggle($event)\"\r\n    >\r\n      @if (displayTime()) {\r\n        <span class=\"nvb-time-picker__value\">{{ displayTime() }}</span>\r\n      } @else {\r\n        <span class=\"nvb-time-picker__placeholder\">{{ model().placeholder || 'Select time' }}</span>\r\n      }\r\n      <span class=\"material-symbols-outlined nvb-time-picker__icon\" aria-hidden=\"true\">schedule</span>\r\n    </button>\r\n\r\n    <!-- Panel -->\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-time-picker__panel\"\r\n        role=\"listbox\"\r\n        [attr.aria-label]=\"'Select time'\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <!-- Hours -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Hours\">\r\n          @for (h of hourOptions(); track h) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"isHourSelected(h)\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"isHourSelected(h)\"\r\n              (click)=\"selectHour(h, $event)\"\r\n            >{{ pad(h) }}</button>\r\n          }\r\n        </div>\r\n\r\n        <span class=\"nvb-time-picker__sep\" aria-hidden=\"true\">:</span>\r\n\r\n        <!-- Minutes -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Minutes\">\r\n          @for (m of minuteOptions(); track m) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"selectedMinute() === m\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"selectedMinute() === m\"\r\n              (click)=\"selectMinute(m, $event)\"\r\n            >{{ pad(m) }}</button>\r\n          }\r\n        </div>\r\n\r\n        @if (format() === '12h') {\r\n          <div class=\"nvb-time-picker__col nvb-time-picker__col--ampm\" role=\"group\" aria-label=\"AM or PM\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'AM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'AM'\"\r\n              (click)=\"selectAmPm('AM', $event)\"\r\n            >AM</button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'PM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'PM'\"\r\n              (click)=\"selectAmPm('PM', $event)\"\r\n            >PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.nvb-time-picker{position:relative;display:block;width:100%}.nvb-time-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:var(--nvb-control-height, 40px);padding:0 12px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);cursor:pointer;font-size:14px;font-family:inherit;text-align:left;transition:border-color .16s ease,box-shadow .16s ease}.nvb-time-picker__trigger:hover:not(:disabled){border-color:var(--color-neutral-400)}.nvb-time-picker__trigger:focus-visible{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker__trigger:disabled{opacity:.6;cursor:not-allowed;background:var(--color-neutral-050, #f8fafc)}.nvb-time-picker--open .nvb-time-picker__trigger{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker--readonly .nvb-time-picker__trigger{background:var(--color-neutral-050, #f8fafc);cursor:default}.nvb-time-picker__value{flex:1;color:var(--color-neutral-900);font-variant-numeric:tabular-nums}.nvb-time-picker__placeholder{flex:1;color:var(--color-neutral-400)}.nvb-time-picker__icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0;transition:color .14s ease}.nvb-time-picker--open .nvb-time-picker__icon,.nvb-time-picker__trigger:hover:not(:disabled) .nvb-time-picker__icon{color:var(--color-primary-500)}.nvb-time-picker__panel{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);display:flex;align-items:flex-start;gap:2px;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));box-shadow:0 4px 6px -1px color-mix(in oklab,var(--color-neutral-900) 8%,transparent),0 8px 20px -4px color-mix(in oklab,var(--color-neutral-900) 10%,transparent);padding:6px 4px;min-width:160px;transform-origin:top left;animation:nvb-time-picker-panel-in .14s ease-out}@keyframes nvb-time-picker-panel-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.nvb-time-picker__col{display:flex;flex-direction:column;overflow-y:auto;max-height:208px;flex:1;gap:1px;scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.nvb-time-picker__col::-webkit-scrollbar{width:4px}.nvb-time-picker__col::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:4px}.nvb-time-picker__col--ampm{flex:0 0 52px;border-left:1px solid var(--color-neutral-100);padding-left:2px}.nvb-time-picker__sep{font-size:16px;font-weight:700;color:var(--color-neutral-400);align-self:flex-start;padding:7px 1px 0;flex-shrink:0}.nvb-time-picker__opt{padding:6px 8px;border:0;border-radius:6px;background:transparent;cursor:pointer;font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums;color:var(--color-neutral-700);text-align:center;white-space:nowrap;flex-shrink:0;transition:background-color .1s ease,color .1s ease}.nvb-time-picker__opt:hover{background:color-mix(in oklab,var(--color-neutral-100) 90%,transparent)}.nvb-time-picker__opt--selected{background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.nvb-time-picker__opt--selected:hover{background:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-surface-mix-target, white))}\n"] }]
+            args: [{ selector: 'time-picker-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ElementWrapper], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-time-picker\"\r\n    [class.nvb-time-picker--open]=\"isOpen()\"\r\n    [class.nvb-time-picker--disabled]=\"model().disabled\"\r\n    [class.nvb-time-picker--readonly]=\"model().readOnly\"\r\n  >\r\n    <!-- Trigger -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-time-picker__trigger\"\r\n      [id]=\"fieldWrapper.controlId()\"\r\n      [disabled]=\"model().disabled\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.labelId()\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.data-testid]=\"model().name ? 'time-picker-' + model().name : 'time-picker'\"\r\n      (click)=\"toggle($event)\"\r\n    >\r\n      @if (displayTime()) {\r\n        <span class=\"nvb-time-picker__value\">{{ displayTime() }}</span>\r\n      } @else {\r\n        <span class=\"nvb-time-picker__placeholder\">{{ model().placeholder || 'Select time' }}</span>\r\n      }\r\n      <span class=\"material-symbols-outlined nvb-time-picker__icon\" aria-hidden=\"true\">schedule</span>\r\n    </button>\r\n\r\n    <!-- Panel -->\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-time-picker__panel\"\r\n        role=\"listbox\"\r\n        [attr.aria-label]=\"'Select time'\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <!-- Hours -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Hours\">\r\n          @for (h of hourOptions(); track h) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"isHourSelected(h)\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"isHourSelected(h)\"\r\n              (click)=\"selectHour(h, $event)\"\r\n            >{{ pad(h) }}</button>\r\n          }\r\n        </div>\r\n\r\n        <span class=\"nvb-time-picker__sep\" aria-hidden=\"true\">:</span>\r\n\r\n        <!-- Minutes -->\r\n        <div class=\"nvb-time-picker__col\" role=\"group\" aria-label=\"Minutes\">\r\n          @for (m of minuteOptions(); track m) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"selectedMinute() === m\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"selectedMinute() === m\"\r\n              (click)=\"selectMinute(m, $event)\"\r\n            >{{ pad(m) }}</button>\r\n          }\r\n        </div>\r\n\r\n        @if (format() === '12h') {\r\n          <div class=\"nvb-time-picker__col nvb-time-picker__col--ampm\" role=\"group\" aria-label=\"AM or PM\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'AM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'AM'\"\r\n              (click)=\"selectAmPm('AM', $event)\"\r\n            >AM</button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-time-picker__opt\"\r\n              [class.nvb-time-picker__opt--selected]=\"ampm() === 'PM'\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"ampm() === 'PM'\"\r\n              (click)=\"selectAmPm('PM', $event)\"\r\n            >PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.nvb-time-picker{position:relative;display:block;width:100%}.nvb-time-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:var(--nvb-control-height, 40px);padding:0 12px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);cursor:pointer;font-size:14px;font-family:inherit;text-align:left;transition:border-color .16s ease,box-shadow .16s ease}.nvb-time-picker__trigger:hover:not(:disabled){border-color:var(--color-neutral-400)}.nvb-time-picker__trigger:focus-visible{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker__trigger:disabled{opacity:.6;cursor:not-allowed;background:var(--color-neutral-050, #f8fafc)}.nvb-time-picker--open .nvb-time-picker__trigger{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring, 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent))}.nvb-time-picker--readonly .nvb-time-picker__trigger{background:var(--color-neutral-050, #f8fafc);cursor:default}.nvb-time-picker__value{flex:1;color:var(--color-neutral-900);font-variant-numeric:tabular-nums}.nvb-time-picker__placeholder{flex:1;color:var(--color-neutral-400)}.nvb-time-picker__icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0;transition:color .14s ease}.nvb-time-picker--open .nvb-time-picker__icon,.nvb-time-picker__trigger:hover:not(:disabled) .nvb-time-picker__icon{color:var(--color-primary-500)}.nvb-time-picker__panel{position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);display:flex;align-items:flex-start;gap:2px;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));box-shadow:0 4px 6px -1px color-mix(in oklab,var(--color-neutral-900) 8%,transparent),0 8px 20px -4px color-mix(in oklab,var(--color-neutral-900) 10%,transparent);padding:6px 4px;min-width:160px;transform-origin:top left}.nvb-time-picker__col{display:flex;flex-direction:column;overflow-y:auto;max-height:208px;flex:1;gap:1px;scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.nvb-time-picker__col::-webkit-scrollbar{width:4px}.nvb-time-picker__col::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:4px}.nvb-time-picker__col--ampm{flex:0 0 52px;border-left:1px solid var(--color-neutral-100);padding-left:2px}.nvb-time-picker__sep{font-size:16px;font-weight:700;color:var(--color-neutral-400);align-self:flex-start;padding:7px 1px 0;flex-shrink:0}.nvb-time-picker__opt{padding:6px 8px;border:0;border-radius:6px;background:transparent;cursor:pointer;font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums;color:var(--color-neutral-700);text-align:center;white-space:nowrap;flex-shrink:0;transition:background-color .1s ease,color .1s ease}.nvb-time-picker__opt:hover{background:color-mix(in oklab,var(--color-neutral-100) 90%,transparent)}.nvb-time-picker__opt--selected{background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.nvb-time-picker__opt--selected:hover{background:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-surface-mix-target, white))}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], onDocumentMouseDown: [{
                 type: HostListener,
                 args: ['document:mousedown', ['$event']]
@@ -31113,11 +31113,11 @@ class AutocompleteElement {
         return Math.max(0, Math.min(2000, Math.floor(parsed)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteElement, isStandalone: true, selector: "autocomplete-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<element-wrapper [model]=\"model()\">\r\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"nvb-autocomplete\"\r\n      [class.nvb-autocomplete--open]=\"isOpen()\"\r\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\r\n      #container\r\n      data-testid=\"autocomplete-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div class=\"nvb-autocomplete__control\">\r\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\r\n        <input\r\n          [id]=\"model().name\"\r\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n          class=\"nvb-autocomplete__input\"\r\n          type=\"text\"\r\n          [placeholder]=\"\r\n            dataSourceLoading()\r\n              ? ('autocomplete.loading' | uiT: 'Loading...')\r\n              : model().placeholder\r\n              ? (model().placeholder | dynamicText: model())\r\n              : ('autocomplete.placeholder' | uiT: 'Search...')\r\n          \"\r\n          [disabled]=\"model().disabled || dataSourceLoading()\"\r\n          [readOnly]=\"model().readOnly\"\r\n          [value]=\"inputValue()\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInput($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n        />\r\n\r\n        @if (dataSourceLoading()) {\r\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n        } @else if (inputValue()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-autocomplete__clear\"\r\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            (mousedown)=\"clear($event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div class=\"nvb-autocomplete__dropdown\" data-testid=\"autocomplete-element-options\">\r\n          @if (isLoading()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\r\n            </div>\r\n          }\r\n\r\n          @for (\r\n            option of suggestionOptions();\r\n            track trackSuggestion(option, $index);\r\n            let i = $index\r\n          ) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-autocomplete__option\"\r\n              [ngClass]=\"{\r\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\r\n                'nvb-autocomplete__option--selected': isSelected(option),\r\n              }\"\r\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\r\n            >\r\n              {{ option.label }}\r\n            </button>\r\n          }\r\n\r\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--color-neutral-500);width:24px;height:24px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px;animation:nvb-autocomplete-dropdown-in .14s ease-out}@keyframes nvb-autocomplete-dropdown-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-autocomplete__dropdown{animation:none}}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--color-primary-050);color:var(--color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteElement, isStandalone: true, selector: "autocomplete-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<element-wrapper [model]=\"model()\">\r\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"nvb-autocomplete\"\r\n      [class.nvb-autocomplete--open]=\"isOpen()\"\r\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\r\n      #container\r\n      data-testid=\"autocomplete-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div class=\"nvb-autocomplete__control\">\r\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\r\n        <input\r\n          [id]=\"model().name\"\r\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n          class=\"nvb-autocomplete__input\"\r\n          type=\"text\"\r\n          [placeholder]=\"\r\n            dataSourceLoading()\r\n              ? ('autocomplete.loading' | uiT: 'Loading...')\r\n              : model().placeholder\r\n              ? (model().placeholder | dynamicText: model())\r\n              : ('autocomplete.placeholder' | uiT: 'Search...')\r\n          \"\r\n          [disabled]=\"model().disabled || dataSourceLoading()\"\r\n          [readOnly]=\"model().readOnly\"\r\n          [value]=\"inputValue()\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInput($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n        />\r\n\r\n        @if (dataSourceLoading()) {\r\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n        } @else if (inputValue()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-autocomplete__clear\"\r\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            (mousedown)=\"clear($event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div class=\"nvb-autocomplete__dropdown\" data-testid=\"autocomplete-element-options\">\r\n          @if (isLoading()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\r\n            </div>\r\n          }\r\n\r\n          @for (\r\n            option of suggestionOptions();\r\n            track trackSuggestion(option, $index);\r\n            let i = $index\r\n          ) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-autocomplete__option\"\r\n              [ngClass]=\"{\r\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\r\n                'nvb-autocomplete__option--selected': isSelected(option),\r\n              }\"\r\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\r\n            >\r\n              {{ option.label }}\r\n            </button>\r\n          }\r\n\r\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--color-neutral-500);width:24px;height:24px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--color-primary-050);color:var(--color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteElement, decorators: [{
             type: Component,
-            args: [{ selector: 'autocomplete-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ElementWrapper, DynamicTextPipe, NgClass, UiTranslatePipe], template: "<element-wrapper [model]=\"model()\">\r\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"nvb-autocomplete\"\r\n      [class.nvb-autocomplete--open]=\"isOpen()\"\r\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\r\n      #container\r\n      data-testid=\"autocomplete-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div class=\"nvb-autocomplete__control\">\r\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\r\n        <input\r\n          [id]=\"model().name\"\r\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n          class=\"nvb-autocomplete__input\"\r\n          type=\"text\"\r\n          [placeholder]=\"\r\n            dataSourceLoading()\r\n              ? ('autocomplete.loading' | uiT: 'Loading...')\r\n              : model().placeholder\r\n              ? (model().placeholder | dynamicText: model())\r\n              : ('autocomplete.placeholder' | uiT: 'Search...')\r\n          \"\r\n          [disabled]=\"model().disabled || dataSourceLoading()\"\r\n          [readOnly]=\"model().readOnly\"\r\n          [value]=\"inputValue()\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInput($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n        />\r\n\r\n        @if (dataSourceLoading()) {\r\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n        } @else if (inputValue()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-autocomplete__clear\"\r\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            (mousedown)=\"clear($event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div class=\"nvb-autocomplete__dropdown\" data-testid=\"autocomplete-element-options\">\r\n          @if (isLoading()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\r\n            </div>\r\n          }\r\n\r\n          @for (\r\n            option of suggestionOptions();\r\n            track trackSuggestion(option, $index);\r\n            let i = $index\r\n          ) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-autocomplete__option\"\r\n              [ngClass]=\"{\r\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\r\n                'nvb-autocomplete__option--selected': isSelected(option),\r\n              }\"\r\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\r\n            >\r\n              {{ option.label }}\r\n            </button>\r\n          }\r\n\r\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--color-neutral-500);width:24px;height:24px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px;animation:nvb-autocomplete-dropdown-in .14s ease-out}@keyframes nvb-autocomplete-dropdown-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-autocomplete__dropdown{animation:none}}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--color-primary-050);color:var(--color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"] }]
+            args: [{ selector: 'autocomplete-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ElementWrapper, DynamicTextPipe, NgClass, UiTranslatePipe], template: "<element-wrapper [model]=\"model()\">\r\n  @if (model().dataSource && !dataSourceLoaded() && !model().lazyLoad && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"nvb-autocomplete\"\r\n      [class.nvb-autocomplete--open]=\"isOpen()\"\r\n      [class.nvb-autocomplete--loading]=\"dataSourceLoading()\"\r\n      #container\r\n      data-testid=\"autocomplete-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div class=\"nvb-autocomplete__control\">\r\n        <span class=\"material-symbols-outlined nvb-autocomplete__icon\">search</span>\r\n        <input\r\n          [id]=\"model().name\"\r\n          [ngClass]=\"useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n          class=\"nvb-autocomplete__input\"\r\n          type=\"text\"\r\n          [placeholder]=\"\r\n            dataSourceLoading()\r\n              ? ('autocomplete.loading' | uiT: 'Loading...')\r\n              : model().placeholder\r\n              ? (model().placeholder | dynamicText: model())\r\n              : ('autocomplete.placeholder' | uiT: 'Search...')\r\n          \"\r\n          [disabled]=\"model().disabled || dataSourceLoading()\"\r\n          [readOnly]=\"model().readOnly\"\r\n          [value]=\"inputValue()\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInput($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n        />\r\n\r\n        @if (dataSourceLoading()) {\r\n          <span class=\"nvb-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n        } @else if (inputValue()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-autocomplete__clear\"\r\n            [attr.title]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            [attr.aria-label]=\"'autocomplete.clear' | uiT: 'Clear'\"\r\n            (mousedown)=\"clear($event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div class=\"nvb-autocomplete__dropdown\" data-testid=\"autocomplete-element-options\">\r\n          @if (isLoading()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.loading' | uiT: 'Loading...' }}\r\n            </div>\r\n          }\r\n\r\n          @for (\r\n            option of suggestionOptions();\r\n            track trackSuggestion(option, $index);\r\n            let i = $index\r\n          ) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-autocomplete__option\"\r\n              [ngClass]=\"{\r\n                'nvb-autocomplete__option--highlighted': isHighlighted(i),\r\n                'nvb-autocomplete__option--selected': isSelected(option),\r\n              }\"\r\n              (mousedown)=\"onOptionMouseDown(option, $event)\"\r\n            >\r\n              {{ option.label }}\r\n            </button>\r\n          }\r\n\r\n          @if (!isLoading() && suggestionOptions().length === 0 && canShowEmptyState()) {\r\n            <div class=\"nvb-autocomplete__status\">\r\n              {{ 'autocomplete.empty' | uiT: 'No results found' }}\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.nvb-autocomplete{position:relative;width:100%;overflow:visible}.nvb-autocomplete--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-autocomplete--loading{cursor:progress}.nvb-autocomplete__control{position:relative;display:flex;align-items:center}.nvb-autocomplete__input{padding-left:34px;padding-right:30px}.nvb-autocomplete--loading .nvb-autocomplete__input{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-autocomplete-loading-shimmer 1.35s ease-in-out infinite}.nvb-autocomplete__icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--color-neutral-500);pointer-events:none;z-index:1}.nvb-autocomplete__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--color-neutral-500);width:24px;height:24px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.nvb-autocomplete__clear:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.nvb-autocomplete__clear span{font-size:16px}.nvb-autocomplete__spinner{position:absolute;right:10px;top:50%;width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;transform:translateY(-50%);animation:nvb-autocomplete-loading-spin .8s linear infinite}.nvb-autocomplete__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:4px}.nvb-autocomplete__option{display:block;width:100%;border:none;background:transparent;text-align:left;min-height:32px;padding:0 10px;border-radius:var(--nvb-control-radius);font-size:13px;color:var(--color-neutral-700);cursor:pointer;transition:background-color .12s ease}.nvb-autocomplete__option:hover,.nvb-autocomplete__option--highlighted{background:var(--color-neutral-100)}.nvb-autocomplete__option--selected{background:var(--color-primary-050);color:var(--color-primary-700);font-weight:600}.nvb-autocomplete__status{padding:10px 12px;font-size:12px;color:var(--color-neutral-500)}@keyframes nvb-autocomplete-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-autocomplete-loading-spin{to{transform:translateY(-50%) rotate(360deg)}}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], containerRef: [{
                 type: ViewChild,
                 args: ['container']
@@ -32897,11 +32897,11 @@ class DatepickerElement {
         void this.elementActionService.runActions(this.model(), this.model().events ?? [], trigger, runtimeContext);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatepickerElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatepickerElement, isStandalone: true, selector: "datepicker-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscapePressed()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" } }, ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-datepicker\"\r\n    [ngClass]=\"{ 'nvb-datepicker--compact': useCompactStyle(), 'nvb-datepicker--open': isOpen() }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-datepicker__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'datepicker-trigger-' + model().name : 'datepicker-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-datepicker__value\"\r\n        [class.nvb-datepicker__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'datePicker.select' | uiT: 'Pasirinkite data' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-datepicker__icon\">calendar_month</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-datepicker__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"datepicker-panel\"\r\n        [style.--nvb-datepicker-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        @if (showCalendar()) {\r\n          <div class=\"nvb-datepicker__calendar-header\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"previousMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n              data-testid=\"datepicker-prev-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n            </button>\r\n\r\n            <div class=\"nvb-datepicker__calendar-selectors\">\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--month\"\r\n                [value]=\"selectedMonth()\"\r\n                (change)=\"onMonthPickerChange($event)\"\r\n              >\r\n                @for (month of monthOptions(); track month.value) {\r\n                  <option [value]=\"month.value\">{{ month.label }}</option>\r\n                }\r\n              </nvb-select>\r\n\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--year\"\r\n                [value]=\"selectedYear()\"\r\n                (change)=\"onYearPickerChange($event)\"\r\n              >\r\n                @for (year of yearOptions(); track year.value) {\r\n                  <option [value]=\"year.value\">{{ year.label }}</option>\r\n                }\r\n              </nvb-select>\r\n            </div>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"nextMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n              data-testid=\"datepicker-next-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__weekdays\" aria-hidden=\"true\">\r\n            @for (weekday of weekDays(); track weekday + $index) {\r\n              <span>{{ weekday }}</span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__days\">\r\n            @for (day of calendarDays(); track day.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-datepicker__day\"\r\n                [class.nvb-datepicker__day--outside]=\"day.outsideMonth\"\r\n                [class.nvb-datepicker__day--today]=\"day.isToday\"\r\n                [class.nvb-datepicker__day--selected]=\"day.isSelected\"\r\n                [disabled]=\"day.disabled\"\r\n                [attr.aria-label]=\"day.key\"\r\n                [attr.aria-pressed]=\"day.isSelected\"\r\n                [attr.data-testid]=\"'datepicker-day-' + day.key\"\r\n                (click)=\"selectDay(day, $event)\"\r\n              >\r\n                {{ day.day }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (showTime()) {\r\n          <div class=\"nvb-datepicker__time-row\">\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>HH</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedHour()\"\r\n                (change)=\"onHourChange($event)\"\r\n              >\r\n                @for (hour of hours; track hour) {\r\n                  <option [value]=\"padValue(hour)\">{{ padValue(hour) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>mm</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedMinute()\"\r\n                (change)=\"onMinuteChange($event)\"\r\n              >\r\n                @for (minute of minutes; track minute) {\r\n                  <option [value]=\"padValue(minute)\">{{ padValue(minute) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            @if (includeSeconds()) {\r\n              <label class=\"nvb-datepicker__time-field\">\r\n                <span>ss</span>\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                  [value]=\"selectedSecond()\"\r\n                  (change)=\"onSecondChange($event)\"\r\n                >\r\n                  @for (second of seconds; track second) {\r\n                    <option [value]=\"padValue(second)\">{{ padValue(second) }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-datepicker__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-datepicker__actions\">\r\n          @if (showCalendar()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--today\"\r\n              [disabled]=\"!canSelectToday()\"\r\n              (click)=\"selectToday($event)\"\r\n              data-testid=\"datepicker-today\"\r\n            >\r\n              {{ 'datePicker.today' | uiT: 'Today' }}\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-datepicker__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"datepicker-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          @if (mode() !== 'date') {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--primary\"\r\n              [disabled]=\"!canApply()\"\r\n              (click)=\"applySelection($event)\"\r\n              data-testid=\"datepicker-apply\"\r\n            >\r\n              {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-datepicker{position:relative;width:100%;overflow:visible}.nvb-datepicker--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-datepicker__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-datepicker__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-datepicker__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-datepicker__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-datepicker__value--placeholder{color:var(--color-neutral-500)}.nvb-datepicker__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-datepicker__panel{--nvb-datepicker-panel-max-height: 392px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-datepicker-panel-max-height);overflow:auto;overscroll-behavior:contain;animation:nvb-datepicker-panel-in .16s ease-out}@keyframes nvb-datepicker-panel-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-datepicker__panel{animation:none}}.nvb-datepicker__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-datepicker__month{font-size:13px;font-weight:600;text-transform:capitalize;color:var(--color-neutral-700)}.nvb-datepicker__calendar-selectors{display:contents;min-width:0}.nvb-datepicker__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-datepicker__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-datepicker__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-datepicker__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__nav span{font-size:18px}.nvb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-datepicker__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__day{height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-datepicker__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-datepicker__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-datepicker__day--outside{color:var(--color-neutral-400)}.nvb-datepicker__day--today{border-color:var(--color-primary-300)}.nvb-datepicker__day--selected{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-datepicker__time-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nvb-datepicker__time-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--color-neutral-600)}.nvb-datepicker__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-datepicker__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-datepicker__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-datepicker__action:disabled{cursor:not-allowed;opacity:.55}.nvb-datepicker__action--today{margin-right:auto}.nvb-datepicker__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-datepicker--compact .nvb-datepicker__panel{min-width:260px}@media(max-width:480px){.nvb-datepicker__calendar-header{gap:6px}.nvb-datepicker__calendar-selectors{display:contents}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatepickerElement, isStandalone: true, selector: "datepicker-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscapePressed()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" } }, ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-datepicker\"\r\n    [ngClass]=\"{ 'nvb-datepicker--compact': useCompactStyle(), 'nvb-datepicker--open': isOpen() }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-datepicker__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'datepicker-trigger-' + model().name : 'datepicker-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-datepicker__value\"\r\n        [class.nvb-datepicker__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'datePicker.select' | uiT: 'Select date' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-datepicker__icon\">calendar_month</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-datepicker__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"datepicker-panel\"\r\n        [style.--nvb-datepicker-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        @if (showCalendar()) {\r\n          <div class=\"nvb-datepicker__calendar-header\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"previousMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n              data-testid=\"datepicker-prev-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n            </button>\r\n\r\n            <div class=\"nvb-datepicker__calendar-selectors\">\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--month\"\r\n                [value]=\"selectedMonth()\"\r\n                (change)=\"onMonthPickerChange($event)\"\r\n              >\r\n                @for (month of monthOptions(); track month.value) {\r\n                  <option [value]=\"month.value\">{{ month.label }}</option>\r\n                }\r\n              </nvb-select>\r\n\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--year\"\r\n                [value]=\"selectedYear()\"\r\n                (change)=\"onYearPickerChange($event)\"\r\n              >\r\n                @for (year of yearOptions(); track year.value) {\r\n                  <option [value]=\"year.value\">{{ year.label }}</option>\r\n                }\r\n              </nvb-select>\r\n            </div>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"nextMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n              data-testid=\"datepicker-next-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__weekdays\" aria-hidden=\"true\">\r\n            @for (weekday of weekDays(); track weekday + $index) {\r\n              <span>{{ weekday }}</span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__days\">\r\n            @for (day of calendarDays(); track day.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-datepicker__day\"\r\n                [class.nvb-datepicker__day--outside]=\"day.outsideMonth\"\r\n                [class.nvb-datepicker__day--today]=\"day.isToday\"\r\n                [class.nvb-datepicker__day--selected]=\"day.isSelected\"\r\n                [disabled]=\"day.disabled\"\r\n                [attr.aria-label]=\"day.key\"\r\n                [attr.aria-pressed]=\"day.isSelected\"\r\n                [attr.data-testid]=\"'datepicker-day-' + day.key\"\r\n                (click)=\"selectDay(day, $event)\"\r\n              >\r\n                {{ day.day }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (showTime()) {\r\n          <div class=\"nvb-datepicker__time-row\">\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>HH</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedHour()\"\r\n                (change)=\"onHourChange($event)\"\r\n              >\r\n                @for (hour of hours; track hour) {\r\n                  <option [value]=\"padValue(hour)\">{{ padValue(hour) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>mm</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedMinute()\"\r\n                (change)=\"onMinuteChange($event)\"\r\n              >\r\n                @for (minute of minutes; track minute) {\r\n                  <option [value]=\"padValue(minute)\">{{ padValue(minute) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            @if (includeSeconds()) {\r\n              <label class=\"nvb-datepicker__time-field\">\r\n                <span>ss</span>\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                  [value]=\"selectedSecond()\"\r\n                  (change)=\"onSecondChange($event)\"\r\n                >\r\n                  @for (second of seconds; track second) {\r\n                    <option [value]=\"padValue(second)\">{{ padValue(second) }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-datepicker__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-datepicker__actions\">\r\n          @if (showCalendar()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--today\"\r\n              [disabled]=\"!canSelectToday()\"\r\n              (click)=\"selectToday($event)\"\r\n              data-testid=\"datepicker-today\"\r\n            >\r\n              {{ 'datePicker.today' | uiT: 'Today' }}\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-datepicker__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"datepicker-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          @if (mode() !== 'date') {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--primary\"\r\n              [disabled]=\"!canApply()\"\r\n              (click)=\"applySelection($event)\"\r\n              data-testid=\"datepicker-apply\"\r\n            >\r\n              {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-datepicker{position:relative;width:100%;overflow:visible}.nvb-datepicker--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-datepicker__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-datepicker__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-datepicker__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-datepicker__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-datepicker__value--placeholder{color:var(--color-neutral-500)}.nvb-datepicker__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-datepicker__panel{--nvb-datepicker-panel-max-height: 392px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-datepicker-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-datepicker__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-datepicker__month{font-size:13px;font-weight:600;text-transform:capitalize;color:var(--color-neutral-700)}.nvb-datepicker__calendar-selectors{display:contents;min-width:0}.nvb-datepicker__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-datepicker__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-datepicker__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-datepicker__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__nav span{font-size:18px}.nvb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-datepicker__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__day{height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-datepicker__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-datepicker__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-datepicker__day--outside{color:var(--color-neutral-400)}.nvb-datepicker__day--today{border-color:var(--color-primary-300)}.nvb-datepicker__day--selected{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-datepicker__time-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nvb-datepicker__time-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--color-neutral-600)}.nvb-datepicker__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-datepicker__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-datepicker__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-datepicker__action:disabled{cursor:not-allowed;opacity:.55}.nvb-datepicker__action--today{margin-right:auto}.nvb-datepicker__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-datepicker--compact .nvb-datepicker__panel{min-width:260px}@media(max-width:480px){.nvb-datepicker__calendar-header{gap:6px}.nvb-datepicker__calendar-selectors{display:contents}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatepickerElement, decorators: [{
             type: Component,
-            args: [{ selector: 'datepicker-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NvbSelect, ElementWrapper, NgClass, DynamicTextPipe, UiTranslatePipe], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-datepicker\"\r\n    [ngClass]=\"{ 'nvb-datepicker--compact': useCompactStyle(), 'nvb-datepicker--open': isOpen() }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-datepicker__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'datepicker-trigger-' + model().name : 'datepicker-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-datepicker__value\"\r\n        [class.nvb-datepicker__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'datePicker.select' | uiT: 'Pasirinkite data' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-datepicker__icon\">calendar_month</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-datepicker__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"datepicker-panel\"\r\n        [style.--nvb-datepicker-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        @if (showCalendar()) {\r\n          <div class=\"nvb-datepicker__calendar-header\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"previousMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n              data-testid=\"datepicker-prev-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n            </button>\r\n\r\n            <div class=\"nvb-datepicker__calendar-selectors\">\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--month\"\r\n                [value]=\"selectedMonth()\"\r\n                (change)=\"onMonthPickerChange($event)\"\r\n              >\r\n                @for (month of monthOptions(); track month.value) {\r\n                  <option [value]=\"month.value\">{{ month.label }}</option>\r\n                }\r\n              </nvb-select>\r\n\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--year\"\r\n                [value]=\"selectedYear()\"\r\n                (change)=\"onYearPickerChange($event)\"\r\n              >\r\n                @for (year of yearOptions(); track year.value) {\r\n                  <option [value]=\"year.value\">{{ year.label }}</option>\r\n                }\r\n              </nvb-select>\r\n            </div>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"nextMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n              data-testid=\"datepicker-next-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__weekdays\" aria-hidden=\"true\">\r\n            @for (weekday of weekDays(); track weekday + $index) {\r\n              <span>{{ weekday }}</span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__days\">\r\n            @for (day of calendarDays(); track day.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-datepicker__day\"\r\n                [class.nvb-datepicker__day--outside]=\"day.outsideMonth\"\r\n                [class.nvb-datepicker__day--today]=\"day.isToday\"\r\n                [class.nvb-datepicker__day--selected]=\"day.isSelected\"\r\n                [disabled]=\"day.disabled\"\r\n                [attr.aria-label]=\"day.key\"\r\n                [attr.aria-pressed]=\"day.isSelected\"\r\n                [attr.data-testid]=\"'datepicker-day-' + day.key\"\r\n                (click)=\"selectDay(day, $event)\"\r\n              >\r\n                {{ day.day }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (showTime()) {\r\n          <div class=\"nvb-datepicker__time-row\">\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>HH</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedHour()\"\r\n                (change)=\"onHourChange($event)\"\r\n              >\r\n                @for (hour of hours; track hour) {\r\n                  <option [value]=\"padValue(hour)\">{{ padValue(hour) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>mm</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedMinute()\"\r\n                (change)=\"onMinuteChange($event)\"\r\n              >\r\n                @for (minute of minutes; track minute) {\r\n                  <option [value]=\"padValue(minute)\">{{ padValue(minute) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            @if (includeSeconds()) {\r\n              <label class=\"nvb-datepicker__time-field\">\r\n                <span>ss</span>\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                  [value]=\"selectedSecond()\"\r\n                  (change)=\"onSecondChange($event)\"\r\n                >\r\n                  @for (second of seconds; track second) {\r\n                    <option [value]=\"padValue(second)\">{{ padValue(second) }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-datepicker__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-datepicker__actions\">\r\n          @if (showCalendar()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--today\"\r\n              [disabled]=\"!canSelectToday()\"\r\n              (click)=\"selectToday($event)\"\r\n              data-testid=\"datepicker-today\"\r\n            >\r\n              {{ 'datePicker.today' | uiT: 'Today' }}\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-datepicker__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"datepicker-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          @if (mode() !== 'date') {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--primary\"\r\n              [disabled]=\"!canApply()\"\r\n              (click)=\"applySelection($event)\"\r\n              data-testid=\"datepicker-apply\"\r\n            >\r\n              {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-datepicker{position:relative;width:100%;overflow:visible}.nvb-datepicker--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-datepicker__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-datepicker__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-datepicker__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-datepicker__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-datepicker__value--placeholder{color:var(--color-neutral-500)}.nvb-datepicker__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-datepicker__panel{--nvb-datepicker-panel-max-height: 392px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-datepicker-panel-max-height);overflow:auto;overscroll-behavior:contain;animation:nvb-datepicker-panel-in .16s ease-out}@keyframes nvb-datepicker-panel-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-datepicker__panel{animation:none}}.nvb-datepicker__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-datepicker__month{font-size:13px;font-weight:600;text-transform:capitalize;color:var(--color-neutral-700)}.nvb-datepicker__calendar-selectors{display:contents;min-width:0}.nvb-datepicker__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-datepicker__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-datepicker__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-datepicker__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__nav span{font-size:18px}.nvb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-datepicker__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__day{height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-datepicker__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-datepicker__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-datepicker__day--outside{color:var(--color-neutral-400)}.nvb-datepicker__day--today{border-color:var(--color-primary-300)}.nvb-datepicker__day--selected{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-datepicker__time-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nvb-datepicker__time-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--color-neutral-600)}.nvb-datepicker__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-datepicker__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-datepicker__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-datepicker__action:disabled{cursor:not-allowed;opacity:.55}.nvb-datepicker__action--today{margin-right:auto}.nvb-datepicker__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-datepicker--compact .nvb-datepicker__panel{min-width:260px}@media(max-width:480px){.nvb-datepicker__calendar-header{gap:6px}.nvb-datepicker__calendar-selectors{display:contents}}\n"] }]
+            args: [{ selector: 'datepicker-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NvbSelect, ElementWrapper, NgClass, DynamicTextPipe, UiTranslatePipe], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-datepicker\"\r\n    [ngClass]=\"{ 'nvb-datepicker--compact': useCompactStyle(), 'nvb-datepicker--open': isOpen() }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-datepicker__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'datepicker-trigger-' + model().name : 'datepicker-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-datepicker__value\"\r\n        [class.nvb-datepicker__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'datePicker.select' | uiT: 'Select date' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-datepicker__icon\">calendar_month</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-datepicker__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"datepicker-panel\"\r\n        [style.--nvb-datepicker-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        @if (showCalendar()) {\r\n          <div class=\"nvb-datepicker__calendar-header\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"previousMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n              data-testid=\"datepicker-prev-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n            </button>\r\n\r\n            <div class=\"nvb-datepicker__calendar-selectors\">\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--month\"\r\n                [value]=\"selectedMonth()\"\r\n                (change)=\"onMonthPickerChange($event)\"\r\n              >\r\n                @for (month of monthOptions(); track month.value) {\r\n                  <option [value]=\"month.value\">{{ month.label }}</option>\r\n                }\r\n              </nvb-select>\r\n\r\n              <nvb-select\r\n                class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--year\"\r\n                [value]=\"selectedYear()\"\r\n                (change)=\"onYearPickerChange($event)\"\r\n              >\r\n                @for (year of yearOptions(); track year.value) {\r\n                  <option [value]=\"year.value\">{{ year.label }}</option>\r\n                }\r\n              </nvb-select>\r\n            </div>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__nav\"\r\n              (click)=\"nextMonth($event)\"\r\n              [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n              data-testid=\"datepicker-next-month\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__weekdays\" aria-hidden=\"true\">\r\n            @for (weekday of weekDays(); track weekday + $index) {\r\n              <span>{{ weekday }}</span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"nvb-datepicker__days\">\r\n            @for (day of calendarDays(); track day.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-datepicker__day\"\r\n                [class.nvb-datepicker__day--outside]=\"day.outsideMonth\"\r\n                [class.nvb-datepicker__day--today]=\"day.isToday\"\r\n                [class.nvb-datepicker__day--selected]=\"day.isSelected\"\r\n                [disabled]=\"day.disabled\"\r\n                [attr.aria-label]=\"day.key\"\r\n                [attr.aria-pressed]=\"day.isSelected\"\r\n                [attr.data-testid]=\"'datepicker-day-' + day.key\"\r\n                (click)=\"selectDay(day, $event)\"\r\n              >\r\n                {{ day.day }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (showTime()) {\r\n          <div class=\"nvb-datepicker__time-row\">\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>HH</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedHour()\"\r\n                (change)=\"onHourChange($event)\"\r\n              >\r\n                @for (hour of hours; track hour) {\r\n                  <option [value]=\"padValue(hour)\">{{ padValue(hour) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            <label class=\"nvb-datepicker__time-field\">\r\n              <span>mm</span>\r\n              <nvb-select\r\n                class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                [value]=\"selectedMinute()\"\r\n                (change)=\"onMinuteChange($event)\"\r\n              >\r\n                @for (minute of minutes; track minute) {\r\n                  <option [value]=\"padValue(minute)\">{{ padValue(minute) }}</option>\r\n                }\r\n              </nvb-select>\r\n            </label>\r\n\r\n            @if (includeSeconds()) {\r\n              <label class=\"nvb-datepicker__time-field\">\r\n                <span>ss</span>\r\n                <nvb-select\r\n                  class=\"nvb-control__attribute-input nvb-select--fit-content\"\r\n                  [value]=\"selectedSecond()\"\r\n                  (change)=\"onSecondChange($event)\"\r\n                >\r\n                  @for (second of seconds; track second) {\r\n                    <option [value]=\"padValue(second)\">{{ padValue(second) }}</option>\r\n                  }\r\n                </nvb-select>\r\n              </label>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-datepicker__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-datepicker__actions\">\r\n          @if (showCalendar()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--today\"\r\n              [disabled]=\"!canSelectToday()\"\r\n              (click)=\"selectToday($event)\"\r\n              data-testid=\"datepicker-today\"\r\n            >\r\n              {{ 'datePicker.today' | uiT: 'Today' }}\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-datepicker__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"datepicker-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          @if (mode() !== 'date') {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-datepicker__action nvb-datepicker__action--primary\"\r\n              [disabled]=\"!canApply()\"\r\n              (click)=\"applySelection($event)\"\r\n              data-testid=\"datepicker-apply\"\r\n            >\r\n              {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-datepicker{position:relative;width:100%;overflow:visible}.nvb-datepicker--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-datepicker__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-datepicker__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-datepicker__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-datepicker__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-datepicker__value--placeholder{color:var(--color-neutral-500)}.nvb-datepicker__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-datepicker__panel{--nvb-datepicker-panel-max-height: 392px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-datepicker-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-datepicker__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-datepicker__month{font-size:13px;font-weight:600;text-transform:capitalize;color:var(--color-neutral-700)}.nvb-datepicker__calendar-selectors{display:contents;min-width:0}.nvb-datepicker__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-datepicker__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-datepicker__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-datepicker__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__nav span{font-size:18px}.nvb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-datepicker__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__day{height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-datepicker__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-datepicker__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-datepicker__day--outside{color:var(--color-neutral-400)}.nvb-datepicker__day--today{border-color:var(--color-primary-300)}.nvb-datepicker__day--selected{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-datepicker__time-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nvb-datepicker__time-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--color-neutral-600)}.nvb-datepicker__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-datepicker__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-datepicker__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-datepicker__action:disabled{cursor:not-allowed;opacity:.55}.nvb-datepicker__action--today{margin-right:auto}.nvb-datepicker__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-datepicker--compact .nvb-datepicker__panel{min-width:260px}@media(max-width:480px){.nvb-datepicker__calendar-header{gap:6px}.nvb-datepicker__calendar-selectors{display:contents}}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], onDocumentMouseDown: [{
                 type: HostListener,
                 args: ['document:mousedown', ['$event']]
@@ -33385,11 +33385,11 @@ class DateRangeElement {
             left.getDate() === right.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DateRangeElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DateRangeElement, isStandalone: true, selector: "date-range-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscapePressed()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" } }, ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-date-range\"\r\n    [ngClass]=\"{\r\n      'nvb-date-range--compact': useCompactStyle(),\r\n      'nvb-date-range--open': isOpen(),\r\n    }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-date-range__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'date-range-trigger-' + model().name : 'date-range-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-date-range__value\"\r\n        [class.nvb-date-range__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'dateRange.select' | uiT: 'Pasirinkite laikotarpi' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-date-range__icon\">date_range</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-date-range__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"date-range-panel\"\r\n        [style.--nvb-date-range-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"nvb-date-range__calendar-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"previousMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n            data-testid=\"date-range-prev-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_left</span>\r\n          </button>\r\n\r\n          <div class=\"nvb-date-range__calendar-selectors\">\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--month\"\r\n              [value]=\"selectedMonth()\"\r\n              (change)=\"onMonthPickerChange($event)\"\r\n            >\r\n              @for (month of monthOptions(); track month.value) {\r\n                <option [value]=\"month.value\">{{ month.label }}</option>\r\n              }\r\n            </nvb-select>\r\n\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--year\"\r\n              [value]=\"selectedYear()\"\r\n              (change)=\"onYearPickerChange($event)\"\r\n            >\r\n              @for (year of yearOptions(); track year.value) {\r\n                <option [value]=\"year.value\">{{ year.label }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"nextMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n            data-testid=\"date-range-next-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_right</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__weekdays\" aria-hidden=\"true\">\r\n          @for (weekday of weekDays(); track weekday + $index) {\r\n            <span>{{ weekday }}</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__days\">\r\n          @for (day of calendarDays(); track day.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-date-range__day\"\r\n              [class.nvb-date-range__day--outside]=\"day.outsideMonth\"\r\n              [class.nvb-date-range__day--today]=\"day.isToday\"\r\n              [class.nvb-date-range__day--in-range]=\"day.isInRange\"\r\n              [class.nvb-date-range__day--range-start]=\"day.isRangeStart\"\r\n              [class.nvb-date-range__day--range-end]=\"day.isRangeEnd\"\r\n              [disabled]=\"day.disabled\"\r\n              [attr.aria-label]=\"day.key\"\r\n              [attr.aria-pressed]=\"day.isRangeStart || day.isRangeEnd || day.isInRange\"\r\n              [attr.data-testid]=\"'date-range-day-' + day.key\"\r\n              (click)=\"selectDay(day, $event)\"\r\n            >\r\n              {{ day.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-date-range__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-date-range__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"date-range-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action nvb-date-range__action--primary\"\r\n            [disabled]=\"!canApply()\"\r\n            (click)=\"applySelection($event)\"\r\n            data-testid=\"date-range-apply\"\r\n          >\r\n            {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-date-range{position:relative;width:100%;overflow:visible}.nvb-date-range--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-date-range__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-date-range__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-date-range__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-date-range__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-date-range__value--placeholder{color:var(--color-neutral-500)}.nvb-date-range__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-date-range__panel{--nvb-date-range-panel-max-height: 408px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-date-range-panel-max-height);overflow:auto;overscroll-behavior:contain;animation:nvb-date-range-panel-in .16s ease-out}@keyframes nvb-date-range-panel-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-date-range__panel{animation:none}}.nvb-date-range__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-date-range__calendar-selectors{display:contents;min-width:0}.nvb-date-range__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-date-range__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-date-range__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-date-range__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__nav span{font-size:18px}.nvb-date-range__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-date-range__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__day{position:relative;height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-date-range__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-date-range__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-date-range__day--outside{color:var(--color-neutral-400)}.nvb-date-range__day--today{border-color:var(--color-primary-300)}.nvb-date-range__day--in-range{border-color:color-mix(in oklab,var(--color-primary-500) 20%,transparent);background:color-mix(in oklab,var(--color-primary-050) 82%,var(--color-neutral-000));color:var(--color-primary-700)}.nvb-date-range__day--range-start,.nvb-date-range__day--range-end{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-date-range__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-date-range__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-date-range__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-date-range__action:disabled{cursor:not-allowed;opacity:.55}.nvb-date-range__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-date-range--compact .nvb-date-range__panel{min-width:260px}@media(max-width:480px){.nvb-date-range__calendar-header{gap:6px}.nvb-date-range__calendar-selectors{display:contents}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DateRangeElement, isStandalone: true, selector: "date-range-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscapePressed()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" } }, ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-date-range\"\r\n    [ngClass]=\"{\r\n      'nvb-date-range--compact': useCompactStyle(),\r\n      'nvb-date-range--open': isOpen(),\r\n    }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-date-range__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'date-range-trigger-' + model().name : 'date-range-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-date-range__value\"\r\n        [class.nvb-date-range__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'dateRange.select' | uiT: 'Select date range' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-date-range__icon\">date_range</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-date-range__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"date-range-panel\"\r\n        [style.--nvb-date-range-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"nvb-date-range__calendar-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"previousMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n            data-testid=\"date-range-prev-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_left</span>\r\n          </button>\r\n\r\n          <div class=\"nvb-date-range__calendar-selectors\">\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--month\"\r\n              [value]=\"selectedMonth()\"\r\n              (change)=\"onMonthPickerChange($event)\"\r\n            >\r\n              @for (month of monthOptions(); track month.value) {\r\n                <option [value]=\"month.value\">{{ month.label }}</option>\r\n              }\r\n            </nvb-select>\r\n\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--year\"\r\n              [value]=\"selectedYear()\"\r\n              (change)=\"onYearPickerChange($event)\"\r\n            >\r\n              @for (year of yearOptions(); track year.value) {\r\n                <option [value]=\"year.value\">{{ year.label }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"nextMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n            data-testid=\"date-range-next-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_right</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__weekdays\" aria-hidden=\"true\">\r\n          @for (weekday of weekDays(); track weekday + $index) {\r\n            <span>{{ weekday }}</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__days\">\r\n          @for (day of calendarDays(); track day.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-date-range__day\"\r\n              [class.nvb-date-range__day--outside]=\"day.outsideMonth\"\r\n              [class.nvb-date-range__day--today]=\"day.isToday\"\r\n              [class.nvb-date-range__day--in-range]=\"day.isInRange\"\r\n              [class.nvb-date-range__day--range-start]=\"day.isRangeStart\"\r\n              [class.nvb-date-range__day--range-end]=\"day.isRangeEnd\"\r\n              [disabled]=\"day.disabled\"\r\n              [attr.aria-label]=\"day.key\"\r\n              [attr.aria-pressed]=\"day.isRangeStart || day.isRangeEnd || day.isInRange\"\r\n              [attr.data-testid]=\"'date-range-day-' + day.key\"\r\n              (click)=\"selectDay(day, $event)\"\r\n            >\r\n              {{ day.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-date-range__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-date-range__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"date-range-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action nvb-date-range__action--primary\"\r\n            [disabled]=\"!canApply()\"\r\n            (click)=\"applySelection($event)\"\r\n            data-testid=\"date-range-apply\"\r\n          >\r\n            {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-date-range{position:relative;width:100%;overflow:visible}.nvb-date-range--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-date-range__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-date-range__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-date-range__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-date-range__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-date-range__value--placeholder{color:var(--color-neutral-500)}.nvb-date-range__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-date-range__panel{--nvb-date-range-panel-max-height: 408px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-date-range-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-date-range__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-date-range__calendar-selectors{display:contents;min-width:0}.nvb-date-range__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-date-range__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-date-range__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-date-range__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__nav span{font-size:18px}.nvb-date-range__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-date-range__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__day{position:relative;height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-date-range__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-date-range__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-date-range__day--outside{color:var(--color-neutral-400)}.nvb-date-range__day--today{border-color:var(--color-primary-300)}.nvb-date-range__day--in-range{border-color:color-mix(in oklab,var(--color-primary-500) 20%,transparent);background:color-mix(in oklab,var(--color-primary-050) 82%,var(--color-neutral-000));color:var(--color-primary-700)}.nvb-date-range__day--range-start,.nvb-date-range__day--range-end{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-date-range__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-date-range__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-date-range__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-date-range__action:disabled{cursor:not-allowed;opacity:.55}.nvb-date-range__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-date-range--compact .nvb-date-range__panel{min-width:260px}@media(max-width:480px){.nvb-date-range__calendar-header{gap:6px}.nvb-date-range__calendar-selectors{display:contents}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DateRangeElement, decorators: [{
             type: Component,
-            args: [{ selector: 'date-range-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NvbSelect, ElementWrapper, NgClass, DynamicTextPipe, UiTranslatePipe], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-date-range\"\r\n    [ngClass]=\"{\r\n      'nvb-date-range--compact': useCompactStyle(),\r\n      'nvb-date-range--open': isOpen(),\r\n    }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-date-range__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'date-range-trigger-' + model().name : 'date-range-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-date-range__value\"\r\n        [class.nvb-date-range__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'dateRange.select' | uiT: 'Pasirinkite laikotarpi' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-date-range__icon\">date_range</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-date-range__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"date-range-panel\"\r\n        [style.--nvb-date-range-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"nvb-date-range__calendar-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"previousMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n            data-testid=\"date-range-prev-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_left</span>\r\n          </button>\r\n\r\n          <div class=\"nvb-date-range__calendar-selectors\">\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--month\"\r\n              [value]=\"selectedMonth()\"\r\n              (change)=\"onMonthPickerChange($event)\"\r\n            >\r\n              @for (month of monthOptions(); track month.value) {\r\n                <option [value]=\"month.value\">{{ month.label }}</option>\r\n              }\r\n            </nvb-select>\r\n\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--year\"\r\n              [value]=\"selectedYear()\"\r\n              (change)=\"onYearPickerChange($event)\"\r\n            >\r\n              @for (year of yearOptions(); track year.value) {\r\n                <option [value]=\"year.value\">{{ year.label }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"nextMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n            data-testid=\"date-range-next-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_right</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__weekdays\" aria-hidden=\"true\">\r\n          @for (weekday of weekDays(); track weekday + $index) {\r\n            <span>{{ weekday }}</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__days\">\r\n          @for (day of calendarDays(); track day.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-date-range__day\"\r\n              [class.nvb-date-range__day--outside]=\"day.outsideMonth\"\r\n              [class.nvb-date-range__day--today]=\"day.isToday\"\r\n              [class.nvb-date-range__day--in-range]=\"day.isInRange\"\r\n              [class.nvb-date-range__day--range-start]=\"day.isRangeStart\"\r\n              [class.nvb-date-range__day--range-end]=\"day.isRangeEnd\"\r\n              [disabled]=\"day.disabled\"\r\n              [attr.aria-label]=\"day.key\"\r\n              [attr.aria-pressed]=\"day.isRangeStart || day.isRangeEnd || day.isInRange\"\r\n              [attr.data-testid]=\"'date-range-day-' + day.key\"\r\n              (click)=\"selectDay(day, $event)\"\r\n            >\r\n              {{ day.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-date-range__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-date-range__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"date-range-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action nvb-date-range__action--primary\"\r\n            [disabled]=\"!canApply()\"\r\n            (click)=\"applySelection($event)\"\r\n            data-testid=\"date-range-apply\"\r\n          >\r\n            {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-date-range{position:relative;width:100%;overflow:visible}.nvb-date-range--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-date-range__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-date-range__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-date-range__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-date-range__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-date-range__value--placeholder{color:var(--color-neutral-500)}.nvb-date-range__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-date-range__panel{--nvb-date-range-panel-max-height: 408px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-date-range-panel-max-height);overflow:auto;overscroll-behavior:contain;animation:nvb-date-range-panel-in .16s ease-out}@keyframes nvb-date-range-panel-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-date-range__panel{animation:none}}.nvb-date-range__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-date-range__calendar-selectors{display:contents;min-width:0}.nvb-date-range__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-date-range__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-date-range__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-date-range__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__nav span{font-size:18px}.nvb-date-range__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-date-range__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__day{position:relative;height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-date-range__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-date-range__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-date-range__day--outside{color:var(--color-neutral-400)}.nvb-date-range__day--today{border-color:var(--color-primary-300)}.nvb-date-range__day--in-range{border-color:color-mix(in oklab,var(--color-primary-500) 20%,transparent);background:color-mix(in oklab,var(--color-primary-050) 82%,var(--color-neutral-000));color:var(--color-primary-700)}.nvb-date-range__day--range-start,.nvb-date-range__day--range-end{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-date-range__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-date-range__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-date-range__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-date-range__action:disabled{cursor:not-allowed;opacity:.55}.nvb-date-range__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-date-range--compact .nvb-date-range__panel{min-width:260px}@media(max-width:480px){.nvb-date-range__calendar-header{gap:6px}.nvb-date-range__calendar-selectors{display:contents}}\n"] }]
+            args: [{ selector: 'date-range-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NvbSelect, ElementWrapper, NgClass, DynamicTextPipe, UiTranslatePipe], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  <div\r\n    class=\"nvb-date-range\"\r\n    [ngClass]=\"{\r\n      'nvb-date-range--compact': useCompactStyle(),\r\n      'nvb-date-range--open': isOpen(),\r\n    }\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"nvb-date-range__trigger\"\r\n      [disabled]=\"model().disabled\"\r\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\r\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n      [attr.aria-required]=\"model().required ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.data-testid]=\"\r\n        model().name ? 'date-range-trigger-' + model().name : 'date-range-trigger'\r\n      \"\r\n      (click)=\"togglePanel($event)\"\r\n    >\r\n      <span\r\n        class=\"nvb-date-range__value\"\r\n        [class.nvb-date-range__value--placeholder]=\"!displayValue()\"\r\n      >\r\n        @if (displayValue()) {\r\n          {{ displayValue() }}\r\n        } @else if (model().placeholder) {\r\n          {{ model().placeholder | dynamicText: model() }}\r\n        } @else {\r\n          {{ 'dateRange.select' | uiT: 'Select date range' }}\r\n        }\r\n      </span>\r\n\r\n      <span class=\"material-symbols-outlined nvb-date-range__icon\">date_range</span>\r\n    </button>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        class=\"nvb-date-range__panel\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        data-testid=\"date-range-panel\"\r\n        [style.--nvb-date-range-panel-max-height.px]=\"panelMaxHeight()\"\r\n        [style.left.px]=\"panelLeft()\"\r\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\r\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\r\n        [style.min-width.px]=\"panelMinWidth()\"\r\n        [style.width.px]=\"panelWidth()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"nvb-date-range__calendar-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"previousMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\r\n            data-testid=\"date-range-prev-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_left</span>\r\n          </button>\r\n\r\n          <div class=\"nvb-date-range__calendar-selectors\">\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--month\"\r\n              [value]=\"selectedMonth()\"\r\n              (change)=\"onMonthPickerChange($event)\"\r\n            >\r\n              @for (month of monthOptions(); track month.value) {\r\n                <option [value]=\"month.value\">{{ month.label }}</option>\r\n              }\r\n            </nvb-select>\r\n\r\n            <nvb-select\r\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--year\"\r\n              [value]=\"selectedYear()\"\r\n              (change)=\"onYearPickerChange($event)\"\r\n            >\r\n              @for (year of yearOptions(); track year.value) {\r\n                <option [value]=\"year.value\">{{ year.label }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__nav\"\r\n            (click)=\"nextMonth($event)\"\r\n            [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\r\n            data-testid=\"date-range-next-month\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">chevron_right</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__weekdays\" aria-hidden=\"true\">\r\n          @for (weekday of weekDays(); track weekday + $index) {\r\n            <span>{{ weekday }}</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"nvb-date-range__days\">\r\n          @for (day of calendarDays(); track day.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"nvb-date-range__day\"\r\n              [class.nvb-date-range__day--outside]=\"day.outsideMonth\"\r\n              [class.nvb-date-range__day--today]=\"day.isToday\"\r\n              [class.nvb-date-range__day--in-range]=\"day.isInRange\"\r\n              [class.nvb-date-range__day--range-start]=\"day.isRangeStart\"\r\n              [class.nvb-date-range__day--range-end]=\"day.isRangeEnd\"\r\n              [disabled]=\"day.disabled\"\r\n              [attr.aria-label]=\"day.key\"\r\n              [attr.aria-pressed]=\"day.isRangeStart || day.isRangeEnd || day.isInRange\"\r\n              [attr.data-testid]=\"'date-range-day-' + day.key\"\r\n              (click)=\"selectDay(day, $event)\"\r\n            >\r\n              {{ day.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (minLabel() || maxLabel()) {\r\n          <div class=\"nvb-date-range__range-hint\">\r\n            @if (minLabel()) {\r\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\r\n            }\r\n            @if (maxLabel()) {\r\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"nvb-date-range__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action\"\r\n            (click)=\"clearSelection($event)\"\r\n            data-testid=\"date-range-clear\"\r\n          >\r\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"nvb-date-range__action nvb-date-range__action--primary\"\r\n            [disabled]=\"!canApply()\"\r\n            (click)=\"applySelection($event)\"\r\n            data-testid=\"date-range-apply\"\r\n          >\r\n            {{ 'datePicker.apply' | uiT: 'Apply' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-date-range{position:relative;width:100%;overflow:visible}.nvb-date-range--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-date-range__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--color-neutral-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-date-range__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-date-range__trigger:focus-visible{border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-date-range__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-date-range__value--placeholder{color:var(--color-neutral-500)}.nvb-date-range__icon{font-size:18px;color:var(--color-neutral-500)}.nvb-date-range__panel{--nvb-date-range-panel-max-height: 408px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--radius-md)));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-date-range-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-date-range__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-date-range__calendar-selectors{display:contents;min-width:0}.nvb-date-range__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-date-range__nav{width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-date-range__nav:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050);color:var(--color-neutral-800)}.nvb-date-range__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__nav span{font-size:18px}.nvb-date-range__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-date-range__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__day{position:relative;height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--radius-md));background:transparent;color:var(--color-neutral-700);font-size:12px;cursor:pointer}.nvb-date-range__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--color-primary-500) 36%,var(--color-neutral-300));background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-neutral-000))}.nvb-date-range__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__day:disabled{color:var(--color-neutral-400);cursor:not-allowed}.nvb-date-range__day--outside{color:var(--color-neutral-400)}.nvb-date-range__day--today{border-color:var(--color-primary-300)}.nvb-date-range__day--in-range{border-color:color-mix(in oklab,var(--color-primary-500) 20%,transparent);background:color-mix(in oklab,var(--color-primary-050) 82%,var(--color-neutral-000));color:var(--color-primary-700)}.nvb-date-range__day--range-start,.nvb-date-range__day--range-end{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:600}.nvb-date-range__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--color-neutral-500)}.nvb-date-range__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-date-range__action{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-date-range__action:disabled{cursor:not-allowed;opacity:.55}.nvb-date-range__action--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.nvb-date-range--compact .nvb-date-range__panel{min-width:260px}@media(max-width:480px){.nvb-date-range__calendar-header{gap:6px}.nvb-date-range__calendar-selectors{display:contents}}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], onDocumentMouseDown: [{
                 type: HostListener,
                 args: ['document:mousedown', ['$event']]
@@ -34324,7 +34324,7 @@ class DialogElement {
         this.currentMode.set(configuredMode === 'fullscreen' ? 'fullscreen' : 'modal');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogElement, isStandalone: true, selector: "dialog-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, rowsTemplate: { classPropertyName: "rowsTemplate", publicName: "rowsTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePressed()" } }, ngImport: i0, template: "@if (!isEditor() && headerTemplateCss()) {\r\n  <nvb-style-outlet\r\n    [cssText]=\"headerTemplateCss()\"\r\n    [renderInPlace]=\"true\"\r\n    [styleKey]=\"styleOutletKey()\"\r\n  ></nvb-style-outlet>\r\n}\r\n\r\n@if (isEditor()) {\r\n  <section class=\"nvb-dialog-editor\" data-testid=\"dialog-editor-root\">\r\n    @if (shouldRenderTriggerButton()) {\r\n      <div [class]=\"triggerContainerClass()\">\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"triggerButtonClass()\"\r\n          [ngStyle]=\"triggerButtonStyle()\"\r\n          (click)=\"onEditorTriggerPreviewClick($event)\"\r\n          tabindex=\"-1\"\r\n          data-testid=\"dialog-editor-trigger\"\r\n          [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n          [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        >\r\n          @if (hasTriggerIcon()) {\r\n            <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\r\n              triggerIcon()\r\n            }}</span>\r\n          }\r\n          @if (showTriggerText()) {\r\n            <span class=\"nvb-dialog-trigger__text\">\r\n              @if (triggerText()) {\r\n                {{ triggerText() | dynamicText: model() }}\r\n              } @else {\r\n                {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n              }\r\n            </span>\r\n          }\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <panel-element class=\"nvb-dialog-editor__panel\" [model]=\"$any(model())\" [column]=\"column()\">\r\n      @if (rowsTemplate(); as templateRef) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n        ></ng-container>\r\n      }\r\n    </panel-element>\r\n  </section>\r\n} @else {\r\n  @if (shouldRenderTriggerButton()) {\r\n    <div [class]=\"triggerContainerClass()\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"triggerButtonClass()\"\r\n        [disabled]=\"isInteractionLocked()\"\r\n        [ngStyle]=\"triggerButtonStyle()\"\r\n        (click)=\"onOpenClick($event)\"\r\n        data-testid=\"dialog-trigger\"\r\n        [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n      >\r\n        @if (hasTriggerIcon()) {\r\n          <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{ triggerIcon() }}</span>\r\n        }\r\n        @if (showTriggerText()) {\r\n          <span class=\"nvb-dialog-trigger__text\">\r\n            @if (triggerText()) {\r\n              {{ triggerText() | dynamicText: model() }}\r\n            } @else {\r\n              {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n            }\r\n          </span>\r\n        }\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (shouldRenderRuntimeDialog()) {\r\n    <div class=\"nvb-dialog\" [ngClass]=\"shellClass()\" data-testid=\"dialog-root\">\r\n      <div\r\n        class=\"nvb-dialog__backdrop\"\r\n        (click)=\"onBackdropClick()\"\r\n        data-testid=\"dialog-backdrop\"\r\n      ></div>\r\n\r\n      <section\r\n        class=\"nvb-dialog__window\"\r\n        [ngStyle]=\"dialogStyle()\"\r\n        data-testid=\"dialog-window\"\r\n        role=\"dialog\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-modal]=\"currentMode() === 'modal' || currentMode() === 'fullscreen' ? 'true' : null\"\r\n        [attr.aria-labelledby]=\"dialogTitleId()\"\r\n        [attr.aria-label]=\"dialogTitleId() ? null : dialogFallbackLabel()\"\r\n        [attr.aria-describedby]=\"dialogDescriptionId()\"\r\n      >\r\n        @if (hasHeaderContent()) {\r\n          <header class=\"nvb-dialog__header\">\r\n            <div class=\"nvb-dialog__heading\">\r\n              @if (model()?.label) {\r\n                <div class=\"nvb-dialog__title\" [id]=\"dialogTitleDomId()\">\r\n                  {{ model()?.label | dynamicText: model() }}\r\n                </div>\r\n              }\r\n              @if (model()?.description) {\r\n                <p [id]=\"dialogDescriptionDomId()\">\r\n                  {{ model()?.description | dynamicText: model() }}\r\n                </p>\r\n              }\r\n              @if (headerTemplateHtml()) {\r\n                <div\r\n                  class=\"nvb-dialog__header-template\"\r\n                  [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                  [innerHTML]=\"headerTemplateHtml()\"\r\n                  (click)=\"onHeaderTemplateClick($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"nvb-dialog__header-actions\">\r\n              @if (model()?.allowFullscreenToggle) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onToggleFullscreenClick($event)\"\r\n                  [title]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                  [attr.aria-label]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">{{\r\n                    currentMode() === 'fullscreen' ? 'fullscreen_exit' : 'fullscreen'\r\n                  }}</span>\r\n                </button>\r\n              }\r\n\r\n              @if (model()?.showCloseButton) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onCloseClick($event)\"\r\n                  data-testid=\"dialog-close\"\r\n                  [title]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                  [attr.aria-label]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">close</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </header>\r\n        }\r\n\r\n        <div class=\"nvb-dialog__body\" data-testid=\"dialog-body\">\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            }\r\n          }\r\n        </div>\r\n      </section>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%}.nvb-dialog-editor{position:relative;width:100%;min-height:160px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-card-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-2);padding:16px}.nvb-dialog-trigger-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;overflow:visible}.nvb-dialog-editor .nvb-dialog-trigger-container{margin-bottom:16px;padding-top:18px}.nvb-dialog-editor__panel{display:block;width:100%}.nvb-dialog-trigger-container--left{justify-content:flex-start}.nvb-dialog-trigger-container--center{justify-content:center}.nvb-dialog-trigger-container--right{justify-content:flex-end}.nvb-dialog{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:2147483400}.nvb-dialog__backdrop{position:absolute;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:nvb-dialog-backdrop-in .18s ease-out}.nvb-dialog--closing .nvb-dialog__backdrop{animation:nvb-dialog-backdrop-in .18s ease-in reverse}.nvb-dialog__window{--nvb-floating-overlay-z-index: 2147483500;--nvb-page-margin-bottom: 0px;position:relative;z-index:1;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);box-shadow:var(--nvb-shadow-16);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;outline:0;animation:nvb-dialog-window-in .18s ease-out}.nvb-dialog--closing .nvb-dialog__window{animation:nvb-dialog-window-in .16s ease-in reverse}@keyframes nvb-dialog-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes nvb-dialog-window-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-dialog__backdrop,.nvb-dialog__window{animation:none}}.nvb-dialog__window--editor{width:100%!important;max-width:100%!important;min-height:140px;max-height:none;border-style:dashed;box-shadow:none}.nvb-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);flex-shrink:0}.nvb-dialog__heading{min-width:0;flex:1 1 auto}.nvb-dialog__title{margin:0;color:var(--color-neutral-700);line-height:22px;font-size:16px;font-weight:600}.nvb-dialog__heading p{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.nvb-dialog__header-template{margin-top:10px}.nvb-dialog__header-actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.nvb-dialog__close{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.nvb-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog__close span{font-size:18px}.nvb-dialog__body{position:relative;padding:16px 24px 24px;overflow:auto;flex:1 1 auto;min-height:0}.nvb-dialog__placeholder{position:relative;z-index:24;min-height:130px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-050);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--color-neutral-600);gap:6px}.nvb-dialog__placeholder--overlay{background:var(--color-primary-050);border-color:var(--color-primary-500);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 40%,transparent)}.nvb-dialog__placeholder span{font-size:30px}.nvb-dialog__placeholder p{margin:0;font-size:13px}.nvb-dialog__drop-overlay{position:absolute;inset:0;z-index:30}.nvb-dialog--fullscreen{align-items:stretch;justify-content:stretch}.nvb-dialog--fullscreen .nvb-dialog__window{border-radius:0;border:0;box-shadow:none;max-height:100vh}.nvb-dialog-trigger__button{min-height:var(--nvb-button-height-ms, 32px);min-width:96px;max-width:100%;border-radius:var(--nvb-button-radius, var(--radius-md));border:1px solid transparent;font-size:13px;line-height:20px;font-weight:600;padding:0 var(--nvb-button-padding-md, 12px);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nvb-dialog-trigger__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog-trigger__button:disabled{cursor:not-allowed;opacity:.65}.nvb-dialog-trigger__button--solid{background-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--color-neutral-000))}.nvb-dialog-trigger__button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black);border-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black)}.nvb-dialog-trigger__button--outline{background-color:transparent;border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__button--text{min-width:0;background-color:transparent;border-color:transparent;color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__icon{font-size:18px;line-height:1}.nvb-dialog-trigger__text{white-space:nowrap}.nvb-dialog-trigger__button--icon-right{flex-direction:row-reverse}.nvb-dialog-trigger__button--icon-only{width:34px;min-width:34px;padding:6px}.nvb-dialog-trigger-container:not(.nvb-dialog-trigger-container--left) .nvb-dialog-trigger__button{flex:0 0 auto}@media(max-width:767px){.nvb-dialog{align-items:stretch;justify-content:stretch}.nvb-dialog__window{width:100vw!important;max-width:100vw!important;min-height:100dvh;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}.nvb-dialog__close{border:0;border-radius:0;box-shadow:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PanelElement, selector: "panel-element", inputs: ["model", "column", "isMobileView", "rows"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogElement, isStandalone: true, selector: "dialog-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, rowsTemplate: { classPropertyName: "rowsTemplate", publicName: "rowsTemplate", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePressed()" } }, ngImport: i0, template: "@if (!isEditor() && headerTemplateCss()) {\r\n  <nvb-style-outlet\r\n    [cssText]=\"headerTemplateCss()\"\r\n    [renderInPlace]=\"true\"\r\n    [styleKey]=\"styleOutletKey()\"\r\n  ></nvb-style-outlet>\r\n}\r\n\r\n@if (isEditor()) {\r\n  <section class=\"nvb-dialog-editor\" data-testid=\"dialog-editor-root\">\r\n    @if (shouldRenderTriggerButton()) {\r\n      <div [class]=\"triggerContainerClass()\">\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"triggerButtonClass()\"\r\n          [ngStyle]=\"triggerButtonStyle()\"\r\n          (click)=\"onEditorTriggerPreviewClick($event)\"\r\n          tabindex=\"-1\"\r\n          data-testid=\"dialog-editor-trigger\"\r\n          [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n          [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        >\r\n          @if (hasTriggerIcon()) {\r\n            <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\r\n              triggerIcon()\r\n            }}</span>\r\n          }\r\n          @if (showTriggerText()) {\r\n            <span class=\"nvb-dialog-trigger__text\">\r\n              @if (triggerText()) {\r\n                {{ triggerText() | dynamicText: model() }}\r\n              } @else {\r\n                {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n              }\r\n            </span>\r\n          }\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <panel-element class=\"nvb-dialog-editor__panel\" [model]=\"$any(model())\" [column]=\"column()\">\r\n      @if (rowsTemplate(); as templateRef) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n        ></ng-container>\r\n      }\r\n    </panel-element>\r\n  </section>\r\n} @else {\r\n  @if (shouldRenderTriggerButton()) {\r\n    <div [class]=\"triggerContainerClass()\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"triggerButtonClass()\"\r\n        [disabled]=\"isInteractionLocked()\"\r\n        [ngStyle]=\"triggerButtonStyle()\"\r\n        (click)=\"onOpenClick($event)\"\r\n        data-testid=\"dialog-trigger\"\r\n        [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n      >\r\n        @if (hasTriggerIcon()) {\r\n          <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{ triggerIcon() }}</span>\r\n        }\r\n        @if (showTriggerText()) {\r\n          <span class=\"nvb-dialog-trigger__text\">\r\n            @if (triggerText()) {\r\n              {{ triggerText() | dynamicText: model() }}\r\n            } @else {\r\n              {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n            }\r\n          </span>\r\n        }\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (shouldRenderRuntimeDialog()) {\r\n    <div class=\"nvb-dialog\" [ngClass]=\"shellClass()\" data-testid=\"dialog-root\">\r\n      <div\r\n        class=\"nvb-dialog__backdrop\"\r\n        (click)=\"onBackdropClick()\"\r\n        data-testid=\"dialog-backdrop\"\r\n      ></div>\r\n\r\n      <section\r\n        class=\"nvb-dialog__window\"\r\n        [ngStyle]=\"dialogStyle()\"\r\n        data-testid=\"dialog-window\"\r\n        role=\"dialog\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-modal]=\"currentMode() === 'modal' || currentMode() === 'fullscreen' ? 'true' : null\"\r\n        [attr.aria-labelledby]=\"dialogTitleId()\"\r\n        [attr.aria-label]=\"dialogTitleId() ? null : dialogFallbackLabel()\"\r\n        [attr.aria-describedby]=\"dialogDescriptionId()\"\r\n      >\r\n        @if (hasHeaderContent()) {\r\n          <header class=\"nvb-dialog__header\">\r\n            <div class=\"nvb-dialog__heading\">\r\n              @if (model()?.label) {\r\n                <div class=\"nvb-dialog__title\" [id]=\"dialogTitleDomId()\">\r\n                  {{ model()?.label | dynamicText: model() }}\r\n                </div>\r\n              }\r\n              @if (model()?.description) {\r\n                <p [id]=\"dialogDescriptionDomId()\">\r\n                  {{ model()?.description | dynamicText: model() }}\r\n                </p>\r\n              }\r\n              @if (headerTemplateHtml()) {\r\n                <div\r\n                  class=\"nvb-dialog__header-template\"\r\n                  [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                  [innerHTML]=\"headerTemplateHtml()\"\r\n                  (click)=\"onHeaderTemplateClick($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"nvb-dialog__header-actions\">\r\n              @if (model()?.allowFullscreenToggle) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onToggleFullscreenClick($event)\"\r\n                  [title]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                  [attr.aria-label]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">{{\r\n                    currentMode() === 'fullscreen' ? 'fullscreen_exit' : 'fullscreen'\r\n                  }}</span>\r\n                </button>\r\n              }\r\n\r\n              @if (model()?.showCloseButton) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onCloseClick($event)\"\r\n                  data-testid=\"dialog-close\"\r\n                  [title]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                  [attr.aria-label]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">close</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </header>\r\n        }\r\n\r\n        <div class=\"nvb-dialog__body\" data-testid=\"dialog-body\">\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            }\r\n          }\r\n        </div>\r\n      </section>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%}.nvb-dialog-editor{position:relative;width:100%;min-height:160px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-card-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-2);padding:16px}.nvb-dialog-trigger-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;overflow:visible}.nvb-dialog-editor .nvb-dialog-trigger-container{margin-bottom:16px;padding-top:18px}.nvb-dialog-editor__panel{display:block;width:100%}.nvb-dialog-trigger-container--left{justify-content:flex-start}.nvb-dialog-trigger-container--center{justify-content:center}.nvb-dialog-trigger-container--right{justify-content:flex-end}.nvb-dialog{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:2147483400}.nvb-dialog__backdrop{position:absolute;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.nvb-dialog__window{--nvb-floating-overlay-z-index: 2147483500;--nvb-page-margin-bottom: 0px;position:relative;z-index:1;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);box-shadow:var(--nvb-shadow-16);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;outline:0}.nvb-dialog__window--editor{width:100%!important;max-width:100%!important;min-height:140px;max-height:none;border-style:dashed;box-shadow:none}.nvb-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);flex-shrink:0}.nvb-dialog__heading{min-width:0;flex:1 1 auto}.nvb-dialog__title{margin:0;color:var(--color-neutral-700);line-height:22px;font-size:16px;font-weight:600}.nvb-dialog__heading p{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.nvb-dialog__header-template{margin-top:10px}.nvb-dialog__header-actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.nvb-dialog__close{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.nvb-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog__close span{font-size:18px}.nvb-dialog__body{position:relative;padding:16px 24px 24px;overflow:auto;flex:1 1 auto;min-height:0}.nvb-dialog__placeholder{position:relative;z-index:24;min-height:130px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-050);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--color-neutral-600);gap:6px}.nvb-dialog__placeholder--overlay{background:var(--color-primary-050);border-color:var(--color-primary-500);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 40%,transparent)}.nvb-dialog__placeholder span{font-size:30px}.nvb-dialog__placeholder p{margin:0;font-size:13px}.nvb-dialog__drop-overlay{position:absolute;inset:0;z-index:30}.nvb-dialog--fullscreen{align-items:stretch;justify-content:stretch}.nvb-dialog--fullscreen .nvb-dialog__window{border-radius:0;border:0;box-shadow:none;max-height:100vh}.nvb-dialog-trigger__button{min-height:var(--nvb-button-height-ms, 32px);min-width:96px;max-width:100%;border-radius:var(--nvb-button-radius, var(--radius-md));border:1px solid transparent;font-size:13px;line-height:20px;font-weight:600;padding:0 var(--nvb-button-padding-md, 12px);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nvb-dialog-trigger__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog-trigger__button:disabled{cursor:not-allowed;opacity:.65}.nvb-dialog-trigger__button--solid{background-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--color-neutral-000))}.nvb-dialog-trigger__button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black);border-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black)}.nvb-dialog-trigger__button--outline{background-color:transparent;border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__button--text{min-width:0;background-color:transparent;border-color:transparent;color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__icon{font-size:18px;line-height:1}.nvb-dialog-trigger__text{white-space:nowrap}.nvb-dialog-trigger__button--icon-right{flex-direction:row-reverse}.nvb-dialog-trigger__button--icon-only{width:34px;min-width:34px;padding:6px}.nvb-dialog-trigger-container:not(.nvb-dialog-trigger-container--left) .nvb-dialog-trigger__button{flex:0 0 auto}@media(max-width:767px){.nvb-dialog{align-items:stretch;justify-content:stretch}.nvb-dialog__window{width:100vw!important;max-width:100vw!important;min-height:100dvh;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}.nvb-dialog__close{border:0;border-radius:0;box-shadow:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PanelElement, selector: "panel-element", inputs: ["model", "column", "isMobileView", "rows"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogElement, decorators: [{
             type: Component,
@@ -34336,7 +34336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         UiTranslatePipe,
                         PanelElement,
                         NvbStyleOutlet,
-                    ], template: "@if (!isEditor() && headerTemplateCss()) {\r\n  <nvb-style-outlet\r\n    [cssText]=\"headerTemplateCss()\"\r\n    [renderInPlace]=\"true\"\r\n    [styleKey]=\"styleOutletKey()\"\r\n  ></nvb-style-outlet>\r\n}\r\n\r\n@if (isEditor()) {\r\n  <section class=\"nvb-dialog-editor\" data-testid=\"dialog-editor-root\">\r\n    @if (shouldRenderTriggerButton()) {\r\n      <div [class]=\"triggerContainerClass()\">\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"triggerButtonClass()\"\r\n          [ngStyle]=\"triggerButtonStyle()\"\r\n          (click)=\"onEditorTriggerPreviewClick($event)\"\r\n          tabindex=\"-1\"\r\n          data-testid=\"dialog-editor-trigger\"\r\n          [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n          [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        >\r\n          @if (hasTriggerIcon()) {\r\n            <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\r\n              triggerIcon()\r\n            }}</span>\r\n          }\r\n          @if (showTriggerText()) {\r\n            <span class=\"nvb-dialog-trigger__text\">\r\n              @if (triggerText()) {\r\n                {{ triggerText() | dynamicText: model() }}\r\n              } @else {\r\n                {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n              }\r\n            </span>\r\n          }\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <panel-element class=\"nvb-dialog-editor__panel\" [model]=\"$any(model())\" [column]=\"column()\">\r\n      @if (rowsTemplate(); as templateRef) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n        ></ng-container>\r\n      }\r\n    </panel-element>\r\n  </section>\r\n} @else {\r\n  @if (shouldRenderTriggerButton()) {\r\n    <div [class]=\"triggerContainerClass()\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"triggerButtonClass()\"\r\n        [disabled]=\"isInteractionLocked()\"\r\n        [ngStyle]=\"triggerButtonStyle()\"\r\n        (click)=\"onOpenClick($event)\"\r\n        data-testid=\"dialog-trigger\"\r\n        [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n      >\r\n        @if (hasTriggerIcon()) {\r\n          <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{ triggerIcon() }}</span>\r\n        }\r\n        @if (showTriggerText()) {\r\n          <span class=\"nvb-dialog-trigger__text\">\r\n            @if (triggerText()) {\r\n              {{ triggerText() | dynamicText: model() }}\r\n            } @else {\r\n              {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n            }\r\n          </span>\r\n        }\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (shouldRenderRuntimeDialog()) {\r\n    <div class=\"nvb-dialog\" [ngClass]=\"shellClass()\" data-testid=\"dialog-root\">\r\n      <div\r\n        class=\"nvb-dialog__backdrop\"\r\n        (click)=\"onBackdropClick()\"\r\n        data-testid=\"dialog-backdrop\"\r\n      ></div>\r\n\r\n      <section\r\n        class=\"nvb-dialog__window\"\r\n        [ngStyle]=\"dialogStyle()\"\r\n        data-testid=\"dialog-window\"\r\n        role=\"dialog\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-modal]=\"currentMode() === 'modal' || currentMode() === 'fullscreen' ? 'true' : null\"\r\n        [attr.aria-labelledby]=\"dialogTitleId()\"\r\n        [attr.aria-label]=\"dialogTitleId() ? null : dialogFallbackLabel()\"\r\n        [attr.aria-describedby]=\"dialogDescriptionId()\"\r\n      >\r\n        @if (hasHeaderContent()) {\r\n          <header class=\"nvb-dialog__header\">\r\n            <div class=\"nvb-dialog__heading\">\r\n              @if (model()?.label) {\r\n                <div class=\"nvb-dialog__title\" [id]=\"dialogTitleDomId()\">\r\n                  {{ model()?.label | dynamicText: model() }}\r\n                </div>\r\n              }\r\n              @if (model()?.description) {\r\n                <p [id]=\"dialogDescriptionDomId()\">\r\n                  {{ model()?.description | dynamicText: model() }}\r\n                </p>\r\n              }\r\n              @if (headerTemplateHtml()) {\r\n                <div\r\n                  class=\"nvb-dialog__header-template\"\r\n                  [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                  [innerHTML]=\"headerTemplateHtml()\"\r\n                  (click)=\"onHeaderTemplateClick($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"nvb-dialog__header-actions\">\r\n              @if (model()?.allowFullscreenToggle) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onToggleFullscreenClick($event)\"\r\n                  [title]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                  [attr.aria-label]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">{{\r\n                    currentMode() === 'fullscreen' ? 'fullscreen_exit' : 'fullscreen'\r\n                  }}</span>\r\n                </button>\r\n              }\r\n\r\n              @if (model()?.showCloseButton) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onCloseClick($event)\"\r\n                  data-testid=\"dialog-close\"\r\n                  [title]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                  [attr.aria-label]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">close</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </header>\r\n        }\r\n\r\n        <div class=\"nvb-dialog__body\" data-testid=\"dialog-body\">\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            }\r\n          }\r\n        </div>\r\n      </section>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%}.nvb-dialog-editor{position:relative;width:100%;min-height:160px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-card-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-2);padding:16px}.nvb-dialog-trigger-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;overflow:visible}.nvb-dialog-editor .nvb-dialog-trigger-container{margin-bottom:16px;padding-top:18px}.nvb-dialog-editor__panel{display:block;width:100%}.nvb-dialog-trigger-container--left{justify-content:flex-start}.nvb-dialog-trigger-container--center{justify-content:center}.nvb-dialog-trigger-container--right{justify-content:flex-end}.nvb-dialog{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:2147483400}.nvb-dialog__backdrop{position:absolute;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:nvb-dialog-backdrop-in .18s ease-out}.nvb-dialog--closing .nvb-dialog__backdrop{animation:nvb-dialog-backdrop-in .18s ease-in reverse}.nvb-dialog__window{--nvb-floating-overlay-z-index: 2147483500;--nvb-page-margin-bottom: 0px;position:relative;z-index:1;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);box-shadow:var(--nvb-shadow-16);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;outline:0;animation:nvb-dialog-window-in .18s ease-out}.nvb-dialog--closing .nvb-dialog__window{animation:nvb-dialog-window-in .16s ease-in reverse}@keyframes nvb-dialog-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes nvb-dialog-window-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.nvb-dialog__backdrop,.nvb-dialog__window{animation:none}}.nvb-dialog__window--editor{width:100%!important;max-width:100%!important;min-height:140px;max-height:none;border-style:dashed;box-shadow:none}.nvb-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);flex-shrink:0}.nvb-dialog__heading{min-width:0;flex:1 1 auto}.nvb-dialog__title{margin:0;color:var(--color-neutral-700);line-height:22px;font-size:16px;font-weight:600}.nvb-dialog__heading p{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.nvb-dialog__header-template{margin-top:10px}.nvb-dialog__header-actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.nvb-dialog__close{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.nvb-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog__close span{font-size:18px}.nvb-dialog__body{position:relative;padding:16px 24px 24px;overflow:auto;flex:1 1 auto;min-height:0}.nvb-dialog__placeholder{position:relative;z-index:24;min-height:130px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-050);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--color-neutral-600);gap:6px}.nvb-dialog__placeholder--overlay{background:var(--color-primary-050);border-color:var(--color-primary-500);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 40%,transparent)}.nvb-dialog__placeholder span{font-size:30px}.nvb-dialog__placeholder p{margin:0;font-size:13px}.nvb-dialog__drop-overlay{position:absolute;inset:0;z-index:30}.nvb-dialog--fullscreen{align-items:stretch;justify-content:stretch}.nvb-dialog--fullscreen .nvb-dialog__window{border-radius:0;border:0;box-shadow:none;max-height:100vh}.nvb-dialog-trigger__button{min-height:var(--nvb-button-height-ms, 32px);min-width:96px;max-width:100%;border-radius:var(--nvb-button-radius, var(--radius-md));border:1px solid transparent;font-size:13px;line-height:20px;font-weight:600;padding:0 var(--nvb-button-padding-md, 12px);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nvb-dialog-trigger__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog-trigger__button:disabled{cursor:not-allowed;opacity:.65}.nvb-dialog-trigger__button--solid{background-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--color-neutral-000))}.nvb-dialog-trigger__button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black);border-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black)}.nvb-dialog-trigger__button--outline{background-color:transparent;border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__button--text{min-width:0;background-color:transparent;border-color:transparent;color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__icon{font-size:18px;line-height:1}.nvb-dialog-trigger__text{white-space:nowrap}.nvb-dialog-trigger__button--icon-right{flex-direction:row-reverse}.nvb-dialog-trigger__button--icon-only{width:34px;min-width:34px;padding:6px}.nvb-dialog-trigger-container:not(.nvb-dialog-trigger-container--left) .nvb-dialog-trigger__button{flex:0 0 auto}@media(max-width:767px){.nvb-dialog{align-items:stretch;justify-content:stretch}.nvb-dialog__window{width:100vw!important;max-width:100vw!important;min-height:100dvh;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}.nvb-dialog__close{border:0;border-radius:0;box-shadow:none}}\n"] }]
+                    ], template: "@if (!isEditor() && headerTemplateCss()) {\r\n  <nvb-style-outlet\r\n    [cssText]=\"headerTemplateCss()\"\r\n    [renderInPlace]=\"true\"\r\n    [styleKey]=\"styleOutletKey()\"\r\n  ></nvb-style-outlet>\r\n}\r\n\r\n@if (isEditor()) {\r\n  <section class=\"nvb-dialog-editor\" data-testid=\"dialog-editor-root\">\r\n    @if (shouldRenderTriggerButton()) {\r\n      <div [class]=\"triggerContainerClass()\">\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"triggerButtonClass()\"\r\n          [ngStyle]=\"triggerButtonStyle()\"\r\n          (click)=\"onEditorTriggerPreviewClick($event)\"\r\n          tabindex=\"-1\"\r\n          data-testid=\"dialog-editor-trigger\"\r\n          [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n          [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        >\r\n          @if (hasTriggerIcon()) {\r\n            <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{\r\n              triggerIcon()\r\n            }}</span>\r\n          }\r\n          @if (showTriggerText()) {\r\n            <span class=\"nvb-dialog-trigger__text\">\r\n              @if (triggerText()) {\r\n                {{ triggerText() | dynamicText: model() }}\r\n              } @else {\r\n                {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n              }\r\n            </span>\r\n          }\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <panel-element class=\"nvb-dialog-editor__panel\" [model]=\"$any(model())\" [column]=\"column()\">\r\n      @if (rowsTemplate(); as templateRef) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n        ></ng-container>\r\n      }\r\n    </panel-element>\r\n  </section>\r\n} @else {\r\n  @if (shouldRenderTriggerButton()) {\r\n    <div [class]=\"triggerContainerClass()\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"triggerButtonClass()\"\r\n        [disabled]=\"isInteractionLocked()\"\r\n        [ngStyle]=\"triggerButtonStyle()\"\r\n        (click)=\"onOpenClick($event)\"\r\n        data-testid=\"dialog-trigger\"\r\n        [attr.aria-label]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n        [attr.title]=\"triggerText() || ('dialog.trigger.open' | uiT: 'Open dialog')\"\r\n      >\r\n        @if (hasTriggerIcon()) {\r\n          <span class=\"nvb-dialog-trigger__icon material-symbols-outlined\">{{ triggerIcon() }}</span>\r\n        }\r\n        @if (showTriggerText()) {\r\n          <span class=\"nvb-dialog-trigger__text\">\r\n            @if (triggerText()) {\r\n              {{ triggerText() | dynamicText: model() }}\r\n            } @else {\r\n              {{ 'dialog.trigger.open' | uiT: 'Open dialog' }}\r\n            }\r\n          </span>\r\n        }\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (shouldRenderRuntimeDialog()) {\r\n    <div class=\"nvb-dialog\" [ngClass]=\"shellClass()\" data-testid=\"dialog-root\">\r\n      <div\r\n        class=\"nvb-dialog__backdrop\"\r\n        (click)=\"onBackdropClick()\"\r\n        data-testid=\"dialog-backdrop\"\r\n      ></div>\r\n\r\n      <section\r\n        class=\"nvb-dialog__window\"\r\n        [ngStyle]=\"dialogStyle()\"\r\n        data-testid=\"dialog-window\"\r\n        role=\"dialog\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-modal]=\"currentMode() === 'modal' || currentMode() === 'fullscreen' ? 'true' : null\"\r\n        [attr.aria-labelledby]=\"dialogTitleId()\"\r\n        [attr.aria-label]=\"dialogTitleId() ? null : dialogFallbackLabel()\"\r\n        [attr.aria-describedby]=\"dialogDescriptionId()\"\r\n      >\r\n        @if (hasHeaderContent()) {\r\n          <header class=\"nvb-dialog__header\">\r\n            <div class=\"nvb-dialog__heading\">\r\n              @if (model()?.label) {\r\n                <div class=\"nvb-dialog__title\" [id]=\"dialogTitleDomId()\">\r\n                  {{ model()?.label | dynamicText: model() }}\r\n                </div>\r\n              }\r\n              @if (model()?.description) {\r\n                <p [id]=\"dialogDescriptionDomId()\">\r\n                  {{ model()?.description | dynamicText: model() }}\r\n                </p>\r\n              }\r\n              @if (headerTemplateHtml()) {\r\n                <div\r\n                  class=\"nvb-dialog__header-template\"\r\n                  [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                  [innerHTML]=\"headerTemplateHtml()\"\r\n                  (click)=\"onHeaderTemplateClick($event)\"\r\n                ></div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"nvb-dialog__header-actions\">\r\n              @if (model()?.allowFullscreenToggle) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onToggleFullscreenClick($event)\"\r\n                  [title]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                  [attr.aria-label]=\"\r\n                    currentMode() === 'fullscreen'\r\n                      ? ('dialog.exitFullscreen' | uiT: 'Exit fullscreen')\r\n                      : ('dialog.enterFullscreen' | uiT: 'Open fullscreen')\r\n                  \"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">{{\r\n                    currentMode() === 'fullscreen' ? 'fullscreen_exit' : 'fullscreen'\r\n                  }}</span>\r\n                </button>\r\n              }\r\n\r\n              @if (model()?.showCloseButton) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-dialog__close\"\r\n                  (click)=\"onCloseClick($event)\"\r\n                  data-testid=\"dialog-close\"\r\n                  [title]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                  [attr.aria-label]=\"'dialog.close' | uiT: 'Close dialog'\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">close</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </header>\r\n        }\r\n\r\n        <div class=\"nvb-dialog__body\" data-testid=\"dialog-body\">\r\n          @if (hasContentRows()) {\r\n            @if (rowsTemplate(); as templateRef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"templateRef; context: buildRowsTemplateContext()\"\r\n              ></ng-container>\r\n            }\r\n          }\r\n        </div>\r\n      </section>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%}.nvb-dialog-editor{position:relative;width:100%;min-height:160px;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-card-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-2);padding:16px}.nvb-dialog-trigger-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;overflow:visible}.nvb-dialog-editor .nvb-dialog-trigger-container{margin-bottom:16px;padding-top:18px}.nvb-dialog-editor__panel{display:block;width:100%}.nvb-dialog-trigger-container--left{justify-content:flex-start}.nvb-dialog-trigger-container--center{justify-content:center}.nvb-dialog-trigger-container--right{justify-content:flex-end}.nvb-dialog{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:2147483400}.nvb-dialog__backdrop{position:absolute;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.nvb-dialog__window{--nvb-floating-overlay-z-index: 2147483500;--nvb-page-margin-bottom: 0px;position:relative;z-index:1;background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);box-shadow:var(--nvb-shadow-16);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;outline:0}.nvb-dialog__window--editor{width:100%!important;max-width:100%!important;min-height:140px;max-height:none;border-style:dashed;box-shadow:none}.nvb-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);flex-shrink:0}.nvb-dialog__heading{min-width:0;flex:1 1 auto}.nvb-dialog__title{margin:0;color:var(--color-neutral-700);line-height:22px;font-size:16px;font-weight:600}.nvb-dialog__heading p{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.nvb-dialog__header-template{margin-top:10px}.nvb-dialog__header-actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.nvb-dialog__close{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.nvb-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.nvb-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog__close span{font-size:18px}.nvb-dialog__body{position:relative;padding:16px 24px 24px;overflow:auto;flex:1 1 auto;min-height:0}.nvb-dialog__placeholder{position:relative;z-index:24;min-height:130px;border:1px dashed var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-050);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--color-neutral-600);gap:6px}.nvb-dialog__placeholder--overlay{background:var(--color-primary-050);border-color:var(--color-primary-500);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-primary-500) 40%,transparent)}.nvb-dialog__placeholder span{font-size:30px}.nvb-dialog__placeholder p{margin:0;font-size:13px}.nvb-dialog__drop-overlay{position:absolute;inset:0;z-index:30}.nvb-dialog--fullscreen{align-items:stretch;justify-content:stretch}.nvb-dialog--fullscreen .nvb-dialog__window{border-radius:0;border:0;box-shadow:none;max-height:100vh}.nvb-dialog-trigger__button{min-height:var(--nvb-button-height-ms, 32px);min-width:96px;max-width:100%;border-radius:var(--nvb-button-radius, var(--radius-md));border:1px solid transparent;font-size:13px;line-height:20px;font-weight:600;padding:0 var(--nvb-button-padding-md, 12px);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nvb-dialog-trigger__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-dialog-trigger__button:disabled{cursor:not-allowed;opacity:.65}.nvb-dialog-trigger__button--solid{background-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--color-neutral-000))}.nvb-dialog-trigger__button--solid:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black);border-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 88%,black)}.nvb-dialog-trigger__button--outline{background-color:transparent;border-color:var(--nvb-dialog-trigger-color, var(--color-primary-600));color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--outline:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__button--text{min-width:0;background-color:transparent;border-color:transparent;color:var(--nvb-dialog-trigger-text-color, var(--nvb-dialog-trigger-color, var(--color-primary-600)))}.nvb-dialog-trigger__button--text:hover:not(:disabled){background-color:color-mix(in oklab,var(--nvb-dialog-trigger-color, var(--color-primary-600)) 8%,white)}.nvb-dialog-trigger__icon{font-size:18px;line-height:1}.nvb-dialog-trigger__text{white-space:nowrap}.nvb-dialog-trigger__button--icon-right{flex-direction:row-reverse}.nvb-dialog-trigger__button--icon-only{width:34px;min-width:34px;padding:6px}.nvb-dialog-trigger-container:not(.nvb-dialog-trigger-container--left) .nvb-dialog-trigger__button{flex:0 0 auto}@media(max-width:767px){.nvb-dialog{align-items:stretch;justify-content:stretch}.nvb-dialog__window{width:100vw!important;max-width:100vw!important;min-height:100dvh;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}.nvb-dialog__close{border:0;border-radius:0;box-shadow:none}}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], rowsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsTemplate", required: false }] }], templateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContext", required: false }] }], isMobileView: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileView", required: false }] }], onEscapePressed: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -42881,7 +42881,7 @@ class MultiSelectElement {
         this.dropdownLayoutFrame = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiSelectElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiSelectElement, isStandalone: true, selector: "multi-select-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:scroll": "onDocumentScroll()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"multi-select-container\"\r\n      [class.multi-select-container--open]=\"isOpen()\"\r\n      [class.multi-select-container--loading]=\"dataSourceLoading()\"\r\n      #dropdownContainer\r\n      data-testid=\"multi-select-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div\r\n        class=\"input-wrapper\"\r\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\r\n        [class.input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\r\n        [class.input-wrapper--loading]=\"dataSourceLoading()\"\r\n        #selectButton\r\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        (click)=\"toggleDropdown()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (blur)=\"onTriggerBlur()\"\r\n        data-testid=\"multi-select-element-trigger\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\r\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\r\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      >\r\n        <span\r\n          class=\"select-value\"\r\n          [class.select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\r\n        >\r\n          {{\r\n            dataSourceLoading()\r\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\r\n              : displayValue()\r\n          }}\r\n        </span>\r\n        <div class=\"select-actions\">\r\n          @if (dataSourceLoading()) {\r\n            <span class=\"select-loading-spinner\" aria-hidden=\"true\"></span>\r\n          } @else if (hasValue()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"clear-button\"\r\n              (click)=\"clearSelection($event)\"\r\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\r\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\r\n              data-testid=\"multi-select-element-clear\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          }\r\n          @if (!dataSourceLoading()) {\r\n            <span class=\"material-symbols-outlined select-arrow\" [class.open]=\"isOpen()\"\r\n              >keyboard_arrow_down</span\r\n            >\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div\r\n          class=\"dropdown\"\r\n          [class.dropdown-top]=\"dropdownPosition() === 'top'\"\r\n          #dropdownPanel\r\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\r\n          [style.left.px]=\"dropdownLeft()\"\r\n          [style.top.px]=\"dropdownTop()\"\r\n          [style.min-width.px]=\"dropdownMinWidth()\"\r\n        >\r\n          @if (customDropdownCss()) {\r\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\r\n          }\r\n          @if (model().showSearch !== false) {\r\n            <div class=\"search-container\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [placeholder]=\"\r\n                  model().placeholder\r\n                    ? (model().placeholder | dynamicText: model())\r\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\r\n                \"\r\n                [value]=\"searchTerm()\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\r\n                data-testid=\"multi-select-element-search\"\r\n              />\r\n              @if (searchTerm()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"search-clear-button\"\r\n                  (click)=\"clearSearch($event)\"\r\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  data-testid=\"multi-select-element-search-clear\"\r\n                >\r\n                  x\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <div\r\n            class=\"options-container\"\r\n            [id]=\"dropdownOptionsId\"\r\n            data-testid=\"multi-select-element-options\"\r\n            role=\"listbox\"\r\n            aria-multiselectable=\"true\"\r\n          >\r\n            @if (hasCustomTemplate()) {\r\n              <div\r\n                class=\"options-container__custom\"\r\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\r\n                (click)=\"onCustomOptionsClick($event)\"\r\n                [innerHTML]=\"customDropdownHtml()\"\r\n              ></div>\r\n            } @else if (usesGroupedOptions()) {\r\n              @for (group of filteredOptions(); track group.label) {\r\n                <div class=\"option-group\">\r\n                  <label\r\n                    class=\"group-label group-label--selectable\"\r\n                    (click)=\"toggleGroup(group, $event)\"\r\n                  >\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"nvb-control__checkbox-input option-checkbox\"\r\n                      [checked]=\"isGroupSelected(group)\"\r\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      [attr.aria-label]=\"group.label\"\r\n                    />\r\n                    <span>{{ group.label }}</span>\r\n                  </label>\r\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\r\n                    <div\r\n                      class=\"option\"\r\n                      [class.selected]=\"isSelected(item.value)\"\r\n                      (click)=\"toggleOption(item.value, $event)\"\r\n                      role=\"option\"\r\n                      [attr.aria-selected]=\"isSelected(item.value)\"\r\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input option-checkbox\"\r\n                        [checked]=\"isSelected(item.value)\"\r\n                        [attr.data-testid]=\"\r\n                          resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\r\n                        \"\r\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                        tabindex=\"-1\"\r\n                        aria-hidden=\"true\"\r\n                      />\r\n                      <span>{{ item.label }}</span>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            } @else {\r\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\r\n                <div\r\n                  class=\"option\"\r\n                  [class.selected]=\"isSelected(option.value)\"\r\n                  (click)=\"toggleOption(option.value, $event)\"\r\n                  role=\"option\"\r\n                  [attr.aria-selected]=\"isSelected(option.value)\"\r\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input option-checkbox\"\r\n                    [checked]=\"isSelected(option.value)\"\r\n                    [attr.data-testid]=\"\r\n                      resolveOptionTestId(option.value, optionIndex) + '-checkbox'\r\n                    \"\r\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                    tabindex=\"-1\"\r\n                    aria-hidden=\"true\"\r\n                  />\r\n                  <span>{{ option.label }}</span>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\r\n              <div class=\"no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [".multi-select-container{position:relative;width:100%;overflow:visible}.multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.multi-select-container--loading{cursor:progress}.select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.select-value--placeholder{color:var(--color-neutral-500)}.select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.clear-button .material-symbols-outlined{font-size:16px;line-height:1}.clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.select-arrow{font-size:16px;transition:transform .2s;color:var(--color-neutral-500)}.select-arrow.open{transform:rotate(180deg)}.dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--color-neutral-000) 92%,var(--color-neutral-050));border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,var(--color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden;animation:nvb-multi-select-dropdown-in .14s ease-out}.dropdown.dropdown-top{transform:translateY(calc(-100% - 4px));animation-name:nvb-multi-select-dropdown-in-top}@keyframes nvb-multi-select-dropdown-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes nvb-multi-select-dropdown-in-top{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(calc(-100% - 4px)) scale(1)}}@media(prefers-reduced-motion:reduce){.dropdown{animation:none}}.search-container{padding:0 0 4px;border-bottom:1px solid var(--color-neutral-200);background:transparent;position:relative}.search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--color-neutral-300);background-color:color-mix(in oklab,var(--color-neutral-000) 90%,var(--color-neutral-050));color:var(--color-neutral-800)}.search-container .nvb-control__text-input::placeholder{color:var(--color-neutral-500)}.search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.search-clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}.option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}.option-checkbox{pointer-events:none;margin:0}.option__content{min-width:0}.option-group .group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--color-neutral-200)}.option-group .group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.option-group .group-label--selectable .option-checkbox{pointer-events:auto}.option-group .group-label:first-child{border-top:none}.no-results{padding:12px;text-align:center;color:var(--color-neutral-500);font-size:14px}.input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--color-neutral-300) 88%,var(--color-neutral-100));background:color-mix(in oklab,var(--color-neutral-100) 76%,var(--color-neutral-000));color:var(--color-neutral-500)}.input-wrapper--disabled .select-value,.input-wrapper--disabled .select-arrow,.input-wrapper--disabled .clear-button{color:var(--color-neutral-500)}.input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;animation:nvb-multi-select-loading-spin .8s linear infinite}.empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%)}:host ::ng-deep .options-container__custom .option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s}:host ::ng-deep .options-container__custom .option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option--selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiSelectElement, isStandalone: true, selector: "multi-select-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:scroll": "onDocumentScroll()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], ngImport: i0, template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"multi-select-container\"\r\n      [class.multi-select-container--open]=\"isOpen()\"\r\n      [class.multi-select-container--loading]=\"dataSourceLoading()\"\r\n      #dropdownContainer\r\n      data-testid=\"multi-select-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div\r\n        class=\"input-wrapper\"\r\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\r\n        [class.input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\r\n        [class.input-wrapper--loading]=\"dataSourceLoading()\"\r\n        #selectButton\r\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        (click)=\"toggleDropdown()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (blur)=\"onTriggerBlur()\"\r\n        data-testid=\"multi-select-element-trigger\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\r\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\r\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      >\r\n        <span\r\n          class=\"select-value\"\r\n          [class.select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\r\n        >\r\n          {{\r\n            dataSourceLoading()\r\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\r\n              : displayValue()\r\n          }}\r\n        </span>\r\n        <div class=\"select-actions\">\r\n          @if (dataSourceLoading()) {\r\n            <span class=\"select-loading-spinner\" aria-hidden=\"true\"></span>\r\n          } @else if (hasValue()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"clear-button\"\r\n              (click)=\"clearSelection($event)\"\r\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\r\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\r\n              data-testid=\"multi-select-element-clear\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          }\r\n          @if (!dataSourceLoading()) {\r\n            <span class=\"material-symbols-outlined select-arrow\" [class.open]=\"isOpen()\"\r\n              >keyboard_arrow_down</span\r\n            >\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div\r\n          class=\"dropdown\"\r\n          [class.dropdown-top]=\"dropdownPosition() === 'top'\"\r\n          #dropdownPanel\r\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\r\n          [style.left.px]=\"dropdownLeft()\"\r\n          [style.top.px]=\"dropdownTop()\"\r\n          [style.min-width.px]=\"dropdownMinWidth()\"\r\n        >\r\n          @if (customDropdownCss()) {\r\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\r\n          }\r\n          @if (model().showSearch !== false) {\r\n            <div class=\"search-container\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [placeholder]=\"\r\n                  model().placeholder\r\n                    ? (model().placeholder | dynamicText: model())\r\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\r\n                \"\r\n                [value]=\"searchTerm()\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\r\n                data-testid=\"multi-select-element-search\"\r\n              />\r\n              @if (searchTerm()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"search-clear-button\"\r\n                  (click)=\"clearSearch($event)\"\r\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  data-testid=\"multi-select-element-search-clear\"\r\n                >\r\n                  x\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <div\r\n            class=\"options-container\"\r\n            [id]=\"dropdownOptionsId\"\r\n            data-testid=\"multi-select-element-options\"\r\n            role=\"listbox\"\r\n            aria-multiselectable=\"true\"\r\n          >\r\n            @if (hasCustomTemplate()) {\r\n              <div\r\n                class=\"options-container__custom\"\r\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\r\n                (click)=\"onCustomOptionsClick($event)\"\r\n                [innerHTML]=\"customDropdownHtml()\"\r\n              ></div>\r\n            } @else if (usesGroupedOptions()) {\r\n              @for (group of filteredOptions(); track group.label) {\r\n                <div class=\"option-group\">\r\n                  <label\r\n                    class=\"group-label group-label--selectable\"\r\n                    (click)=\"toggleGroup(group, $event)\"\r\n                  >\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"nvb-control__checkbox-input option-checkbox\"\r\n                      [checked]=\"isGroupSelected(group)\"\r\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      [attr.aria-label]=\"group.label\"\r\n                    />\r\n                    <span>{{ group.label }}</span>\r\n                  </label>\r\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\r\n                    <div\r\n                      class=\"option\"\r\n                      [class.selected]=\"isSelected(item.value)\"\r\n                      (click)=\"toggleOption(item.value, $event)\"\r\n                      role=\"option\"\r\n                      [attr.aria-selected]=\"isSelected(item.value)\"\r\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input option-checkbox\"\r\n                        [checked]=\"isSelected(item.value)\"\r\n                        [attr.data-testid]=\"\r\n                          resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\r\n                        \"\r\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                        tabindex=\"-1\"\r\n                        aria-hidden=\"true\"\r\n                      />\r\n                      <span>{{ item.label }}</span>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            } @else {\r\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\r\n                <div\r\n                  class=\"option\"\r\n                  [class.selected]=\"isSelected(option.value)\"\r\n                  (click)=\"toggleOption(option.value, $event)\"\r\n                  role=\"option\"\r\n                  [attr.aria-selected]=\"isSelected(option.value)\"\r\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input option-checkbox\"\r\n                    [checked]=\"isSelected(option.value)\"\r\n                    [attr.data-testid]=\"\r\n                      resolveOptionTestId(option.value, optionIndex) + '-checkbox'\r\n                    \"\r\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                    tabindex=\"-1\"\r\n                    aria-hidden=\"true\"\r\n                  />\r\n                  <span>{{ option.label }}</span>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\r\n              <div class=\"no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [".multi-select-container{position:relative;width:100%;overflow:visible}.multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.multi-select-container--loading{cursor:progress}.select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.select-value--placeholder{color:var(--color-neutral-500)}.select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.clear-button .material-symbols-outlined{font-size:16px;line-height:1}.clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.select-arrow{font-size:16px;transition:transform .2s;color:var(--color-neutral-500)}.select-arrow.open{transform:rotate(180deg)}.dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--color-neutral-000) 92%,var(--color-neutral-050));border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,var(--color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.dropdown.dropdown-top{transform:translateY(calc(-100% - 4px))}.search-container{padding:0 0 4px;border-bottom:1px solid var(--color-neutral-200);background:transparent;position:relative}.search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--color-neutral-300);background-color:color-mix(in oklab,var(--color-neutral-000) 90%,var(--color-neutral-050));color:var(--color-neutral-800)}.search-container .nvb-control__text-input::placeholder{color:var(--color-neutral-500)}.search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.search-clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}.option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}.option-checkbox{pointer-events:none;margin:0}.option__content{min-width:0}.option-group .group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--color-neutral-200)}.option-group .group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.option-group .group-label--selectable .option-checkbox{pointer-events:auto}.option-group .group-label:first-child{border-top:none}.no-results{padding:12px;text-align:center;color:var(--color-neutral-500);font-size:14px}.input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--color-neutral-300) 88%,var(--color-neutral-100));background:color-mix(in oklab,var(--color-neutral-100) 76%,var(--color-neutral-000));color:var(--color-neutral-500)}.input-wrapper--disabled .select-value,.input-wrapper--disabled .select-arrow,.input-wrapper--disabled .clear-button{color:var(--color-neutral-500)}.input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;animation:nvb-multi-select-loading-spin .8s linear infinite}.empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%)}:host ::ng-deep .options-container__custom .option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s}:host ::ng-deep .options-container__custom .option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option--selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiSelectElement, decorators: [{
             type: Component,
@@ -42892,7 +42892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         DynamicTextPipe,
                         NvbStyleOutlet,
                         UiTranslatePipe,
-                    ], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"multi-select-container\"\r\n      [class.multi-select-container--open]=\"isOpen()\"\r\n      [class.multi-select-container--loading]=\"dataSourceLoading()\"\r\n      #dropdownContainer\r\n      data-testid=\"multi-select-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div\r\n        class=\"input-wrapper\"\r\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\r\n        [class.input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\r\n        [class.input-wrapper--loading]=\"dataSourceLoading()\"\r\n        #selectButton\r\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        (click)=\"toggleDropdown()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (blur)=\"onTriggerBlur()\"\r\n        data-testid=\"multi-select-element-trigger\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\r\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\r\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      >\r\n        <span\r\n          class=\"select-value\"\r\n          [class.select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\r\n        >\r\n          {{\r\n            dataSourceLoading()\r\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\r\n              : displayValue()\r\n          }}\r\n        </span>\r\n        <div class=\"select-actions\">\r\n          @if (dataSourceLoading()) {\r\n            <span class=\"select-loading-spinner\" aria-hidden=\"true\"></span>\r\n          } @else if (hasValue()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"clear-button\"\r\n              (click)=\"clearSelection($event)\"\r\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\r\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\r\n              data-testid=\"multi-select-element-clear\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          }\r\n          @if (!dataSourceLoading()) {\r\n            <span class=\"material-symbols-outlined select-arrow\" [class.open]=\"isOpen()\"\r\n              >keyboard_arrow_down</span\r\n            >\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div\r\n          class=\"dropdown\"\r\n          [class.dropdown-top]=\"dropdownPosition() === 'top'\"\r\n          #dropdownPanel\r\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\r\n          [style.left.px]=\"dropdownLeft()\"\r\n          [style.top.px]=\"dropdownTop()\"\r\n          [style.min-width.px]=\"dropdownMinWidth()\"\r\n        >\r\n          @if (customDropdownCss()) {\r\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\r\n          }\r\n          @if (model().showSearch !== false) {\r\n            <div class=\"search-container\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [placeholder]=\"\r\n                  model().placeholder\r\n                    ? (model().placeholder | dynamicText: model())\r\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\r\n                \"\r\n                [value]=\"searchTerm()\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\r\n                data-testid=\"multi-select-element-search\"\r\n              />\r\n              @if (searchTerm()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"search-clear-button\"\r\n                  (click)=\"clearSearch($event)\"\r\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  data-testid=\"multi-select-element-search-clear\"\r\n                >\r\n                  x\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <div\r\n            class=\"options-container\"\r\n            [id]=\"dropdownOptionsId\"\r\n            data-testid=\"multi-select-element-options\"\r\n            role=\"listbox\"\r\n            aria-multiselectable=\"true\"\r\n          >\r\n            @if (hasCustomTemplate()) {\r\n              <div\r\n                class=\"options-container__custom\"\r\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\r\n                (click)=\"onCustomOptionsClick($event)\"\r\n                [innerHTML]=\"customDropdownHtml()\"\r\n              ></div>\r\n            } @else if (usesGroupedOptions()) {\r\n              @for (group of filteredOptions(); track group.label) {\r\n                <div class=\"option-group\">\r\n                  <label\r\n                    class=\"group-label group-label--selectable\"\r\n                    (click)=\"toggleGroup(group, $event)\"\r\n                  >\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"nvb-control__checkbox-input option-checkbox\"\r\n                      [checked]=\"isGroupSelected(group)\"\r\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      [attr.aria-label]=\"group.label\"\r\n                    />\r\n                    <span>{{ group.label }}</span>\r\n                  </label>\r\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\r\n                    <div\r\n                      class=\"option\"\r\n                      [class.selected]=\"isSelected(item.value)\"\r\n                      (click)=\"toggleOption(item.value, $event)\"\r\n                      role=\"option\"\r\n                      [attr.aria-selected]=\"isSelected(item.value)\"\r\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input option-checkbox\"\r\n                        [checked]=\"isSelected(item.value)\"\r\n                        [attr.data-testid]=\"\r\n                          resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\r\n                        \"\r\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                        tabindex=\"-1\"\r\n                        aria-hidden=\"true\"\r\n                      />\r\n                      <span>{{ item.label }}</span>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            } @else {\r\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\r\n                <div\r\n                  class=\"option\"\r\n                  [class.selected]=\"isSelected(option.value)\"\r\n                  (click)=\"toggleOption(option.value, $event)\"\r\n                  role=\"option\"\r\n                  [attr.aria-selected]=\"isSelected(option.value)\"\r\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input option-checkbox\"\r\n                    [checked]=\"isSelected(option.value)\"\r\n                    [attr.data-testid]=\"\r\n                      resolveOptionTestId(option.value, optionIndex) + '-checkbox'\r\n                    \"\r\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                    tabindex=\"-1\"\r\n                    aria-hidden=\"true\"\r\n                  />\r\n                  <span>{{ option.label }}</span>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\r\n              <div class=\"no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [".multi-select-container{position:relative;width:100%;overflow:visible}.multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.multi-select-container--loading{cursor:progress}.select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.select-value--placeholder{color:var(--color-neutral-500)}.select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.clear-button .material-symbols-outlined{font-size:16px;line-height:1}.clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.select-arrow{font-size:16px;transition:transform .2s;color:var(--color-neutral-500)}.select-arrow.open{transform:rotate(180deg)}.dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--color-neutral-000) 92%,var(--color-neutral-050));border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,var(--color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden;animation:nvb-multi-select-dropdown-in .14s ease-out}.dropdown.dropdown-top{transform:translateY(calc(-100% - 4px));animation-name:nvb-multi-select-dropdown-in-top}@keyframes nvb-multi-select-dropdown-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes nvb-multi-select-dropdown-in-top{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(calc(-100% - 4px)) scale(1)}}@media(prefers-reduced-motion:reduce){.dropdown{animation:none}}.search-container{padding:0 0 4px;border-bottom:1px solid var(--color-neutral-200);background:transparent;position:relative}.search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--color-neutral-300);background-color:color-mix(in oklab,var(--color-neutral-000) 90%,var(--color-neutral-050));color:var(--color-neutral-800)}.search-container .nvb-control__text-input::placeholder{color:var(--color-neutral-500)}.search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.search-clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}.option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}.option-checkbox{pointer-events:none;margin:0}.option__content{min-width:0}.option-group .group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--color-neutral-200)}.option-group .group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.option-group .group-label--selectable .option-checkbox{pointer-events:auto}.option-group .group-label:first-child{border-top:none}.no-results{padding:12px;text-align:center;color:var(--color-neutral-500);font-size:14px}.input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--color-neutral-300) 88%,var(--color-neutral-100));background:color-mix(in oklab,var(--color-neutral-100) 76%,var(--color-neutral-000));color:var(--color-neutral-500)}.input-wrapper--disabled .select-value,.input-wrapper--disabled .select-arrow,.input-wrapper--disabled .clear-button{color:var(--color-neutral-500)}.input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;animation:nvb-multi-select-loading-spin .8s linear infinite}.empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%)}:host ::ng-deep .options-container__custom .option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s}:host ::ng-deep .options-container__custom .option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option--selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"] }]
+                    ], template: "<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\r\n  @if (model().dataSource && !dataSourceLoaded() && isEditorView()) {\r\n    <div class=\"empty-element-wrapper\">\r\n      <div class=\"nvb-control__text-input empty-select-placeholder\"></div>\r\n      <small class=\"element-title\">\r\n        <span class=\"material-symbols-outlined\">database</span>\r\n        {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\r\n      </small>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"multi-select-container\"\r\n      [class.multi-select-container--open]=\"isOpen()\"\r\n      [class.multi-select-container--loading]=\"dataSourceLoading()\"\r\n      #dropdownContainer\r\n      data-testid=\"multi-select-element-root\"\r\n      [attr.aria-busy]=\"dataSourceLoading() ? 'true' : null\"\r\n    >\r\n      <div\r\n        class=\"input-wrapper\"\r\n        [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input ' : 'nvb-control__text-input'\"\r\n        [class.input-wrapper--disabled]=\"model().disabled || dataSourceLoading()\"\r\n        [class.input-wrapper--loading]=\"dataSourceLoading()\"\r\n        #selectButton\r\n        [attr.tabindex]=\"dataSourceLoading() ? -1 : 0\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        (click)=\"toggleDropdown()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (blur)=\"onTriggerBlur()\"\r\n        data-testid=\"multi-select-element-trigger\"\r\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\r\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\r\n        [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\r\n        [attr.aria-controls]=\"isOpen() ? dropdownOptionsId : null\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-disabled]=\"model().disabled || dataSourceLoading() ? 'true' : null\"\r\n        [attr.aria-readonly]=\"model().readOnly ? 'true' : null\"\r\n        [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\r\n        [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\r\n      >\r\n        <span\r\n          class=\"select-value\"\r\n          [class.select-value--placeholder]=\"!hasValue() || dataSourceLoading()\"\r\n        >\r\n          {{\r\n            dataSourceLoading()\r\n              ? ('multiSelect.loading' | uiT: 'Loading options...')\r\n              : displayValue()\r\n          }}\r\n        </span>\r\n        <div class=\"select-actions\">\r\n          @if (dataSourceLoading()) {\r\n            <span class=\"select-loading-spinner\" aria-hidden=\"true\"></span>\r\n          } @else if (hasValue()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"clear-button\"\r\n              (click)=\"clearSelection($event)\"\r\n              [attr.title]=\"'multiSelect.clear' | uiT: 'Clear'\"\r\n              [attr.aria-label]=\"'multiSelect.clearSelections' | uiT: 'Clear selections'\"\r\n              data-testid=\"multi-select-element-clear\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          }\r\n          @if (!dataSourceLoading()) {\r\n            <span class=\"material-symbols-outlined select-arrow\" [class.open]=\"isOpen()\"\r\n              >keyboard_arrow_down</span\r\n            >\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (isOpen() && !dataSourceLoading()) {\r\n        <div\r\n          class=\"dropdown\"\r\n          [class.dropdown-top]=\"dropdownPosition() === 'top'\"\r\n          #dropdownPanel\r\n          [style.--nvb-multi-select-dropdown-max-height.px]=\"dropdownMaxHeight()\"\r\n          [style.left.px]=\"dropdownLeft()\"\r\n          [style.top.px]=\"dropdownTop()\"\r\n          [style.min-width.px]=\"dropdownMinWidth()\"\r\n        >\r\n          @if (customDropdownCss()) {\r\n            <nvb-style-outlet [cssText]=\"customDropdownCss()\"></nvb-style-outlet>\r\n          }\r\n          @if (model().showSearch !== false) {\r\n            <div class=\"search-container\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [placeholder]=\"\r\n                  model().placeholder\r\n                    ? (model().placeholder | dynamicText: model())\r\n                    : ('multiSelect.searchPlaceholder' | uiT: 'Search...')\r\n                \"\r\n                [value]=\"searchTerm()\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                [attr.aria-label]=\"'multiSelect.searchPlaceholder' | uiT: 'Search...'\"\r\n                data-testid=\"multi-select-element-search\"\r\n              />\r\n              @if (searchTerm()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"search-clear-button\"\r\n                  (click)=\"clearSearch($event)\"\r\n                  [attr.title]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  [attr.aria-label]=\"'multiSelect.clearSearch' | uiT: 'Clear search'\"\r\n                  data-testid=\"multi-select-element-search-clear\"\r\n                >\r\n                  x\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <div\r\n            class=\"options-container\"\r\n            [id]=\"dropdownOptionsId\"\r\n            data-testid=\"multi-select-element-options\"\r\n            role=\"listbox\"\r\n            aria-multiselectable=\"true\"\r\n          >\r\n            @if (hasCustomTemplate()) {\r\n              <div\r\n                class=\"options-container__custom\"\r\n                [attr.data-nvb-template-scope]=\"dropdownTemplateScopeId\"\r\n                (click)=\"onCustomOptionsClick($event)\"\r\n                [innerHTML]=\"customDropdownHtml()\"\r\n              ></div>\r\n            } @else if (usesGroupedOptions()) {\r\n              @for (group of filteredOptions(); track group.label) {\r\n                <div class=\"option-group\">\r\n                  <label\r\n                    class=\"group-label group-label--selectable\"\r\n                    (click)=\"toggleGroup(group, $event)\"\r\n                  >\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"nvb-control__checkbox-input option-checkbox\"\r\n                      [checked]=\"isGroupSelected(group)\"\r\n                      [indeterminate]=\"isGroupPartiallySelected(group)\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      [attr.aria-label]=\"group.label\"\r\n                    />\r\n                    <span>{{ group.label }}</span>\r\n                  </label>\r\n                  @for (item of group.items; track item.value; let optionIndex = $index) {\r\n                    <div\r\n                      class=\"option\"\r\n                      [class.selected]=\"isSelected(item.value)\"\r\n                      (click)=\"toggleOption(item.value, $event)\"\r\n                      role=\"option\"\r\n                      [attr.aria-selected]=\"isSelected(item.value)\"\r\n                      [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                      [attr.data-testid]=\"resolveOptionTestId(item.value, optionIndex, group.label)\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input option-checkbox\"\r\n                        [checked]=\"isSelected(item.value)\"\r\n                        [attr.data-testid]=\"\r\n                          resolveOptionTestId(item.value, optionIndex, group.label) + '-checkbox'\r\n                        \"\r\n                        [attr.aria-label]=\"resolveOptionAriaLabel(item.label, item.value)\"\r\n                        tabindex=\"-1\"\r\n                        aria-hidden=\"true\"\r\n                      />\r\n                      <span>{{ item.label }}</span>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            } @else {\r\n              @for (option of filteredOptions(); track option.value; let optionIndex = $index) {\r\n                <div\r\n                  class=\"option\"\r\n                  [class.selected]=\"isSelected(option.value)\"\r\n                  (click)=\"toggleOption(option.value, $event)\"\r\n                  role=\"option\"\r\n                  [attr.aria-selected]=\"isSelected(option.value)\"\r\n                  [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                  [attr.data-testid]=\"resolveOptionTestId(option.value, optionIndex)\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input option-checkbox\"\r\n                    [checked]=\"isSelected(option.value)\"\r\n                    [attr.data-testid]=\"\r\n                      resolveOptionTestId(option.value, optionIndex) + '-checkbox'\r\n                    \"\r\n                    [attr.aria-label]=\"resolveOptionAriaLabel(option.label, option.value)\"\r\n                    tabindex=\"-1\"\r\n                    aria-hidden=\"true\"\r\n                  />\r\n                  <span>{{ option.label }}</span>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (!hasCustomTemplate() && filteredOptions().length === 0) {\r\n              <div class=\"no-results\">{{ 'multiSelect.empty' | uiT: 'No results found' }}</div>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</element-wrapper>\r\n", styles: [".multi-select-container{position:relative;width:100%;overflow:visible}.multi-select-container--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.multi-select-container--loading{cursor:progress}.select-value{flex:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.select-value--placeholder{color:var(--color-neutral-500)}.select-actions{display:flex;align-items:center;gap:4px;margin-left:8px}.clear-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.clear-button .material-symbols-outlined{font-size:16px;line-height:1}.clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.select-arrow{font-size:16px;transition:transform .2s;color:var(--color-neutral-500)}.select-arrow.open{transform:rotate(180deg)}.dropdown{--nvb-multi-select-dropdown-max-height: 300px;position:fixed;left:0;top:0;background:color-mix(in oklab,var(--color-neutral-000) 92%,var(--color-neutral-050));border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,var(--color-surface-mix-target, white));border-radius:var(--nvb-menu-radius, var(--nvb-input-radius, var(--radius-md)));box-shadow:var(--nvb-shadow-16, 0 12px 24px color-mix(in oklab, var(--color-neutral-950) 12%, transparent));z-index:var(--nvb-floating-overlay-z-index, 2147483000);max-height:var(--nvb-multi-select-dropdown-max-height);display:flex;flex-direction:column;padding:4px;overflow:hidden}.dropdown.dropdown-top{transform:translateY(calc(-100% - 4px))}.search-container{padding:0 0 4px;border-bottom:1px solid var(--color-neutral-200);background:transparent;position:relative}.search-container .nvb-control__text-input{box-sizing:border-box;height:var(--nvb-input-height);min-height:var(--nvb-input-height);line-height:calc(var(--nvb-input-height) - 2px);padding-top:0;padding-bottom:0;border-color:var(--color-neutral-300);background-color:color-mix(in oklab,var(--color-neutral-000) 90%,var(--color-neutral-050));color:var(--color-neutral-800)}.search-container .nvb-control__text-input::placeholder{color:var(--color-neutral-500)}.search-clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;color:var(--color-neutral-500);cursor:pointer;border:none;background:transparent;padding:0;border-radius:50%;transition:all .2s}.search-clear-button:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.options-container{overflow-y:auto;max-height:calc(var(--nvb-multi-select-dropdown-max-height) - 44px);min-height:0;padding-top:4px;background:transparent}.options-container__custom{display:flex;flex-direction:column;gap:2px;min-height:1px}.option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}.option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}.option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}.option-checkbox{pointer-events:none;margin:0}.option__content{min-width:0}.option-group .group-label{min-height:28px;margin:4px 0 2px;padding:0 10px;font-size:12px;font-weight:600;color:var(--color-neutral-600);text-transform:uppercase;background-color:transparent;border-top:1px solid var(--color-neutral-200)}.option-group .group-label--selectable{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;cursor:pointer}.option-group .group-label--selectable .option-checkbox{pointer-events:auto}.option-group .group-label:first-child{border-top:none}.no-results{padding:12px;text-align:center;color:var(--color-neutral-500);font-size:14px}.input-wrapper{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:var(--nvb-input-height)}.input-wrapper--disabled{cursor:not-allowed;border-color:color-mix(in oklab,var(--color-neutral-300) 88%,var(--color-neutral-100));background:color-mix(in oklab,var(--color-neutral-100) 76%,var(--color-neutral-000));color:var(--color-neutral-500)}.input-wrapper--disabled .select-value,.input-wrapper--disabled .select-arrow,.input-wrapper--disabled .clear-button{color:var(--color-neutral-500)}.input-wrapper--loading{background:linear-gradient(90deg,transparent 0%,color-mix(in oklab,var(--color-neutral-000) 72%,transparent) 48%,transparent 100%),color-mix(in oklab,var(--color-neutral-050) 78%,var(--color-neutral-000));background-size:220% 100%;animation:nvb-multi-select-loading-shimmer 1.35s ease-in-out infinite}.select-loading-spinner{width:14px;height:14px;border:2px solid color-mix(in oklab,var(--color-neutral-400) 45%,transparent);border-top-color:var(--color-primary-500);border-radius:999px;animation:nvb-multi-select-loading-spin .8s linear infinite}.empty-select-placeholder{height:31px;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%)}:host ::ng-deep .options-container__custom .option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s}:host ::ng-deep .options-container__custom .option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .option.selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option{min-height:32px;margin:1px 0;padding:0 10px;border-radius:var(--nvb-control-radius, var(--radius-md));cursor:pointer;font-size:14px;line-height:20px;color:var(--color-neutral-800);transition:background-color .15s;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option:hover{background-color:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-neutral-000))}:host ::ng-deep .options-container__custom .nvb-multi-select-template-option--selected{background-color:color-mix(in oklab,var(--color-primary-500) 18%,var(--color-neutral-000));color:var(--color-primary-700);font-weight:500;box-shadow:none}@keyframes nvb-multi-select-loading-shimmer{0%{background-position:180% 0}to{background-position:-80% 0}}@keyframes nvb-multi-select-loading-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdownContainer']
@@ -48529,7 +48529,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-BHD67zTY.mjs').then((m) => m.ToastElement),
+    [ElementTypesEnum.TOAST]: () => import('./ngx-view-builder-toast-element-CclIxegL.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 +48537,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-9HrNMsbH.mjs').then((m) => m.AvatarElement),
-    [ElementTypesEnum.ICON]: () => import('./ngx-view-builder-icon-element-CF0zR6AC.mjs').then((m) => m.IconElement),
+    [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.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-B53MyJZv.mjs').then((m) => m.BreadcrumbsElement),
+    [ElementTypesEnum.BREADCRUMBS]: () => import('./ngx-view-builder-breadcrumbs-element-BihMIpWr.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),
@@ -55260,7 +55260,7 @@ class TableElement {
         this.dataService.setValue(`__table.activeRow`, activeRow);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableElement, isStandalone: true, selector: "table-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "closeActionMenu()", "window:scroll": "onWindowScroll()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "tableShellRef", first: true, predicate: ["tableShellRef"], descendants: true, isSignal: true }, { propertyName: "stickyHeaderRef", first: true, predicate: ["stickyHeaderRef"], descendants: true, isSignal: true }, { propertyName: "tableScrollerRef", first: true, predicate: ["tableScrollerRef"], descendants: true, isSignal: true }, { propertyName: "mainHeaderRowRef", first: true, predicate: ["mainHeaderRowRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<element-wrapper [model]=\"model()\">\r\n  @if (templateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"templateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"styleOutletKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n  <div\r\n    #tableShellRef\r\n    class=\"table-shell\"\r\n    [class.table-shell--editor]=\"isEditor()\"\r\n    [class.table-shell--sticky-header]=\"stickyHeaderEnabled()\"\r\n    [style.--table-sticky-header-offset]=\"stickyHeaderActiveOffset() + 'px'\"\r\n    [attr.aria-busy]=\"loading()\"\r\n  >\r\n    @if (\r\n      stickyHeaderEnabled() ||\r\n      showToolbar() ||\r\n      (detailedSearchEnabled() && showDetailedSearchPanel())\r\n    ) {\r\n      <div\r\n        #stickyHeaderRef\r\n        class=\"table-sticky-header\"\r\n        [class.table-sticky-header--enabled]=\"stickyHeaderEnabled()\"\r\n        [class.table-sticky-header--pinned]=\"stickyHeaderPinned()\"\r\n      >\r\n        @if (showToolbar()) {\r\n          <div\r\n            class=\"table-toolbar\"\r\n            role=\"toolbar\"\r\n            [class.table-toolbar--flat]=\"flatHeaderSurface()\"\r\n            [attr.aria-label]=\"'table.toolbar.label' | uiT: 'Table actions'\"\r\n          >\r\n            <div class=\"table-toolbar__left\">\r\n              @if (quickSearchEnabled()) {\r\n                <div\r\n                  class=\"table-quick-search\"\r\n                  role=\"search\"\r\n                  [attr.aria-label]=\"'table.search.quick' | uiT: 'Quick search'\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-quick-search__apply\"\r\n                    (click)=\"applyQuickSearch()\"\r\n                    [attr.aria-label]=\"'table.search.apply' | uiT: 'Search'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">search</span>\r\n                  </button>\r\n                  <input\r\n                    type=\"text\"\r\n                    [ngModel]=\"quickSearchTerm()\"\r\n                    (ngModelChange)=\"onQuickSearchValueChange($event)\"\r\n                    (keydown.enter)=\"applyQuickSearch(); $event.preventDefault()\"\r\n                    [placeholder]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                    [attr.aria-label]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                  />\r\n                  @if (quickSearchTerm()) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-quick-search__clear\"\r\n                      (click)=\"clearQuickSearch()\"\r\n                      [attr.aria-label]=\"'table.search.clearQuick' | uiT: 'Clear quick search'\"\r\n                    >\r\n                      <span class=\"material-symbols-outlined\">close</span>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (detailedSearchEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--detailed-toggle\"\r\n                  (click)=\"toggleDetailedSearch()\"\r\n                  [attr.aria-expanded]=\"showDetailedSearchPanel()\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">tune</span>\r\n                  <span>\r\n                    {{\r\n                      showDetailedSearchPanel()\r\n                        ? ('table.search.hideDetailed' | uiT: 'Hide detailed search')\r\n                        : ('table.search.showDetailed' | uiT: 'Detailed search')\r\n                    }}\r\n                  </span>\r\n                  @if (detailedFiltersCount() > 0) {\r\n                    <span class=\"table-toolbar__badge\">{{ detailedFiltersCount() }}</span>\r\n                  }\r\n                </button>\r\n              }\r\n\r\n              @if (showHeaderCenterInLeft()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtStart()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n\r\n            @if (showHeaderCenterArea()) {\r\n              <div\r\n                class=\"table-toolbar__center\"\r\n                [class.table-toolbar__center--controls-only]=\"\r\n                  !hasCustomHeaderTemplate() && showHeaderCenterInCenter()\r\n                \"\r\n              >\r\n                @if (hasCustomHeaderTemplate()) {\r\n                  <div\r\n                    class=\"table-toolbar__custom\"\r\n                    [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                    [innerHTML]=\"customHeaderTemplateHtml()\"\r\n                    (click)=\"onHeaderTemplateClick($event)\"\r\n                  ></div>\r\n                }\r\n\r\n                @if (showHeaderCenterInCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n                }\r\n\r\n                @if (renderHeaderActionsAtCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div class=\"table-toolbar__right\">\r\n              @if (columnSettingsEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--icon-only\"\r\n                  (click)=\"openColumnSettings()\"\r\n                  [attr.aria-expanded]=\"openColumnSettingsDialog()\"\r\n                  [attr.aria-label]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                  [attr.title]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                >\r\n                  <nvb-icon class=\"table-action-icon\" name=\"settings\"></nvb-icon>\r\n                </button>\r\n              }\r\n\r\n              @if (exportEnabled()) {\r\n                <div class=\"table-export\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button\"\r\n                    [disabled]=\"exportBusy()\"\r\n                    [title]=\"exportBusy() ? ('table.export.busy' | uiT: 'Exporting...') : ''\"\r\n                    [attr.aria-expanded]=\"\r\n                      exportUsesColumnPicker() ? openExportDialog() : openExportMenu()\r\n                    \"\r\n                    (click)=\"toggleExportMenu($event)\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">ios_share</span>\r\n                    <span>{{ 'table.export.open' | uiT: 'Export' }}</span>\r\n                    @if (!exportUsesColumnPicker()) {\r\n                      <span class=\"material-symbols-outlined table-export__chevron\">\r\n                        {{ openExportMenu() ? 'expand_less' : 'expand_more' }}\r\n                      </span>\r\n                    }\r\n                  </button>\r\n\r\n                  @if (!exportUsesColumnPicker() && openExportMenu()) {\r\n                    <div\r\n                      class=\"table-export__menu\"\r\n                      [class.table-export__menu--top]=\"exportMenuPosition() === 'top'\"\r\n                      [ngStyle]=\"exportMenuStyle()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <label class=\"table-export__scope\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"exportScope() === 'all'\"\r\n                          (change)=\"onExportScopeToggle($event)\"\r\n                        />\r\n                        <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n                      </label>\r\n\r\n                      <div class=\"table-export__actions\">\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('csv', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">description</span>\r\n                          <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('excel', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">table_view</span>\r\n                          <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('pdf', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n                          <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (showHeaderCenterInRight()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtEnd()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <ng-template #headerCenterControlsTemplate>\r\n            <div\r\n              class=\"table-toolbar__dropzone\"\r\n              [class.table-toolbar__dropzone--left]=\"headerCenterElementsPosition() === 'left'\"\r\n              [class.table-toolbar__dropzone--center]=\"headerCenterElementsPosition() === 'center'\"\r\n              [class.table-toolbar__dropzone--right]=\"headerCenterElementsPosition() === 'right'\"\r\n            >\r\n              @if (isEditor()) {\r\n                <div class=\"table-toolbar__add-element\" (click)=\"$event.stopPropagation()\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button table-toolbar__button--add-element\"\r\n                    (click)=\"toggleHeaderCenterAddMenu($event)\"\r\n                    [attr.aria-expanded]=\"headerCenterAddMenuOpen()\"\r\n                    [attr.aria-label]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                    [title]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">add</span>\r\n                  </button>\r\n\r\n                  @if (headerCenterAddMenuOpen()) {\r\n                    <div class=\"table-toolbar__add-menu\">\r\n                      @for (option of headerCenterAddOptions; track option.type) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__add-menu-item\"\r\n                          (click)=\"addHeaderCenterElementByType(option.type, $event)\"\r\n                        >\r\n                          {{ option.labelKey | uiT: option.fallbackLabel }}\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (hasHeaderCenterElements()) {\r\n                <div class=\"table-toolbar__drop-items\">\r\n                  @for (headerElement of headerCenterElements(); track headerElement.name) {\r\n                    <div\r\n                      class=\"table-toolbar__drop-item\"\r\n                      [class.table-toolbar__drop-item--editor]=\"isEditor()\"\r\n                      [class.table-toolbar__drop-item--focused]=\"\r\n                        isHeaderCenterElementFocused(headerElement.name)\r\n                      \"\r\n                      [attr.data-nvb-header-center-name]=\"headerElement.name\"\r\n                      (mousedown)=\"focusHeaderCenterElementByName(headerElement.name, $event)\"\r\n                    >\r\n                      <runtime-lazy-element-outlet [model]=\"headerElement\" />\r\n                      @if (isEditor()) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__drop-remove\"\r\n                          (click)=\"removeHeaderCenterElement(headerElement.name, $event)\"\r\n                          [attr.aria-label]=\"\r\n                            'table.header.removeCenterElement' | uiT: 'Remove center element'\r\n                          \"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">close</span>\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n\r\n          <ng-template #headerActionsTemplate>\r\n            @if (visibleHeaderActions(); as headerActions) {\r\n              @if (headerActions.length > 0) {\r\n                @if (renderHeaderActionsAsDropdown()) {\r\n                  <nvb-select\r\n                    class=\"table-toolbar__select\"\r\n                    [ngModel]=\"headerActionDropdownValue()\"\r\n                    (ngModelChange)=\"onHeaderActionDropdownChange($event)\"\r\n                    (blur)=\"onHeaderActionDropdownBlur()\"\r\n                    [attr.aria-label]=\"headerActionsDropdownPlaceholder()\"\r\n                  >\r\n                    <option value=\"\">{{ headerActionsDropdownPlaceholder() }}</option>\r\n                    @for (option of headerActionDropdownOptions(); track option.value) {\r\n                      <option [value]=\"option.value\">{{ option.label }}</option>\r\n                    }\r\n                  </nvb-select>\r\n                } @else {\r\n                  <div class=\"table-toolbar__actions\">\r\n                    @for (action of headerActions; track action.id || $index) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        [class.table-toolbar__button--icon-only]=\"actionHidesText(action)\"\r\n                        [attr.title]=\"resolveActionLabel(action)\"\r\n                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                        (click)=\"runHeaderAction(action, $event)\"\r\n                      >\r\n                        @if (resolveActionIcon(action); as actionIcon) {\r\n                          <nvb-icon class=\"table-action-icon\" [name]=\"actionIcon\"></nvb-icon>\r\n                        }\r\n                        @if (!actionHidesText(action)) {\r\n                          <span>{{ resolveActionLabel(action) }}</span>\r\n                        }\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          </ng-template>\r\n        }\r\n\r\n        @if (detailedSearchEnabled() && showDetailedSearchPanel()) {\r\n          <div class=\"table-detailed-search\">\r\n            <div class=\"table-detailed-search__rows\">\r\n              @for (filter of detailedFilters(); track filter.id) {\r\n                <div class=\"table-detailed-search__row\">\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.key\"\r\n                    (ngModelChange)=\"updateDetailedFilterKey(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.field' | uiT: 'Field'\"\r\n                  >\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <option [value]=\"column.key\">{{ resolveColumnLabel(column) }}</option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.operator\"\r\n                    (ngModelChange)=\"updateDetailedFilterOperator(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.operator' | uiT: 'Operator'\"\r\n                  >\r\n                    @for (operator of getFilterOperators(filter); track operator.value) {\r\n                      <option [value]=\"operator.value\">\r\n                        {{ operator.label | uiT: operator.value }}\r\n                      </option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  @if (isSelectFilter(filter)) {\r\n                    <nvb-select\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    >\r\n                      <option value=\"\">\r\n                        {{\r\n                          resolveDetailedFilterOptions(filter).length > 0\r\n                            ? ('table.search.value' | uiT: 'Value')\r\n                            : ('table.search.emptyOptions' | uiT: 'No options')\r\n                        }}\r\n                      </option>\r\n                      @for (option of resolveDetailedFilterOptions(filter); track option.value) {\r\n                        <option [value]=\"option.value\">{{ option.label }}</option>\r\n                      }\r\n                    </nvb-select>\r\n                  } @else if (isMultiSelectFilter(filter)) {\r\n                    <div\r\n                      class=\"table-detailed-search__multi-select\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__multi-select-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterMultiSelectOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterMultiSelectMenu(filter.id, $event)\"\r\n                      >\r\n                        @if (hasDetailedFilterSelectedOptions(filter)) {\r\n                          <span>{{ resolveDetailedFilterMultiSelectLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__multi-select-placeholder\">{{\r\n                            resolveDetailedFilterOptions(filter).length > 0\r\n                              ? ('table.search.value' | uiT: 'Value')\r\n                              : ('table.search.emptyOptions' | uiT: 'No options')\r\n                          }}</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">\r\n                          {{\r\n                            isDetailedFilterMultiSelectOpen(filter.id)\r\n                              ? 'expand_less'\r\n                              : 'expand_more'\r\n                          }}\r\n                        </span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterMultiSelectOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__multi-select-menu\">\r\n                          @if (resolveDetailedFilterOptions(filter).length === 0) {\r\n                            <div class=\"table-detailed-search__multi-select-empty\">\r\n                              {{ 'table.search.emptyOptions' | uiT: 'No options' }}\r\n                            </div>\r\n                          } @else {\r\n                            @for (\r\n                              option of resolveDetailedFilterOptions(filter);\r\n                              track option.value\r\n                            ) {\r\n                              <label class=\"table-detailed-search__multi-select-option\">\r\n                                <input\r\n                                  type=\"checkbox\"\r\n                                  class=\"nvb-control__checkbox-input\"\r\n                                  [checked]=\"isFilterOptionSelected(filter, option.value)\"\r\n                                  (change)=\"\r\n                                    onDetailedFilterMultiSelectOptionToggle(\r\n                                      filter.id,\r\n                                      option.value,\r\n                                      $any($event.target).checked\r\n                                    )\r\n                                  \"\r\n                                />\r\n                                <span>{{ option.label }}</span>\r\n                              </label>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isToggleFilter(filter)) {\r\n                    <label\r\n                      class=\"table-detailed-search__toggle table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-toggle-switch__input\"\r\n                        [checked]=\"isToggleFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedToggleFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span class=\"nvb-toggle-switch__track\">\r\n                        <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                      </span>\r\n                      <span>{{ filterValueAsString(filter.value) }}</span>\r\n                    </label>\r\n                  } @else if (isCheckboxFilter(filter) || isBooleanFilter(filter)) {\r\n                    <label class=\"table-detailed-search__boolean-toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked ? 'true' : 'false'\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span>{{\r\n                        isFilterValueTrue(filter)\r\n                          ? ('table.search.boolean.true' | uiT: 'True')\r\n                          : ('table.search.boolean.false' | uiT: 'False')\r\n                      }}</span>\r\n                    </label>\r\n                  } @else if (isNumericFilter(filter)) {\r\n                    <input\r\n                      type=\"number\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else if (isDateFilter(filter)) {\r\n                    <div class=\"table-detailed-search__date\" (click)=\"$event.stopPropagation()\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__date-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterDatePickerOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterDatePicker(filter, $event)\"\r\n                      >\r\n                        @if (resolveDetailedFilterDateLabel(filter)) {\r\n                          <span>{{ resolveDetailedFilterDateLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__date-placeholder\">0000-00-00</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">calendar_month</span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterDatePickerOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__date-menu\">\r\n                          <div class=\"table-detailed-search__date-header\">\r\n                            <button type=\"button\" (click)=\"previousDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                            </button>\r\n                            <span>{{ resolveDetailedFilterDateMonthLabel() }}</span>\r\n                            <button type=\"button\" (click)=\"nextDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                            </button>\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-weekdays\">\r\n                            @for (\r\n                              weekday of resolveDetailedFilterDateWeekdays();\r\n                              track weekday + $index\r\n                            ) {\r\n                              <span>{{ weekday }}</span>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-days\">\r\n                            @for (day of resolveDetailedFilterDateDays(filter); track day.key) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"table-detailed-search__date-day\"\r\n                                [class.table-detailed-search__date-day--outside]=\"day.outsideMonth\"\r\n                                [class.table-detailed-search__date-day--today]=\"day.isToday\"\r\n                                [class.table-detailed-search__date-day--selected]=\"day.isSelected\"\r\n                                (click)=\"selectDetailedFilterDate(filter.id, day.iso, $event)\"\r\n                              >\r\n                                {{ day.day }}\r\n                              </button>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              (click)=\"clearDetailedFilterDate(filter.id, $event)\"\r\n                            >\r\n                              {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n                            </button>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isDateTimeFilter(filter)) {\r\n                    <input\r\n                      type=\"datetime-local\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else {\r\n                    <input\r\n                      type=\"text\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  }\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-detailed-search__remove\"\r\n                    (click)=\"removeDetailedFilter(filter.id)\"\r\n                    [attr.aria-label]=\"'table.search.removeFilter' | uiT: 'Remove filter'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">delete</span>\r\n                  </button>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"table-detailed-search__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"addDetailedFilter()\">\r\n                <span class=\"material-symbols-outlined\">add</span>\r\n                <span>{{ 'table.search.addFilter' | uiT: 'Add filter' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"clearDetailedSearch()\">\r\n                <span class=\"material-symbols-outlined\">ink_eraser</span>\r\n                <span>{{ 'table.search.clear' | uiT: 'Clear' }}</span>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-toolbar__button table-toolbar__button--primary\"\r\n                (click)=\"applyDetailedSearch()\"\r\n              >\r\n                <span class=\"material-symbols-outlined\">check</span>\r\n                <span>{{ 'table.search.apply' | uiT: 'Apply' }}</span>\r\n              </button>\r\n              @if (savedFiltersEnabled()) {\r\n                <button type=\"button\" class=\"table-toolbar__button\" (click)=\"openSavedFilters()\">\r\n                  <span class=\"material-symbols-outlined\">bookmark</span>\r\n                  <span>{{ 'table.search.saved' | uiT: 'Saved filters' }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (stickyHeaderCloneVisible()) {\r\n          <div class=\"table-sticky-clone\">\r\n            <div class=\"table-sticky-clone__viewport\">\r\n              <table\r\n                class=\"nvb-table table-sticky-clone__table\"\r\n                [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n                [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n                [style.width.px]=\"stickyHeaderTableWidth() || null\"\r\n                [style.transform]=\"'translateX(' + -stickyHeaderScrollLeft() + 'px)'\"\r\n              >\r\n                <thead>\r\n                  <tr class=\"table-sticky-clone__row\">\r\n                    @if (showExpandChevronColumn()) {\r\n                      <th\r\n                        class=\"expand-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                        [style.min-width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                      ></th>\r\n                    }\r\n                    @if (selectionEnabled()) {\r\n                      <th\r\n                        class=\"select-column\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                      >\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"allVisibleSelected()\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"toggleSelectAllVisible($event)\"\r\n                          [attr.aria-label]=\"\r\n                            model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                          \"\r\n                        />\r\n                      </th>\r\n                    }\r\n\r\n                    @for (\r\n                      column of dataColumns();\r\n                      track column.id || column.key;\r\n                      let columnIndex = $index\r\n                    ) {\r\n                      <th\r\n                        [class]=\"columnAlignClass(column)\"\r\n                        [class.sortable]=\"column.sortable\"\r\n                        [class.sorted-active]=\"isSortedColumn(column)\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                      >\r\n                        @if (showColumnHeaderLabel(column)) {\r\n                          <span>{{ resolveColumnLabel(column) }}</span>\r\n                        }\r\n                        @if (column.sortable) {\r\n                          <span\r\n                            class=\"material-symbols-outlined sort-icon\"\r\n                            [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                          >\r\n                            {{ sortIndicator(column) }}\r\n                          </span>\r\n                        }\r\n                      </th>\r\n                    }\r\n\r\n                    @if (hasRowActions()) {\r\n                      <th\r\n                        class=\"action-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\r\n                        \"\r\n                      >\r\n                        <div class=\"action-header\">\r\n                          @if (showActionsHeaderLabel()) {\r\n                            <span class=\"action-header__label\">{{\r\n                              model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                            }}</span>\r\n                          }\r\n                        </div>\r\n                      </th>\r\n                    }\r\n                  </tr>\r\n                </thead>\r\n              </table>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      class=\"table-frame\"\r\n      [class.table-frame--with-toolbar]=\"showToolbar() && !flatHeaderSurface()\"\r\n      [class.table-frame--with-paginator]=\"model().paginator && !flatFooterSurface()\"\r\n      [class.table-frame--with-detail-panel]=\"activeExpandedPanelContext() !== null\"\r\n    >\r\n      <div\r\n        #tableScrollerRef\r\n        class=\"table-frame__scroller\"\r\n        [class.table-frame__scroller--virtual]=\"virtualScrollEnabled()\"\r\n        [style.max-height.px]=\"virtualScrollEnabled() ? virtualScrollViewportHeight() : null\"\r\n        (scroll)=\"onTableScroll($event)\"\r\n      >\r\n        <table\r\n          class=\"nvb-table\"\r\n          [class.nvb-table--auto-stack]=\"model().responsiveMode === 'auto'\"\r\n          [class.nvb-table--force-stack]=\"model().responsiveMode === 'stack'\"\r\n          [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n          [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n          [class.nvb-table--row-hover]=\"rowHoverEnabled()\"\r\n          [class.nvb-table--sticky-header]=\"stickyHeaderEnabled()\"\r\n          [class.nvb-table--virtual-scroll]=\"virtualScrollEnabled()\"\r\n          data-testid=\"table-element-root\"\r\n        >\r\n          <thead>\r\n            <tr #mainHeaderRowRef>\r\n              @if (showExpandChevronColumn()) {\r\n                <th class=\"expand-column\"></th>\r\n              }\r\n              @if (selectionEnabled()) {\r\n                <th class=\"select-column\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input\"\r\n                    [checked]=\"allVisibleSelected()\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"toggleSelectAllVisible($event)\"\r\n                    [attr.aria-label]=\"\r\n                      model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                    \"\r\n                  />\r\n                </th>\r\n              }\r\n\r\n              @for (\r\n                column of dataColumns();\r\n                track column.id || column.key;\r\n                let columnIndex = $index\r\n              ) {\r\n                <th\r\n                  [class]=\"columnAlignClass(column)\"\r\n                  [class.sortable]=\"column.sortable\"\r\n                  [class.column-focused]=\"isColumnFocused(column, columnIndex)\"\r\n                  [class.sorted-active]=\"isSortedColumn(column)\"\r\n                  [style.width]=\"columnWidthStyle(column)\"\r\n                  [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                  (focus)=\"onColumnHeaderFocus(column, columnIndex)\"\r\n                  (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                >\r\n                  @if (showColumnHeaderLabel(column)) {\r\n                    <span>{{ resolveColumnLabel(column) }}</span>\r\n                  }\r\n                  @if (column.sortable) {\r\n                    <span\r\n                      class=\"material-symbols-outlined sort-icon\"\r\n                      [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                    >\r\n                      {{ sortIndicator(column) }}\r\n                    </span>\r\n                  }\r\n                </th>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <th class=\"action-column\">\r\n                  <div class=\"action-header\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      <span class=\"action-header__label\">{{\r\n                        model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                      }}</span>\r\n                    }\r\n\r\n                    @if (hasSelectionActions() && selectedRowsCount() > 0) {\r\n                      @if (visibleSelectionActions(); as selectionActions) {\r\n                        @if (selectionActions.length > 0) {\r\n                          <div class=\"selection-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              class=\"selection-actions__toggle\"\r\n                              (click)=\"toggleSelectionActionMenu(selectionActions.length, $event)\"\r\n                              [attr.aria-label]=\"\r\n                                selectionActionsLabel() | uiT: selectionActionsLabel()\r\n                              \"\r\n                            >\r\n                              <span class=\"material-symbols-outlined\">checklist</span>\r\n                              <span class=\"selection-actions__count\">{{\r\n                                selectedRowsCount()\r\n                              }}</span>\r\n                            </button>\r\n\r\n                            @if (openSelectionActionMenu()) {\r\n                              <div\r\n                                class=\"selection-actions__menu\"\r\n                                [class.selection-actions__menu--top]=\"\r\n                                  selectionActionMenuPosition() === 'top'\r\n                                \"\r\n                                [ngStyle]=\"selectionActionMenuStyle()\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @for (action of selectionActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    (click)=\"runSelectionAction(action, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  </button>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    }\r\n                  </div>\r\n                </th>\r\n              }\r\n            </tr>\r\n          </thead>\r\n\r\n          <tbody>\r\n            @if (showInitialSkeleton()) {\r\n              @for (rowIndex of initialSkeletonRows(); track rowIndex) {\r\n                <tr class=\"table-skeleton__row\" aria-hidden=\"true\">\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td class=\"select-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @for (\r\n                    column of dataColumns();\r\n                    track column.id || column.key;\r\n                    let columnIndex = $index\r\n                  ) {\r\n                    <td [class]=\"columnAlignClass(column)\">\r\n                      <span\r\n                        class=\"table-skeleton__line\"\r\n                        [style.width]=\"initialSkeletonCellWidth(rowIndex, columnIndex)\"\r\n                      ></span>\r\n                    </td>\r\n                  }\r\n                  @if (hasRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      <span class=\"table-skeleton__dot table-skeleton__dot--action\"></span>\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n            } @else {\r\n              @if (!loading() && visibleRows().length === 0) {\r\n                <tr>\r\n                  <td\r\n                    class=\"empty-cell\"\r\n                    [attr.colspan]=\"\r\n                      dataColumns().length +\r\n                      (hasRowActions() ? 1 : 0) +\r\n                      (selectionEnabled() ? 1 : 0) +\r\n                      (showExpandChevronColumn() ? 1 : 0)\r\n                    \"\r\n                  >\r\n                    {{ model().emptyMessage || ('table.empty' | uiT: 'No data') }}\r\n                  </td>\r\n                </tr>\r\n                @if (expandedUsesInline() && editorExpandedPreviewContext(); as expandedContext) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualTopSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualTopSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n\r\n              @for (\r\n                renderedRow of renderedRows();\r\n                track rowTrackKey(renderedRow.row, renderedRow.visibleIndex)\r\n              ) {\r\n                @let row = renderedRow.row;\r\n                @let rowIndex = renderedRow.visibleIndex;\r\n                <tr\r\n                  [class.nvb-table__row--active]=\"isRowActive(row, rowIndex)\"\r\n                  [class.nvb-table__row--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                  [class.nvb-table__row--editing]=\"isInlineEditRow(row, rowIndex)\"\r\n                  (click)=\"onRowClick(row, rowIndex, $event)\"\r\n                  (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n                >\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      @if (showExpandToggle(row, rowIndex)) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"expand-toggle\"\r\n                          [class.expand-toggle--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                          (click)=\"toggleRowExpand(row, rowIndex, $event)\"\r\n                          [attr.aria-label]=\"resolveExpandToggleLabel(row, rowIndex)\"\r\n                          [attr.aria-expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">{{\r\n                            resolveExpandToggleIcon(row, rowIndex)\r\n                          }}</span>\r\n                        </button>\r\n                      }\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td\r\n                      class=\"select-cell\"\r\n                      [attr.data-label]=\"model().selectLabel || ('table.select' | uiT: 'Select')\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isRowSelected(row, rowIndex)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (change)=\"toggleRowSelection(row, rowIndex, $event)\"\r\n                        [attr.aria-label]=\"\r\n                          model().selectRowLabel || ('table.selectRow' | uiT: 'Select row')\r\n                        \"\r\n                      />\r\n                    </td>\r\n                  }\r\n\r\n                  @if (rowTemplateEnabled()) {\r\n                    <td\r\n                      class=\"table-row-template-cell\"\r\n                      data-label=\"\"\r\n                      [attr.colspan]=\"rowTemplateColspan()\"\r\n                    >\r\n                      <div\r\n                        class=\"table-row-template-host\"\r\n                        [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                        [innerHTML]=\"resolveRowTemplateHtml(row, rowIndex) || ''\"\r\n                        (click)=\"onTemplateContentClick($event, row, row)\"\r\n                      ></div>\r\n                    </td>\r\n                  } @else {\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <td\r\n                        [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                        [class]=\"columnAlignClass(column)\"\r\n                      >\r\n                        <div class=\"table-cell-content\">\r\n                          <div class=\"table-cell-content__value\">\r\n                            @if (isInlineEditRow(row, rowIndex) && isInlineEditableColumn(column)) {\r\n                              @switch (resolveInlineEditorType(column)) {\r\n                                @case ('textarea') {\r\n                                  <textarea\r\n                                    class=\"table-inline-edit table-inline-edit--textarea\"\r\n                                    rows=\"2\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  ></textarea>\r\n                                }\r\n                                @case ('number') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"number\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('date') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"date\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('checkbox') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                  </label>\r\n                                }\r\n                                @case ('toggle') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-toggle-switch__input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                    <span class=\"nvb-toggle-switch__track\">\r\n                                      <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                    </span>\r\n                                  </label>\r\n                                }\r\n                                @case ('select') {\r\n                                  <select\r\n                                    class=\"table-inline-edit\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <option [ngValue]=\"null\">\r\n                                      {{\r\n                                        resolveInlineEditorPlaceholder(column) ||\r\n                                          ('table.inlineEdit.select' | uiT: 'Select')\r\n                                      }}\r\n                                    </option>\r\n                                    @for (\r\n                                      option of resolveInlineSelectOptions(column);\r\n                                      track $index\r\n                                    ) {\r\n                                      <option [ngValue]=\"option.rawValue\">\r\n                                        {{ option.label }}\r\n                                      </option>\r\n                                    }\r\n                                  </select>\r\n                                }\r\n                                @default {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"text\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                              }\r\n                            } @else if (isToggleSwitchColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                [class.nvb-toggle-switch--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-toggle-switch__input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                                <span class=\"nvb-toggle-switch__track\">\r\n                                  <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                </span>\r\n                              </label>\r\n                            } @else if (isSingleCheckboxColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                [class.nvb-single-checkbox--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                              </label>\r\n                            } @else if (resolveStatusBadge(row, column); as statusBadge) {\r\n                              <span\r\n                                class=\"status-pill\"\r\n                                [class]=\"'status-pill status-pill--' + statusBadge.tone\"\r\n                                [class.status-pill--rounded]=\"statusBadge.rounded\"\r\n                              >\r\n                                @if (statusBadge.icon) {\r\n                                  <nvb-icon\r\n                                    class=\"status-pill__icon\"\r\n                                    [name]=\"statusBadge.icon\"\r\n                                  ></nvb-icon>\r\n                                }\r\n                                {{ statusBadge.label }}\r\n                              </span>\r\n                            } @else if (resolveCellHtml(row, column); as cellHtml) {\r\n                              <div\r\n                                class=\"table-template-host\"\r\n                                [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                                [innerHTML]=\"cellHtml\"\r\n                                (click)=\"\r\n                                  onTemplateContentClick($event, row, resolveCellValue(row, column))\r\n                                \"\r\n                              ></div>\r\n                            } @else {\r\n                              {{ resolveCellText(row, column) }}\r\n                            }\r\n                          </div>\r\n\r\n                          @if (!isInteractiveColumn(column)) {\r\n                            @if (visibleColumnCellActions(row, column); as columnActions) {\r\n                              @if (columnActions.length > 0) {\r\n                                <div\r\n                                  class=\"table-cell-actions\"\r\n                                  [class.table-cell-actions--icon]=\"\r\n                                    columnCellActionsUseIconButtons(column)\r\n                                  \"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                >\r\n                                  @if (columnCellActionsUseDropdown(column)) {\r\n                                    <nvb-select\r\n                                      class=\"table-cell-actions__select\"\r\n                                      (change)=\"onColumnCellActionSelect(row, column, $event)\"\r\n                                    >\r\n                                      <option value=\"\">\r\n                                        {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                      </option>\r\n                                      @for (action of columnActions; track action.id || $index) {\r\n                                        <option [value]=\"'id:' + (action.id || $index)\">\r\n                                          {{ resolveActionLabel(action) }}\r\n                                        </option>\r\n                                      }\r\n                                    </nvb-select>\r\n                                  } @else {\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"table-cell-actions__button\"\r\n                                        [class.table-cell-actions__button--icon-only]=\"\r\n                                          columnCellActionsUseIconButtons(column) ||\r\n                                          actionHidesText(action)\r\n                                        \"\r\n                                        [attr.title]=\"resolveActionLabel(action)\"\r\n                                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                        (click)=\"runColumnCellAction(action, row, $event, column)\"\r\n                                      >\r\n                                        @if (resolveActionIcon(action); as actionIcon) {\r\n                                          <nvb-icon\r\n                                            class=\"table-action-icon\"\r\n                                            [name]=\"actionIcon\"\r\n                                          ></nvb-icon>\r\n                                        }\r\n                                        @if (\r\n                                          actionRendersText(\r\n                                            action,\r\n                                            columnCellActionsUseButtons(column)\r\n                                          )\r\n                                        ) {\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </td>\r\n                    }\r\n                  }\r\n\r\n                  @if (hasRowActions()) {\r\n                    <td\r\n                      class=\"action-cell\"\r\n                      [attr.data-label]=\"model().actionsLabel || ('table.actions' | uiT: 'Actions')\"\r\n                    >\r\n                      @if (visibleRowActions(row); as rowActions) {\r\n                        @let rowEditing = isInlineEditRow(row, rowIndex);\r\n                        @let inlineActionsEnabled =\r\n                          inlineEditEnabled() && hasInlineEditableColumns();\r\n                        @if (inlineActionsEnabled || rowActions.length > 0) {\r\n                          <div class=\"row-actions row-actions--inline\">\r\n                            @if (inlineActionsEnabled) {\r\n                              @if (rowEditing) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"saveInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">save</span>\r\n                                  <span>{{\r\n                                    isInlineEditBusy(row, rowIndex)\r\n                                      ? ('table.inlineEdit.saving' | uiT: 'Saving')\r\n                                      : ('table.inlineEdit.save' | uiT: 'Save')\r\n                                  }}</span>\r\n                                </button>\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"cancelInlineEdit($event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">close</span>\r\n                                  <span>{{ 'table.inlineEdit.cancel' | uiT: 'Cancel' }}</span>\r\n                                </button>\r\n                              } @else {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  (click)=\"startInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">edit</span>\r\n                                  <span>{{ 'table.inlineEdit.edit' | uiT: 'Redaguoti' }}</span>\r\n                                </button>\r\n                              }\r\n                            }\r\n\r\n                            @if (!rowEditing && rowActions.length > 0) {\r\n                              @if (rowActionsUseDropdown()) {\r\n                                <div class=\"row-actions\">\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__toggle\"\r\n                                    [class.row-actions__toggle--borderless]=\"\r\n                                      rowActionsUseBorderlessDropdownToggle()\r\n                                    \"\r\n                                    (click)=\"toggleActionMenu(rowIndex, rowActions.length, $event)\"\r\n                                    [attr.aria-label]=\"\r\n                                      model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                                    \"\r\n                                  >\r\n                                    <span class=\"material-symbols-outlined\">more_vert</span>\r\n                                  </button>\r\n\r\n                                  @if (openActionMenuRow() === rowIndex) {\r\n                                    <div\r\n                                      class=\"row-actions__menu\"\r\n                                      [class.row-actions__menu--top]=\"\r\n                                        rowActionMenuPosition() === 'top'\r\n                                      \"\r\n                                      [ngStyle]=\"rowActionMenuStyle()\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                    >\r\n                                      @for (action of rowActions; track action.id || $index) {\r\n                                        <button\r\n                                          type=\"button\"\r\n                                          (click)=\"runRowAction(action, row, $event)\"\r\n                                        >\r\n                                          @if (resolveActionIcon(action); as actionIcon) {\r\n                                            <nvb-icon\r\n                                              class=\"table-action-icon\"\r\n                                              [name]=\"actionIcon\"\r\n                                            ></nvb-icon>\r\n                                          }\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        </button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              } @else {\r\n                                @for (action of rowActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__inline-button\"\r\n                                    [class.row-actions__inline-button--icon-only]=\"\r\n                                      rowActionsUseIconButtons() || actionHidesText(action)\r\n                                    \"\r\n                                    [attr.title]=\"resolveActionLabel(action)\"\r\n                                    [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                    (click)=\"runRowAction(action, row, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                      <span>{{ resolveActionLabel(action) }}</span>\r\n                                    }\r\n                                  </button>\r\n                                }\r\n                              }\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n                @if (expandedUsesInline() && isRowExpanded(row, rowIndex)) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row\"\r\n                    [attr.data-row-key]=\"resolveRowExpansionKey(row, rowIndex)\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                            expandedContext: {\r\n                              key: resolveRowExpansionKey(row, rowIndex),\r\n                              row: row,\r\n                              rowIndex: rowIndex,\r\n                            },\r\n                          }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n                @if (\r\n                  expandedUsesInline() &&\r\n                    isEditor() &&\r\n                    rowIndex === 0 &&\r\n                    !isRowExpanded(row, rowIndex) &&\r\n                    editorExpandedPreviewContext();\r\n                  as expandedContext\r\n                ) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualBottomSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualBottomSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <ng-template #expandedContentTemplate let-expandedContext=\"expandedContext\">\r\n        @if (\r\n          expansionEnabled() && isExpandedRowsLoading(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          <div class=\"expanded-row__loading\">\r\n            {{ resolveExpandedLoadingMessage() | uiT: 'Loading details...' }}\r\n          </div>\r\n        } @else if (\r\n          resolveExpandedRowsError(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedError\r\n        ) {\r\n          <div class=\"expanded-row__error\">\r\n            {{ expandedError | uiT: 'Failed to load details.' }}\r\n          </div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n            resolveExpandedTemplateHtml(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedTemplateHtml\r\n        ) {\r\n          <div\r\n            class=\"expanded-row__template\"\r\n            [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n            [innerHTML]=\"expandedTemplateHtml\"\r\n            (click)=\"\r\n              onTemplateContentClick(\r\n                $event,\r\n                expandedContext.row,\r\n                resolveExpandedRows(expandedContext.row, expandedContext.rowIndex),\r\n                expandedContext.row\r\n              )\r\n            \"\r\n          ></div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n          shouldRenderExpandedNestedTable(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          @let expandedRows = resolveExpandedRows(expandedContext.row, expandedContext.rowIndex);\r\n          <table class=\"nested-table\">\r\n            <thead>\r\n              <tr>\r\n                @for (\r\n                  column of expandedDataColumns();\r\n                  track column.id || column.key;\r\n                  let columnIndex = $index\r\n                ) {\r\n                  <th\r\n                    [class]=\"columnAlignClass(column)\"\r\n                    [class.column-focused]=\"isExpandedColumnFocused(column, columnIndex)\"\r\n                    [class.nested-table__header--focusable]=\"isEditor()\"\r\n                    [style.width]=\"columnWidthStyle(column)\"\r\n                    [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                    (focus)=\"onExpandedColumnHeaderFocus(column, columnIndex)\"\r\n                    (click)=\"onExpandedColumnHeaderClick(column, columnIndex, $event)\"\r\n                  >\r\n                    @if (showColumnHeaderLabel(column)) {\r\n                      {{ resolveColumnLabel(column) }}\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (hasExpandedRowActions()) {\r\n                  <th class=\"action-column\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      {{ model().actionsLabel || ('table.actions' | uiT: 'Actions') }}\r\n                    }\r\n                  </th>\r\n                }\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (expandedRow of expandedRows; track $index) {\r\n                <tr>\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td\r\n                      [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                      [class]=\"columnAlignClass(column)\"\r\n                    >\r\n                      <div class=\"table-cell-content\">\r\n                        <div class=\"table-cell-content__value\">\r\n                          @if (isToggleSwitchColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                              [class.nvb-toggle-switch--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-toggle-switch__input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                              <span class=\"nvb-toggle-switch__track\">\r\n                                <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                              </span>\r\n                            </label>\r\n                          } @else if (isSingleCheckboxColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                              [class.nvb-single-checkbox--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </label>\r\n                          } @else if (\r\n                            resolveStatusBadge(expandedRow, column);\r\n                            as expandedStatusBadge\r\n                          ) {\r\n                            <span\r\n                              class=\"status-pill\"\r\n                              [class]=\"'status-pill status-pill--' + expandedStatusBadge.tone\"\r\n                              [class.status-pill--rounded]=\"expandedStatusBadge.rounded\"\r\n                            >\r\n                              @if (expandedStatusBadge.icon) {\r\n                                <nvb-icon\r\n                                  class=\"status-pill__icon\"\r\n                                  [name]=\"expandedStatusBadge.icon\"\r\n                                ></nvb-icon>\r\n                              }\r\n                              {{ expandedStatusBadge.label }}\r\n                            </span>\r\n                          } @else if (resolveCellHtml(expandedRow, column); as expandedCellHtml) {\r\n                            <div\r\n                              class=\"table-template-host\"\r\n                              [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                              [innerHTML]=\"expandedCellHtml\"\r\n                              (click)=\"\r\n                                onTemplateContentClick(\r\n                                  $event,\r\n                                  expandedRow,\r\n                                  resolveCellValue(expandedRow, column),\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          } @else {\r\n                            {{ resolveCellText(expandedRow, column) }}\r\n                          }\r\n                        </div>\r\n\r\n                        @if (!isInteractiveColumn(column)) {\r\n                          @if (\r\n                            visibleColumnCellActions(expandedRow, column, expandedContext.row);\r\n                            as columnActions\r\n                          ) {\r\n                            @if (columnActions.length > 0) {\r\n                              <div\r\n                                class=\"table-cell-actions\"\r\n                                [class.table-cell-actions--icon]=\"\r\n                                  columnCellActionsUseIconButtons(column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @if (columnCellActionsUseDropdown(column)) {\r\n                                  <nvb-select\r\n                                    class=\"table-cell-actions__select\"\r\n                                    (change)=\"\r\n                                      onColumnCellActionSelect(\r\n                                        expandedRow,\r\n                                        column,\r\n                                        $event,\r\n                                        expandedContext.row\r\n                                      )\r\n                                    \"\r\n                                  >\r\n                                    <option value=\"\">\r\n                                      {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                    </option>\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <option [value]=\"'id:' + (action.id || $index)\">\r\n                                        {{ resolveActionLabel(action) }}\r\n                                      </option>\r\n                                    }\r\n                                  </nvb-select>\r\n                                } @else {\r\n                                  @for (action of columnActions; track action.id || $index) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"table-cell-actions__button\"\r\n                                      [class.table-cell-actions__button--icon-only]=\"\r\n                                        columnCellActionsUseIconButtons(column) ||\r\n                                        actionHidesText(action)\r\n                                      \"\r\n                                      [attr.title]=\"resolveActionLabel(action)\"\r\n                                      [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                      (click)=\"\r\n                                        runColumnCellAction(\r\n                                          action,\r\n                                          expandedRow,\r\n                                          $event,\r\n                                          column,\r\n                                          expandedContext.row\r\n                                        )\r\n                                      \"\r\n                                    >\r\n                                      @if (resolveActionIcon(action); as actionIcon) {\r\n                                        <nvb-icon\r\n                                          class=\"table-action-icon\"\r\n                                          [name]=\"actionIcon\"\r\n                                        ></nvb-icon>\r\n                                      }\r\n                                      @if (\r\n                                        actionRendersText(\r\n                                          action,\r\n                                          columnCellActionsUseButtons(column)\r\n                                        )\r\n                                      ) {\r\n                                        <span>{{ resolveActionLabel(action) }}</span>\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                }\r\n                              </div>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      @if (\r\n                        visibleExpandedRowActions(expandedContext.row, expandedRow);\r\n                        as expandedActions\r\n                      ) {\r\n                        @if (expandedActions.length > 0) {\r\n                          @if (rowActionsUseDropdown()) {\r\n                            <nvb-select\r\n                              class=\"table-cell-actions__select\"\r\n                              (change)=\"\r\n                                onExpandedRowActionSelect(expandedContext.row, expandedRow, $event)\r\n                              \"\r\n                            >\r\n                              <option value=\"\">\r\n                                {{ resolveExpandedRowActionsPlaceholder() }}\r\n                              </option>\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <option [value]=\"'id:' + (action.id || $index)\">\r\n                                  {{ resolveActionLabel(action) }}\r\n                                </option>\r\n                              }\r\n                            </nvb-select>\r\n                          } @else {\r\n                            <div\r\n                              class=\"expanded-row__actions\"\r\n                              [class.table-cell-actions--icon]=\"rowActionsUseIconButtons()\"\r\n                            >\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"expanded-row__action\"\r\n                                  [class.expanded-row__action--icon-only]=\"\r\n                                    rowActionsUseIconButtons() || actionHidesText(action)\r\n                                  \"\r\n                                  [attr.title]=\"resolveActionLabel(action)\"\r\n                                  [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                  (click)=\"\r\n                                    runExpandedRowAction(\r\n                                      action,\r\n                                      expandedContext.row,\r\n                                      expandedRow,\r\n                                      $event\r\n                                    )\r\n                                  \"\r\n                                >\r\n                                  @if (resolveActionIcon(action); as actionIcon) {\r\n                                    <nvb-icon\r\n                                      class=\"table-action-icon\"\r\n                                      [name]=\"actionIcon\"\r\n                                    ></nvb-icon>\r\n                                  }\r\n                                  @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  }\r\n                                </button>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n              @if (isEditor() && expandedContext.rowIndex < 0 && expandedRows.length === 0) {\r\n                <tr class=\"nested-table__placeholder-row\" aria-hidden=\"true\">\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td [class]=\"columnAlignClass(column)\">&nbsp;</td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">&nbsp;</td>\r\n                  }\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        } @else if (detailColumns().length > 0) {\r\n          <div class=\"expanded-row__details\">\r\n            @for (column of detailColumns(); track column.id || column.key) {\r\n              <div class=\"expanded-row__detail-item\">\r\n                <div class=\"expanded-row__detail-label\">{{ resolveDetailLabel(column) }}</div>\r\n                <div class=\"expanded-row__detail-value\">\r\n                  @if (resolveStatusBadge(expandedContext.row, column); as detailStatusBadge) {\r\n                    <span\r\n                      class=\"status-pill\"\r\n                      [class]=\"'status-pill status-pill--' + detailStatusBadge.tone\"\r\n                      [class.status-pill--rounded]=\"detailStatusBadge.rounded\"\r\n                    >\r\n                      @if (detailStatusBadge.icon) {\r\n                        <nvb-icon\r\n                          class=\"status-pill__icon\"\r\n                          [name]=\"detailStatusBadge.icon\"\r\n                        ></nvb-icon>\r\n                      }\r\n                      {{ detailStatusBadge.label }}\r\n                    </span>\r\n                  } @else if (resolveCellHtml(expandedContext.row, column); as detailCellHtml) {\r\n                    <div\r\n                      class=\"table-template-host\"\r\n                      [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                      [innerHTML]=\"detailCellHtml\"\r\n                      (click)=\"\r\n                        onTemplateContentClick(\r\n                          $event,\r\n                          expandedContext.row,\r\n                          resolveCellValue(expandedContext.row, column),\r\n                          expandedContext.row\r\n                        )\r\n                      \"\r\n                    ></div>\r\n                  } @else {\r\n                    {{ resolveCellText(expandedContext.row, column) }}\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"expanded-row__empty\">\r\n            {{ resolveExpandedEmptyMessage() | uiT: 'No nested rows' }}\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      @if (expandedUsesSidePanel() && activeExpandedPanelContext(); as expandedContext) {\r\n        <aside class=\"table-detail-panel\" [attr.data-row-key]=\"expandedContext.key\">\r\n          <div class=\"table-detail-panel__header\">\r\n            <strong class=\"table-detail-panel__title\">{{\r\n              resolveDetailsPanelTitle() | uiT: 'Detailed info'\r\n            }}</strong>\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-detail-panel__close\"\r\n              (click)=\"closeExpandedRowPanel($event)\"\r\n              [attr.aria-label]=\"'table.closeDetails' | uiT: 'Close details'\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          </div>\r\n\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n            [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n          />\r\n        </aside>\r\n      }\r\n    </div>\r\n\r\n    @if (model().paginator) {\r\n      <div\r\n        class=\"table-paginator\"\r\n        role=\"navigation\"\r\n        [attr.aria-label]=\"'table.pagination.label' | uiT: 'Table pagination'\"\r\n        [class.table-paginator--flat]=\"flatFooterSurface()\"\r\n        [class.table-paginator--compact]=\"paginatorStyle() === 'compact'\"\r\n        [class.table-paginator--segmented]=\"paginatorStyle() === 'segmented'\"\r\n        [class.table-paginator--align-start]=\"paginatorAlign() === 'start'\"\r\n        [class.table-paginator--align-center]=\"paginatorAlign() === 'center'\"\r\n      >\r\n        <div class=\"table-paginator__content\">\r\n          <div class=\"table-paginator__controls\">\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"firstPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.pagination.first' | uiT: 'First page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">first_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_left</span>\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.prev' | uiT: 'Prev'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                } @else {\r\n                  {{ model().prevLabel || ('table.prev' | uiT: 'Prev') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showNumericPaginator()) {\r\n              <div class=\"table-paginator__pages\">\r\n                @for (page of visiblePageNumbers(); track page) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-paginator__page\"\r\n                    [class.table-paginator__page--active]=\"page === pageIndex()\"\r\n                    (click)=\"goToPage(page)\"\r\n                    [disabled]=\"page === pageIndex()\"\r\n                    [attr.aria-label]=\"'Page ' + (page + 1)\"\r\n                    [attr.aria-current]=\"page === pageIndex() ? 'page' : null\"\r\n                  >\r\n                    {{ page + 1 }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.next' | uiT: 'Next'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                } @else {\r\n                  {{ model().nextLabel || ('table.next' | uiT: 'Next') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"lastPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.pagination.last' | uiT: 'Last page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">last_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_right</span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n\r\n          @if (showPageMeta()) {\r\n            <span class=\"table-paginator__meta\">{{ pageMeta() }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (showPageSizeSelector()) {\r\n          <div class=\"table-paginator__size\">\r\n            <nvb-select\r\n              class=\"table-paginator__size-select\"\r\n              [ngModel]=\"pageSize()\"\r\n              (ngModelChange)=\"setPageSize($event)\"\r\n              [attr.aria-label]=\"'table.pagination.pageSize' | uiT: 'Rows per page'\"\r\n            >\r\n              @for (size of pageSizeOptions(); track size) {\r\n                <option [ngValue]=\"size\">{{ size }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (openExportDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeExportSelectionDialog()\"></div>\r\n      <section\r\n        class=\"table-dialog\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-export-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-export-dialog-title\">\r\n            {{ 'table.export.dialog.title' | uiT: 'Export columns' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeExportSelectionDialog()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <label class=\"table-export__scope\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"exportScope() === 'all'\"\r\n              (change)=\"onExportScopeToggle($event)\"\r\n            />\r\n            <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n          </label>\r\n\r\n          <label class=\"table-dialog__select-all\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"allExportColumnsSelected()\"\r\n              (change)=\"toggleAllExportColumns($event)\"\r\n            />\r\n            <span>{{ 'table.export.columns.all' | uiT: 'Select all columns' }}</span>\r\n          </label>\r\n\r\n          <div class=\"table-export__columns\">\r\n            @for (column of exportColumns(); track column.id || column.key) {\r\n              <label class=\"table-export__column\">\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"nvb-control__checkbox-input\"\r\n                  [checked]=\"isExportColumnSelected(column)\"\r\n                  (change)=\"onExportColumnSelectionChange(column, $event)\"\r\n                />\r\n                <span>{{ resolveColumnLabel(column) }}</span>\r\n              </label>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('csv', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">description</span>\r\n            <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('excel', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">table_view</span>\r\n            <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('pdf', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n            <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openColumnSettingsDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeColumnSettings()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--column-settings\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-column-settings-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-column-settings-dialog-title\">\r\n            {{ columnSettingsDialogTitle() | uiT: 'Columns settings' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeColumnSettings()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <div class=\"table-column-settings\">\r\n            <div class=\"table-column-settings__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"showAllColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"visibility\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.showAll' | uiT: 'Show all' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"resetColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"restart_alt\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.reset' | uiT: 'Reset' }}</span>\r\n              </button>\r\n            </div>\r\n\r\n            <div\r\n              class=\"table-column-settings__list\"\r\n              cdkDropList\r\n              [cdkDropListData]=\"columnSettingsDraft()\"\r\n              (cdkDropListDropped)=\"reorderColumnSettingsRows($event)\"\r\n            >\r\n              @for (column of columnSettingsDraft(); track column.key) {\r\n                <article class=\"table-column-settings__item\" cdkDrag>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-column-settings__drag\"\r\n                    cdkDragHandle\r\n                    [attr.aria-label]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                    [attr.title]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                  >\r\n                    <nvb-icon class=\"table-action-icon\" name=\"drag_indicator\"></nvb-icon>\r\n                  </button>\r\n                  <div class=\"table-column-settings__content\">\r\n                    <label class=\"table-column-settings__toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"column.visible\"\r\n                        (change)=\"\r\n                          setColumnSettingsVisibility(column.key, $any($event.target).checked)\r\n                        \"\r\n                      />\r\n                      <span>{{ column.label || column.key }}</span>\r\n                    </label>\r\n\r\n                    <label class=\"table-column-settings__width\">\r\n                      <div class=\"table-column-settings__width-header\">\r\n                        <span>{{ 'table.columns.settings.width' | uiT: 'Plotis' }}</span>\r\n                        <div class=\"table-column-settings__width-meta\">\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"table-column-settings__width-reset\"\r\n                            [class.table-column-settings__width-reset--active]=\"\r\n                              !hasColumnSettingsCustomWidth(column)\r\n                            \"\r\n                            (click)=\"resetColumnSettingsWidth(column.key)\"\r\n                          >\r\n                            {{ 'table.columns.settings.auto' | uiT: 'Automatinis' }}\r\n                          </button>\r\n                          <span class=\"table-column-settings__width-value\">\r\n                            {{ resolveColumnSettingsWidthDisplay(column) }}\r\n                          </span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"table-column-settings__width-range\">\r\n                        <input\r\n                          type=\"range\"\r\n                          [min]=\"columnSettingsWidthMin\"\r\n                          [max]=\"columnSettingsWidthMax\"\r\n                          [step]=\"columnSettingsWidthStep\"\r\n                          [value]=\"resolveColumnSettingsWidthSliderValue(column)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (input)=\"setColumnSettingsWidth(column.key, $any($event.target).value)\"\r\n                        />\r\n                      </div>\r\n                    </label>\r\n                  </div>\r\n\r\n                  <div class=\"table-column-settings__order\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowFirst(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, -1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveUp' | uiT: 'Move up'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_upward\"></nvb-icon>\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowLast(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, 1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveDown' | uiT: 'Move down'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_downward\"></nvb-icon>\r\n                    </button>\r\n                  </div>\r\n                </article>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button type=\"button\" class=\"table-toolbar__button\" (click)=\"closeColumnSettings()\">\r\n            {{ 'table.columns.settings.cancel' | uiT: 'Cancel' }}\r\n          </button>\r\n          @if (showColumnSettingsSaveAction()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button\"\r\n              (click)=\"saveColumnSettings($event)\"\r\n            >\r\n              <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n              <span>{{ 'table.columns.settings.save' | uiT: 'Save settings' }}</span>\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-toolbar__button table-toolbar__button--primary\"\r\n            (click)=\"applyColumnSettings($event)\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n            <span>{{ 'table.columns.settings.apply' | uiT: 'Apply settings' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openSavedFiltersDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeSavedFilters()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--filters\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-saved-filters-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-saved-filters-dialog-title\">\r\n            {{ 'table.filters.dialog.title' | uiT: 'Saved filters' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeSavedFilters()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__tabs\" role=\"tablist\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'create'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'create'\"\r\n            (click)=\"setSavedFilterDialogTab('create')\"\r\n          >\r\n            {{ 'table.filters.dialog.new' | uiT: 'Create new' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'list'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'list'\"\r\n            (click)=\"setSavedFilterDialogTab('list')\"\r\n          >\r\n            {{ 'table.filters.dialog.list' | uiT: 'Filter list' }}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          @if (savedFilterDialogTab() === 'create') {\r\n            <div class=\"table-filter-form\">\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.name' | uiT: 'Name' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterName()\"\r\n                  (ngModelChange)=\"savedFilterName.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.description' | uiT: 'Description' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterDescription()\"\r\n                  (ngModelChange)=\"savedFilterDescription.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.code' | uiT: 'Code' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterCode()\"\r\n                  (ngModelChange)=\"savedFilterCode.set($event)\"\r\n                />\r\n              </label>\r\n            </div>\r\n          } @else {\r\n            <div class=\"table-filter-list\">\r\n              @if (savedFiltersLoading()) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.loading' | uiT: 'Loading...' }}\r\n                </div>\r\n              } @else if (savedFilters().length === 0) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.empty' | uiT: 'No saved filters' }}\r\n                </div>\r\n              } @else {\r\n                @for (savedFilter of savedFilters(); track savedFilter.id) {\r\n                  <article class=\"table-filter-list__item\">\r\n                    <div class=\"table-filter-list__meta\">\r\n                      <strong>{{ savedFilter.name }}</strong>\r\n                      @if (savedFilter.description) {\r\n                        <span>{{ savedFilter.description }}</span>\r\n                      }\r\n                      @if (savedFilter.code) {\r\n                        <small>{{ savedFilter.code }}</small>\r\n                      }\r\n                    </div>\r\n                    <div class=\"table-filter-list__actions\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"applySavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.apply' | uiT: 'Apply' }}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"deleteSavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.delete' | uiT: 'Delete' }}\r\n                      </button>\r\n                    </div>\r\n                  </article>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (savedFilterDialogTab() === 'create') {\r\n          <footer class=\"table-dialog__footer table-dialog__footer--single\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button table-toolbar__button--primary\"\r\n              [disabled]=\"savedFilterBusy() || !savedFilterName().trim()\"\r\n              (click)=\"saveCurrentFilter($event)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">save</span>\r\n              <span>{{ 'table.filters.save' | uiT: 'Save filter' }}</span>\r\n            </button>\r\n          </footer>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.table-shell{--table-control-height: 32px;--table-control-radius: var(--nvb-control-radius, 4px);--table-control-font-size: 13px;--table-control-padding-x: 10px;--table-surface-border: color-mix( in oklab, var(--color-neutral-300) 78%, var(--color-surface-mix-target, white) );--table-surface-border-strong: color-mix( in oklab, var(--color-neutral-300) 92%, var(--color-surface-mix-target, white) );--table-surface-radius: var(--nvb-table-radius, var(--nvb-card-radius, var(--radius-md, 4px)));--table-sticky-header-offset: 0px;position:relative;background:transparent;container-type:inline-size;display:flex;flex-direction:column;gap:0;font-family:var(--nvb-font-family)}.table-shell--editor .table-toolbar{z-index:1}.table-shell--editor .table-quick-search,.table-shell--editor .table-toolbar__button--detailed-toggle,.table-shell--editor .table-export,.table-shell--editor .table-header-menu,.table-shell--editor .table-header-actions,.table-shell--editor .table-detailed-search{pointer-events:none}.table-shell--editor .table-toolbar__add-element,.table-shell--editor .table-toolbar__drop-item--editor{pointer-events:auto}.table-sticky-header{display:flex;flex-direction:column;gap:0}.table-sticky-header--enabled{position:sticky;top:0;z-index:38}.table-sticky-header--enabled.table-sticky-header--pinned{background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8)}.table-sticky-header--enabled.table-sticky-header--pinned .table-toolbar--flat{background:var(--color-neutral-000)}.table-sticky-clone{position:absolute;inset-inline:0;top:100%;z-index:37;pointer-events:none}.table-sticky-clone__viewport{overflow:hidden;background:var(--color-neutral-000);border:1px solid var(--table-surface-border);border-top:none;box-shadow:var(--nvb-shadow-8)}.table-sticky-clone__table{margin:0;width:max-content;min-width:100%;transform:translate(0)}.table-sticky-clone__table thead th{position:static;top:auto;z-index:auto}.table-sticky-clone__row th{cursor:default}.table-sticky-clone__row th.sortable{cursor:pointer}.table-frame{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);overflow:hidden;background:var(--color-neutral-000);display:flex;align-items:stretch;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent),inset 0 1px color-mix(in oklab,var(--color-neutral-000) 84%,transparent)}.table-frame__scroller{flex:1 1 auto;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden}.table-frame__scroller--virtual{overflow-y:auto;overscroll-behavior:contain}.table-frame--with-toolbar{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.table-frame--with-paginator{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.table-toolbar{display:flex;position:relative;z-index:32;justify-content:space-between;align-items:center;gap:8px;padding:8px;border:1px solid var(--table-surface-border);border-bottom:none;border-top-left-radius:var(--table-surface-radius);border-top-right-radius:var(--table-surface-radius);background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));flex-wrap:wrap}.table-toolbar--flat{padding:0 0 8px;border:none;border-radius:0;background:transparent}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__center{flex:1 1 260px;min-width:180px}.table-toolbar__center--controls-only{justify-content:flex-end}.table-toolbar__right{justify-content:flex-end;flex:0 0 auto;margin-left:auto}.table-toolbar__actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__button,.table-export__action,.table-cell-actions__button,.row-actions__inline-button,.row-actions__toggle,.selection-actions__toggle,.table-detailed-search__remove,.table-quick-search__apply,.table-quick-search__clear,.table-detailed-search__multi-select-trigger,.table-detailed-search__date-trigger,.table-detailed-search__date-header>button,.table-detailed-search__date-actions>button{font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500);line-height:1.3;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease;outline:0}.table-toolbar__button:focus-visible,.table-export__action:focus-visible,.table-cell-actions__button:focus-visible,.row-actions__inline-button:focus-visible,.row-actions__toggle:focus-visible,.selection-actions__toggle:focus-visible,.table-detailed-search__remove:focus-visible,.table-quick-search__apply:focus-visible,.table-quick-search__clear:focus-visible,.table-detailed-search__multi-select-trigger:focus-visible,.table-detailed-search__date-trigger:focus-visible,.table-detailed-search__date-header>button:focus-visible,.table-detailed-search__date-actions>button:focus-visible{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-toolbar,.table-detailed-search,.table-paginator{--nvb-input-height: var(--table-control-height);--nvb-input-radius: var(--table-control-radius);--nvb-select-trigger-border-color: var(--table-surface-border-strong);--nvb-select-trigger-padding-inline-start: var(--table-control-padding-x);--nvb-select-trigger-padding-inline-end: 26px;--nvb-select-arrow-inset-inline-end: 9px;--nvb-select-menu-border: var(--table-surface-border-strong);--nvb-select-menu-radius: var(--table-control-radius);--nvb-select-option-min-height: 28px;--nvb-select-option-padding-block: 5px;font-size:var(--table-control-font-size)}.table-toolbar__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-toolbar__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-toolbar__button--header-action{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-300);background:var(--color-neutral-000);color:var(--color-neutral-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary{border-color:var(--color-primary-300);background:var(--color-neutral-000);color:var(--color-primary-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050);border-color:var(--color-primary-400)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk{border-color:var(--color-risk-300);background:var(--color-neutral-000);color:var(--color-risk-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050);border-color:var(--color-risk-400)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral:hover{border-color:var(--color-neutral-800);background:var(--color-neutral-800)}.table-toolbar__button--filled.table-toolbar__button--tone-primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-primary:hover{border-color:var(--color-primary-600);background:var(--color-primary-600)}.table-toolbar__button--filled.table-toolbar__button--tone-risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-risk:hover{border-color:var(--color-risk-600);background:var(--color-risk-600)}.table-toolbar__button--text{border-color:transparent;background:transparent;box-shadow:none}.table-toolbar__button--text.table-toolbar__button--tone-neutral{color:var(--color-neutral-700)}.table-toolbar__button--text.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--text.table-toolbar__button--tone-primary{color:var(--color-primary-700)}.table-toolbar__button--text.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050)}.table-toolbar__button--text.table-toolbar__button--tone-risk{color:var(--color-risk-700)}.table-toolbar__button--text.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050)}.table-toolbar__button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.table-toolbar__button span.material-symbols-outlined{font-size:16px;line-height:1}.table-action-icon{font-size:16px}.table-toolbar__button--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--primary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)}.table-toolbar__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-toolbar__badge{min-width:16px;height:16px;border-radius:999px;background:var(--color-primary-500);color:var(--color-neutral-000);display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 4px}.table-toolbar__custom{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.table-toolbar__dropzone{position:relative;z-index:24;width:auto;max-width:100%;flex:0 1 auto;min-width:0;min-height:var(--table-control-height);display:flex;align-items:center;gap:6px;overflow:visible}.table-toolbar__dropzone--center{width:100%;flex:1 1 auto}.table-toolbar__center--controls-only .table-toolbar__dropzone--center{width:auto;flex:0 0 auto}.table-toolbar__add-element{position:relative;display:inline-flex;align-items:center;max-width:none}.table-toolbar__button--add-element{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;justify-content:center}.table-toolbar__button--add-element span{font-size:16px}.table-toolbar__add-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;max-height:280px;overflow:auto;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:4px;z-index:42}.table-toolbar__add-menu-item{width:100%;border:none;background:transparent;border-radius:6px;padding:8px 10px;text-align:left;color:var(--color-neutral-700);font-size:13px;cursor:pointer}.table-toolbar__add-menu-item:hover{background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-surface-mix-target, white))}.table-toolbar__drop-items{width:auto;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow:visible}.table-toolbar__center--controls-only .table-toolbar__drop-items{flex:0 0 auto}.table-toolbar__drop-item{position:relative;min-width:0;max-width:none;flex:0 0 auto;border:none;border-radius:0;background:transparent;padding:0}.table-toolbar__drop-item runtime-lazy-element-outlet{display:block;width:auto;min-width:0}.table-toolbar__drop-item--editor{cursor:pointer;padding:5px 27px 5px 5px}.table-toolbar__drop-item--editor .table-toolbar__drop-remove{right:5px}.table-toolbar__drop-item--focused{border-radius:var(--table-control-radius);background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-primary-500) 46%,transparent)}.table-toolbar__drop-item--editor runtime-lazy-element-outlet{pointer-events:none}.table-toolbar__drop-remove{position:absolute;top:50%;right:0;transform:translateY(-50%);width:18px;min-width:18px;height:18px;border:1px solid var(--color-neutral-200);border-radius:5px;background:var(--color-neutral-000);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-toolbar__drop-remove span{font-size:14px}.table-toolbar__drop-remove:hover{border-color:var(--color-risk-300);color:var(--color-risk-600);background:var(--color-risk-050)}.table-toolbar__drop-placeholder{width:100%;font-size:12px;color:var(--color-neutral-500);padding:2px 4px 4px}.table-toolbar__drop-item ::ng-deep .field{gap:0}.table-toolbar__drop-item ::ng-deep .field__text-warpper{display:none}.table-toolbar__drop-item ::ng-deep .field__description{display:none}.table-header-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.table-header-menu{min-width:220px;display:inline-flex;align-items:center}.table-header-menu--actions{min-width:min(300px,100%)}.table-header-menu__select{width:100%}.table-quick-search{min-width:216px;border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));background:var(--nvb-input-bg, var(--color-neutral-000));border-radius:var(--table-control-radius);min-height:var(--table-control-height);display:inline-flex;align-items:center;padding:0 5px;gap:2px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-quick-search:focus-within{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-quick-search input{border:none;outline:none;background:transparent;width:100%;min-height:calc(var(--table-control-height) - 2px);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);color:var(--nvb-input-text-color, var(--color-neutral-700));padding:0 5px}.table-quick-search input:focus{outline:none;box-shadow:none}.table-quick-search input::placeholder{color:var(--nvb-input-placeholder-color, var(--color-neutral-500))}.table-quick-search__clear,.table-quick-search__apply{width:24px;min-width:24px;height:24px;border:1px solid transparent;border-radius:var(--table-control-radius);background:transparent;color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-quick-search__apply span{font-size:16px}.table-quick-search__apply:hover{background:var(--color-neutral-100)}.table-quick-search__clear span{font-size:16px}.table-quick-search__clear:hover{background:var(--color-neutral-100)}.table-export{position:relative;display:inline-flex;align-items:center;justify-content:flex-end}.table-export__chevron{font-size:16px}.table-export__menu{position:fixed;z-index:var(--nvb-floating-overlay-z-index, 2147483000);top:0;left:0;min-width:268px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:8px;display:flex;flex-direction:column;gap:8px}.table-export__menu--top{transform:translateY(calc(-100% - 6px))}.table-export__scope{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-neutral-700)}.table-export__scope input{width:16px;height:16px}.table-export__actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.table-export__action{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:auto;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.table-export__action span.material-symbols-outlined{font-size:16px}.table-export__action:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-export__action:disabled{opacity:.55;cursor:not-allowed}.table-detailed-search{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent)}.table-detailed-search__rows{display:flex;flex-direction:column;gap:8px}.table-detailed-search__row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr) auto;gap:8px;align-items:stretch}.table-detailed-search__row select,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]){border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);padding:0 var(--table-control-padding-x);width:100%;min-width:0;line-height:1.3;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-detailed-search__row select:focus,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring);outline:0}.table-detailed-search__row>*{min-width:0}.table-detailed-search__boolean-toggle{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);display:inline-flex;align-items:center;gap:8px;padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);-webkit-user-select:none;user-select:none}.table-detailed-search__boolean-toggle .nvb-control__checkbox-input{margin:0}.table-detailed-search__remove{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--color-risk-600);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;align-self:stretch}.table-detailed-search__remove span{font-size:16px}.table-detailed-search__remove:hover{background:var(--color-risk-050);border-color:var(--color-risk-300)}.table-detailed-search__actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.table-detailed-search__multi-select{position:relative;min-width:0}.table-detailed-search__multi-select-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__multi-select-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__multi-select-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__multi-select-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__multi-select-placeholder{color:var(--color-neutral-500)}.table-detailed-search__multi-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);max-height:240px;overflow:auto;z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:6px;display:flex;flex-direction:column;gap:2px}.table-detailed-search__multi-select-option{border-radius:var(--nvb-control-radius);min-height:32px;padding:6px 8px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-size:13px}.table-detailed-search__multi-select-option:hover{background:var(--color-neutral-100)}.table-detailed-search__multi-select-empty{color:var(--color-neutral-500);font-size:12px;padding:8px}.table-detailed-search__date{position:relative;min-width:0}.table-detailed-search__date-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__date-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__date-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__date-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__date-placeholder{color:var(--color-neutral-500)}.table-detailed-search__date-menu{position:absolute;top:calc(100% + 4px);left:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);width:280px;max-width:min(92vw,320px);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:8px;display:flex;flex-direction:column;gap:8px}.table-detailed-search__date-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detailed-search__date-header>span{font-size:13px;font-weight:600;color:var(--color-neutral-700);text-transform:capitalize}.table-detailed-search__date-header>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));border-radius:var(--nvb-control-radius);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detailed-search__date-header>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-detailed-search__date-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-weekdays>span{text-align:center;font-size:11px;color:var(--color-neutral-500);text-transform:uppercase}.table-detailed-search__date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-day{border:1px solid transparent;border-radius:6px;background:transparent;color:var(--color-neutral-700);min-height:30px;font-size:12px;cursor:pointer}.table-detailed-search__date-day:hover{background:var(--color-neutral-100)}.table-detailed-search__date-day--outside{color:var(--color-neutral-400)}.table-detailed-search__date-day--today{border-color:var(--color-primary-300)}.table-detailed-search__date-day--selected{background:var(--color-primary-500);color:var(--color-neutral-000)}.table-detailed-search__date-actions{display:flex;justify-content:flex-end}.table-detailed-search__date-actions>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));border-radius:6px;background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));min-height:30px;padding:0 10px;cursor:pointer}.table-detailed-search__date-actions>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.nvb-table{width:100%;border-collapse:collapse;table-layout:auto;background:var(--color-neutral-000)}.nvb-table th,.nvb-table td{border-bottom:1px solid var(--table-surface-border);padding:7px 10px;font-size:13px;line-height:18px;vertical-align:middle}.table-cell-content{display:flex;flex-direction:column;gap:6px;min-width:0}.table-cell-content__value{min-width:0;word-break:break-word}.table-interactive-control{display:inline-flex;align-items:center;justify-content:flex-start;min-height:24px;cursor:pointer}.table-interactive-control--toggle.nvb-toggle-switch,.table-interactive-control--checkbox.nvb-single-checkbox{gap:0;min-height:24px}.table-interactive-control--toggle.nvb-toggle-switch--disabled,.table-interactive-control--checkbox.nvb-single-checkbox--disabled{opacity:.6;cursor:not-allowed}.table-interactive-control--checkbox .nvb-single-checkbox__input{margin:0}.table-interactive-control--toggle .nvb-toggle-switch__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.table-interactive-control--toggle .nvb-toggle-switch__track{position:relative;width:36px;height:20px;border-radius:999px;border:1px solid var(--color-neutral-300);background:var(--color-neutral-100);transition:border-color .16s ease,background-color .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:999px;background:var(--color-neutral-000);box-shadow:0 1px 3px #0003;transition:transform .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track{border-color:var(--color-primary-500);background:var(--color-primary-500)}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track .nvb-toggle-switch__thumb{transform:translate(16px)}.table-template-host{display:block;min-width:0}.table-row-template-cell{min-width:0}.table-row-template-host{display:block;width:100%;min-width:0}.table-cell-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-cell-actions__select{min-width:170px}.table-cell-actions__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer}.table-cell-actions__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-cell-actions__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-cell-actions__button span.material-symbols-outlined{font-size:16px}.nvb-table th{background:color-mix(in oklab,var(--color-neutral-050) 34%,var(--color-neutral-000));color:var(--color-neutral-800);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}.nvb-table--sticky-header.nvb-table--virtual-scroll thead th{position:sticky;top:var(--table-sticky-header-offset, 0px);z-index:26;background-clip:padding-box}.table-frame--with-toolbar .nvb-table thead th{border-top:1px solid var(--table-surface-border)}.nvb-table th.sorted-active{color:var(--color-primary-700);background:color-mix(in oklab,var(--color-primary-500) 7%,var(--color-surface-mix-target, white))}.nvb-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nvb-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.nvb-table th.sortable:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-surface-mix-target, white))}.sort-icon{font-size:16px;margin-left:4px;vertical-align:middle;color:var(--color-neutral-500)}.sort-icon--active{color:var(--color-primary-600)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.empty-cell{text-align:center;color:var(--color-neutral-500);padding:14px 10px}.action-column,.action-cell{min-width:56px;width:auto;text-align:right}.action-header{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;position:relative}.action-header__label{display:inline-flex;align-items:center;gap:4px}.expand-column,.expand-cell{width:32px;min-width:32px;text-align:center}.expand-toggle{border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,var(--color-primary-050) 4%);border-radius:var(--nvb-button-radius, var(--nvb-control-radius, 4px));width:28px;min-width:28px;height:28px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;color:var(--color-neutral-600);box-shadow:0 1px 2px #0000000a}.expand-toggle:hover{border-color:color-mix(in oklab,var(--color-primary-300) 70%,transparent);background:color-mix(in oklab,var(--color-primary-050) 92%,white);color:var(--color-primary-700)}.expand-toggle span{font-size:16px;transition:transform .16s ease}.expand-toggle--expanded span{transform:rotate(90deg)}.expand-toggle--expanded{border-color:color-mix(in oklab,var(--color-primary-300) 78%,transparent);background:color-mix(in oklab,var(--color-primary-050) 88%,white);color:var(--color-primary-700)}.select-column,.select-cell{width:42px;text-align:center}.select-column input,.select-cell input{width:16px;min-width:16px;height:16px;min-height:16px;cursor:pointer}.row-actions{position:relative;display:inline-flex;justify-content:flex-end}.row-actions--inline{gap:6px;flex-wrap:wrap}.row-actions__inline-button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;justify-content:center;align-items:center;gap:6px;cursor:pointer}.row-actions__inline-button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__inline-button:disabled,.row-actions__toggle:disabled{opacity:.65;cursor:wait}.row-actions__inline-button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0}.row-actions__inline-button span.material-symbols-outlined{font-size:16px}.row-actions__toggle{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.row-actions__toggle--borderless{border-color:transparent;background:transparent;color:var(--color-neutral-600);box-shadow:none}.row-actions__toggle span{font-size:16px}.row-actions__toggle:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__toggle--borderless:hover{border-color:transparent;background:var(--color-neutral-100);color:var(--color-neutral-800)}.row-actions__menu{position:fixed;top:0;left:0;min-width:160px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.row-actions__menu--top{transform:translateY(calc(-100% - 6px))}.row-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.row-actions__menu button:hover{background:var(--color-neutral-100)}.row-actions__menu button span.material-symbols-outlined{font-size:16px}.row-actions__empty{font-size:11px;color:var(--color-neutral-400)}.nvb-table__row--editing>td{background:color-mix(in srgb,var(--color-primary-050) 72%,white)}.table-inline-edit{width:100%;min-height:34px;border:1px solid var(--color-primary-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-900);font:inherit;padding:6px 10px}.table-inline-edit--textarea{resize:vertical;min-height:72px}.table-inline-edit:focus{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring)}.table-virtual-spacer-row td{padding:0;border:0;background:transparent}.table-virtual-spacer-cell{height:0}.selection-actions{position:relative;display:inline-flex;align-items:center}.selection-actions__toggle{min-width:var(--table-control-height);min-height:var(--table-control-height);border:1px solid var(--color-primary-300);border-radius:var(--table-control-radius);background:var(--color-primary-050);color:var(--color-primary-700);display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 var(--table-control-padding-x);cursor:pointer}.selection-actions__toggle span.material-symbols-outlined{font-size:16px}.selection-actions__count{min-width:16px;height:16px;border-radius:999px;font-size:10px;font-weight:600;color:var(--color-neutral-000);background:var(--color-primary-600);display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.selection-actions__menu{position:fixed;top:0;left:0;min-width:190px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.selection-actions__menu--top{transform:translateY(calc(-100% - 6px))}.selection-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.selection-actions__menu button:hover{background:var(--color-neutral-100)}.selection-actions__menu button span.material-symbols-outlined{font-size:16px}.status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:20px;gap:4px;border-radius:var(--table-control-radius);padding:2px 8px;font-size:11px;line-height:1.2;border:1px solid transparent}.status-pill--rounded{border-radius:999px}.status-pill__icon{font-size:14px}.status-pill--neutral{background:var(--color-neutral-100);color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.status-pill--success{background:color-mix(in oklab,var(--color-success-500) 14%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-success-500) 80%,black);border-color:color-mix(in oklab,var(--color-success-500) 28%,var(--color-surface-mix-target, white))}.status-pill--danger,.status-pill--risk{background:var(--color-risk-050);color:var(--color-risk-700);border-color:var(--color-risk-300)}.status-pill--warning{background:color-mix(in oklab,var(--color-warning-500) 18%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-warning-500) 80%,black);border-color:color-mix(in oklab,var(--color-warning-500) 36%,var(--color-surface-mix-target, white))}.status-pill--info,.status-pill--primary{background:color-mix(in oklab,var(--color-primary-500) 14%,var(--color-surface-mix-target, white));color:var(--color-primary-700);border-color:color-mix(in oklab,var(--color-primary-500) 30%,var(--color-surface-mix-target, white))}.nvb-table__row--expanded td{background:color-mix(in oklab,var(--color-primary-500) 6%,var(--color-surface-mix-target, white))}.table-expanded-inline-row__cell{padding:0!important;background:transparent}.table-expanded-inline-row__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 4%,var(--color-surface-mix-target, white));border-top:1px solid var(--color-neutral-200)}.table-detail-panel{flex:0 0 clamp(260px,34%,420px);min-width:260px;max-width:420px;border-left:1px solid var(--color-neutral-200);background:color-mix(in oklab,var(--color-neutral-000) 94%,var(--color-surface-mix-target, white));padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}.table-detail-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detail-panel__title{font-size:13px;color:var(--color-neutral-700)}.table-detail-panel__close{width:24px;min-width:24px;height:24px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detail-panel__close span{font-size:16px}.table-detail-panel__close:hover{border-color:var(--color-neutral-400);background:color-mix(in oklab,var(--color-neutral-100) 88%,var(--color-surface-mix-target, white))}.expanded-row__template{color:var(--color-neutral-700);font-size:13px}.expanded-row__loading,.expanded-row__error,.expanded-row__empty{border:1px dashed var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-050);padding:10px 12px;font-size:12px}.expanded-row__loading,.expanded-row__empty{color:var(--color-neutral-500)}.expanded-row__error{color:var(--color-risk-700);border-color:var(--color-risk-300);background:var(--color-risk-050)}.expanded-row__details{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.expanded-row__detail-item{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:4px}.expanded-row__detail-label{font-size:11px;color:var(--color-neutral-500);font-weight:600}.expanded-row__detail-value{font-size:13px;color:var(--color-neutral-700);word-break:break-word}.nested-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--color-neutral-200);border-radius:6px;overflow:hidden}.nested-table th,.nested-table td{border-bottom:1px solid var(--color-neutral-200);padding:6px 8px;font-size:12px}.nested-table th{background:var(--color-neutral-050);color:var(--color-neutral-700)}.nested-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nested-table__header--focusable{cursor:pointer}.nested-table__placeholder-row td{color:transparent;min-height:32px}.nested-table tr:last-child td{border-bottom:none}.expanded-row__actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.expanded-row__action{border:1px solid var(--color-neutral-300);background:#fff;border-radius:6px;padding:4px 6px;display:inline-flex;align-items:center;gap:4px;color:var(--color-neutral-700);cursor:pointer;font-size:11px}.expanded-row__action--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);padding:0;justify-content:center}.expanded-row__action span.material-symbols-outlined{font-size:14px}.table-skeleton__row td{padding-top:10px;padding-bottom:10px}.table-skeleton__line{display:block;height:12px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-skeleton__dot{display:inline-block;width:16px;height:16px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-200) 88%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-neutral-300) 75%,transparent)}.table-skeleton__dot--action{width:22px;height:22px;border-radius:8px}.table-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:stretch;padding:12px;font-size:13px;background:color-mix(in oklab,var(--color-neutral-000) 90%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--color-neutral-700);z-index:5;animation:table-loading-fade .16s ease-out}.table-loading__skeleton{width:min(100%,980px);margin:0 auto;display:grid;gap:10px;padding:12px;border-radius:10px;border:1px solid color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,transparent);box-shadow:0 1px color-mix(in oklab,var(--color-neutral-100) 80%,transparent),0 12px 24px color-mix(in oklab,var(--color-neutral-900) 8%,transparent)}.table-loading__row{height:16px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-loading__row:first-child{height:22px;width:96%;border-radius:8px}.table-loading__row:nth-child(2){width:90%}.table-loading__row:nth-child(3){width:94%}.table-loading__row:nth-child(4){width:86%}.table-loading__row:nth-child(5){width:92%}.table-loading__label{align-self:center;font-size:11px;font-weight:500;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 86%,transparent);border:1px solid color-mix(in oklab,var(--color-neutral-300) 66%,transparent);color:var(--color-neutral-600)}.table-paginator{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 10px;background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));border:1px solid var(--table-surface-border);border-top:none;border-bottom-left-radius:var(--table-surface-radius);border-bottom-right-radius:var(--table-surface-radius);flex-wrap:wrap}.table-paginator__content,.table-paginator__controls{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.table-paginator--align-start{justify-content:flex-start}.table-paginator--align-center{justify-content:center}.table-paginator__size{display:inline-flex;align-items:center;min-width:0;margin-inline-start:auto}.table-paginator--align-start .table-paginator__size,.table-paginator--align-center .table-paginator__size{margin-inline-start:0}.table-paginator__nav,.table-paginator__page{border:1px solid var(--table-surface-border-strong);background:var(--color-neutral-000);color:var(--color-neutral-700);border-radius:var(--table-control-radius);min-width:var(--table-control-height);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);cursor:pointer;transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-paginator__nav{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.table-paginator__nav:not(:disabled):hover,.table-paginator__page:not(:disabled):hover{border-color:var(--color-primary-300);background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator__nav--icon{min-width:var(--table-control-height);width:var(--table-control-height);padding:0}.table-paginator__nav--icon span{font-size:16px;color:inherit}.table-paginator__pages{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}.table-paginator__size-select{width:84px;min-width:84px}.table-paginator__nav:disabled,.table-paginator__page:disabled{opacity:1;cursor:not-allowed;background:color-mix(in oklab,var(--color-neutral-100) 58%,var(--color-surface-mix-target, white));border-color:color-mix(in oklab,var(--color-neutral-300) 54%,var(--color-surface-mix-target, white));color:var(--color-neutral-400);box-shadow:none}.table-paginator__page--active,.table-paginator__page--active:disabled{opacity:1;border-color:var(--color-primary-500);background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.table-paginator__meta{font-size:12px;color:var(--color-neutral-600)}.table-paginator--compact{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--compact .table-paginator__content,.table-paginator--compact .table-paginator__controls,.table-paginator--compact .table-paginator__pages{gap:6px}.table-paginator--compact .table-paginator__nav,.table-paginator--compact .table-paginator__page{min-width:30px;min-height:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);box-shadow:none}.table-paginator--compact .table-paginator__nav--icon{width:30px;padding:0}.table-paginator--compact .table-paginator__nav:not(:disabled):hover,.table-paginator--compact .table-paginator__page:not(:disabled):hover{border-color:color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-surface-mix-target, white));color:var(--color-neutral-900)}.table-paginator--compact .table-paginator__page--active,.table-paginator--compact .table-paginator__page--active:disabled{border-color:var(--color-neutral-950);background:var(--color-neutral-950);color:var(--color-neutral-000);font-weight:700}.table-paginator--compact .table-paginator__nav:disabled,.table-paginator--compact .table-paginator__page:disabled{opacity:.4;background:transparent;border-color:transparent;color:var(--color-neutral-400)}.table-paginator--compact .table-paginator__meta{padding:0 6px}.table-paginator--compact .table-paginator__size{margin-inline-start:auto}.table-paginator--compact .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--segmented{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__content{gap:10px}.table-paginator--segmented .table-paginator__controls{gap:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--table-control-radius);overflow:hidden;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__pages{gap:0}.table-paginator--segmented .table-paginator__nav,.table-paginator--segmented .table-paginator__page{min-width:32px;min-height:32px;height:32px;padding:0 10px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);box-shadow:none}.table-paginator--segmented .table-paginator__nav--icon{width:32px;padding:0}.table-paginator--segmented .table-paginator__nav+.table-paginator__nav,.table-paginator--segmented .table-paginator__nav+.table-paginator__pages,.table-paginator--segmented .table-paginator__pages+.table-paginator__nav,.table-paginator--segmented .table-paginator__pages+.table-paginator__pages,.table-paginator--segmented .table-paginator__page+.table-paginator__page{border-inline-start:1px solid color-mix(in oklab,var(--color-neutral-300) 86%,transparent)}.table-paginator--segmented .table-paginator__nav:not(:disabled):hover,.table-paginator--segmented .table-paginator__page:not(:disabled):hover{background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator--segmented .table-paginator__page--active,.table-paginator--segmented .table-paginator__page--active:disabled{background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:700}.table-paginator--segmented .table-paginator__nav:disabled,.table-paginator--segmented .table-paginator__page:disabled{opacity:1;background:transparent;color:var(--color-neutral-400);border-color:transparent}.table-paginator--segmented .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--compact.table-paginator--flat,.table-paginator--segmented.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.nvb-table--grid th,.nvb-table--grid td{border-right:1px solid var(--table-surface-border)}.nvb-table--grid th:last-child,.nvb-table--grid td:last-child{border-right:none}.nvb-table--striped tbody tr:nth-child(2n){background:color-mix(in oklab,var(--color-neutral-050) 74%,var(--color-surface-mix-target, white))}.nvb-table--row-hover tbody>tr:not(.expanded-row):hover>td{background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-surface-mix-target, white))}.nvb-table__row--active>td{background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white))}.nvb-table--force-stack thead{display:none}.nvb-table--force-stack,.nvb-table--force-stack tbody,.nvb-table--force-stack tr,.nvb-table--force-stack td{display:block;width:100%}.nvb-table--force-stack tr{display:block;width:100%;border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--force-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--force-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--force-stack .action-cell{justify-items:end}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--force-stack .expand-cell:before,.nvb-table--force-stack .table-expanded-inline-row__cell:before,.nvb-table--force-stack .table-row-template-cell:before{content:none}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--force-stack .table-expanded-inline-row__content{width:100%}.table-dialog-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:1500}.table-dialog{--nvb-floating-overlay-z-index: 1520;--nvb-page-margin-bottom: 0px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,760px);max-height:84vh;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);z-index:1510;overflow:hidden;min-height:0;outline:0}.table-dialog--filters{width:min(92vw,680px)}.table-dialog--column-settings{width:min(92vw,620px)}.table-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);flex-shrink:0}.table-dialog__header h4{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900)}.table-dialog__close{width:32px;height:32px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.table-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.table-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.table-dialog__close span{font-size:18px}.table-dialog__body{padding:16px 24px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1 1 auto;min-height:0}.table-dialog__select-all{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-dialog__footer{border-top:1px solid var(--color-neutral-200);padding:16px 24px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0}.table-dialog__footer .table-export__action,.table-dialog__footer .table-toolbar__button{width:100%;justify-content:center}.table-dialog__footer--single{grid-template-columns:1fr}.table-dialog__tabs{display:flex;align-items:center;gap:4px;padding:0 24px;border-bottom:1px solid var(--color-neutral-200)}.table-dialog__tab{position:relative;min-height:40px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);font-size:13px;line-height:20px;font-weight:600;padding:0 12px;cursor:pointer}.table-dialog__tab:hover{color:var(--color-neutral-900);background:color-mix(in oklab,var(--color-neutral-100) 72%,transparent)}.table-dialog__tab--active{color:var(--color-primary-700)}.table-dialog__tab--active:after{content:\"\";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:999px;background:var(--color-primary-600)}.table-dialog__tab:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.table-export__columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.table-column-settings{display:flex;flex-direction:column;gap:10px}.table-column-settings__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.table-column-settings__list{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,520px);overflow:auto;padding-right:2px}.table-column-settings__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:6px 8px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;background:var(--color-neutral-000)}.table-column-settings__content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,180px);gap:10px;align-items:center}.table-column-settings__drag{width:32px;min-width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:grab;flex:0 0 auto}.table-column-settings__drag:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__drag:active{cursor:grabbing}.table-column-settings__list.cdk-drop-list-dragging .table-column-settings__item:not(.cdk-drag-placeholder){transition:transform .16s ease}.table-column-settings__item.cdk-drag-preview{box-sizing:border-box;background:var(--color-neutral-000);border:1px solid var(--color-primary-300);border-radius:8px;box-shadow:0 14px 28px #0f172a29}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__item.cdk-drag-placeholder{opacity:.35;border-style:dashed;background:var(--color-primary-050)}.table-column-settings__item.cdk-drag-animating{transition:transform .18s ease}.table-column-settings__toggle{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;font-size:12px;color:var(--color-neutral-800);font-weight:500}.table-column-settings__toggle .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}.table-column-settings__toggle .nvb-control__checkbox-input:hover{border-color:var(--color-primary-500)}.table-column-settings__toggle .nvb-control__checkbox-input:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary-500) 20%,transparent)}.table-column-settings__toggle .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__toggle span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}.table-column-settings__width{display:flex;flex-direction:column;gap:6px;min-width:0}.table-column-settings__width-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.table-column-settings__width-header>span{font-size:11px;line-height:1.2;color:var(--color-neutral-600)}.table-column-settings__width-meta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.table-column-settings__width-reset{min-height:24px;border:1px solid var(--color-neutral-300);border-radius:999px;background:var(--color-neutral-050);color:var(--color-neutral-700);font:inherit;font-size:11px;padding:0 10px;cursor:pointer}.table-column-settings__width-reset:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__width-reset--active{border-color:var(--color-primary-300);background:var(--color-primary-100);color:var(--color-primary-800)}.table-column-settings__width-range{display:block}.table-column-settings__width-range input[type=range]{width:100%;margin:0;accent-color:var(--color-primary-600);cursor:pointer}.table-column-settings__width-value{min-width:92px;min-height:28px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-800);display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:12px;font-weight:600}.table-column-settings__order{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.table-column-settings__move{width:30px;height:30px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-column-settings__move:hover:not(:disabled){border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__move:disabled{opacity:.5;cursor:not-allowed}@media(max-width:720px){.table-column-settings__content{grid-template-columns:minmax(0,1fr)}}.table-dialog--column-settings .table-dialog__footer{grid-template-columns:repeat(2,minmax(0,1fr))}.table-export__column{border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form{display:flex;flex-direction:column;gap:10px}.table-filter-form__row{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form__row input{border:1px solid var(--color-neutral-300);border-radius:7px;min-height:34px;padding:0 10px;font-size:12px;color:var(--color-neutral-700)}.table-filter-list{display:flex;flex-direction:column;gap:8px}.table-filter-list__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.table-filter-list__meta{min-width:0;display:flex;flex-direction:column;gap:2px}.table-filter-list__meta strong{font-size:13px;color:var(--color-neutral-800)}.table-filter-list__meta span,.table-filter-list__meta small{font-size:11px;color:var(--color-neutral-600)}.table-filter-list__actions{display:inline-flex;align-items:center;gap:6px}.table-filter-list__empty{font-size:12px;color:var(--color-neutral-500);padding:6px 0}@keyframes table-loading-fade{0%{opacity:0}to{opacity:1}}@keyframes table-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@container (max-width: 768px){.table-sticky-clone{display:none}.table-toolbar{flex-direction:column;align-items:stretch}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{width:100%;justify-content:flex-start;flex:0 0 auto}.table-toolbar__center{min-width:0}.table-toolbar__center--controls-only{justify-content:flex-start}.table-toolbar__right{margin-left:0}.table-toolbar__dropzone--center{flex:0 0 auto}.table-toolbar__drop-item{min-width:0;max-width:none;width:100%;flex-basis:100%}.table-toolbar__add-menu{position:static;width:100%;min-width:0;max-height:220px;margin-top:6px;box-shadow:none}.table-toolbar__button--detailed-toggle{width:100%;justify-content:space-between}.table-quick-search,.table-export{width:100%}.table-header-menu{width:100%;min-width:0}.table-export>.table-toolbar__button{width:100%;justify-content:space-between}.table-export__menu{left:0;right:auto;width:min(100%,280px)}.table-detailed-search__row{grid-template-columns:1fr}.table-detailed-search__remove,.table-detailed-search__actions{width:100%}.table-detailed-search__actions .table-toolbar__button{width:100%;justify-content:center}.table-cell-actions{width:100%}.table-frame{flex-direction:column}.table-detail-panel{width:100%;min-width:0;max-width:none;border-left:none;border-top:1px solid var(--color-neutral-200)}.table-cell-actions__select{width:100%;min-width:0}.table-dialog{width:min(94vw,720px);max-height:88vh}.table-dialog__footer{grid-template-columns:1fr}.table-filter-list__item{flex-direction:column;align-items:stretch}.table-filter-list__actions{width:100%}.table-filter-list__actions .table-toolbar__button{flex:1 1 0;justify-content:center}.nvb-table--auto-stack thead{display:none}.nvb-table--auto-stack,.nvb-table--auto-stack tbody,.nvb-table--auto-stack tr,.nvb-table--auto-stack td{display:block;width:100%}.nvb-table--auto-stack tr{border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--auto-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--auto-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--auto-stack .action-cell{justify-items:end}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--auto-stack .expand-cell:before,.nvb-table--auto-stack .table-expanded-inline-row__cell:before,.nvb-table--auto-stack .table-row-template-cell:before{content:none}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--auto-stack .table-expanded-inline-row__content{width:100%}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "component", type: RuntimeLazyElementOutlet, selector: "runtime-lazy-element-outlet", inputs: ["model"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableElement, isStandalone: true, selector: "table-element", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "closeActionMenu()", "window:scroll": "onWindowScroll()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "tableShellRef", first: true, predicate: ["tableShellRef"], descendants: true, isSignal: true }, { propertyName: "stickyHeaderRef", first: true, predicate: ["stickyHeaderRef"], descendants: true, isSignal: true }, { propertyName: "tableScrollerRef", first: true, predicate: ["tableScrollerRef"], descendants: true, isSignal: true }, { propertyName: "mainHeaderRowRef", first: true, predicate: ["mainHeaderRowRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<element-wrapper [model]=\"model()\">\r\n  @if (templateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"templateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"styleOutletKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n  <div\r\n    #tableShellRef\r\n    class=\"table-shell\"\r\n    [class.table-shell--editor]=\"isEditor()\"\r\n    [class.table-shell--sticky-header]=\"stickyHeaderEnabled()\"\r\n    [style.--table-sticky-header-offset]=\"stickyHeaderActiveOffset() + 'px'\"\r\n    [attr.aria-busy]=\"loading()\"\r\n  >\r\n    @if (\r\n      stickyHeaderEnabled() ||\r\n      showToolbar() ||\r\n      (detailedSearchEnabled() && showDetailedSearchPanel())\r\n    ) {\r\n      <div\r\n        #stickyHeaderRef\r\n        class=\"table-sticky-header\"\r\n        [class.table-sticky-header--enabled]=\"stickyHeaderEnabled()\"\r\n        [class.table-sticky-header--pinned]=\"stickyHeaderPinned()\"\r\n      >\r\n        @if (showToolbar()) {\r\n          <div\r\n            class=\"table-toolbar\"\r\n            role=\"toolbar\"\r\n            [class.table-toolbar--flat]=\"flatHeaderSurface()\"\r\n            [attr.aria-label]=\"'table.toolbar.label' | uiT: 'Table actions'\"\r\n          >\r\n            <div class=\"table-toolbar__left\">\r\n              @if (quickSearchEnabled()) {\r\n                <div\r\n                  class=\"table-quick-search\"\r\n                  role=\"search\"\r\n                  [attr.aria-label]=\"'table.search.quick' | uiT: 'Quick search'\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-quick-search__apply\"\r\n                    (click)=\"applyQuickSearch()\"\r\n                    [attr.aria-label]=\"'table.search.apply' | uiT: 'Search'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">search</span>\r\n                  </button>\r\n                  <input\r\n                    type=\"text\"\r\n                    [ngModel]=\"quickSearchTerm()\"\r\n                    (ngModelChange)=\"onQuickSearchValueChange($event)\"\r\n                    (keydown.enter)=\"applyQuickSearch(); $event.preventDefault()\"\r\n                    [placeholder]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                    [attr.aria-label]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                  />\r\n                  @if (quickSearchTerm()) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-quick-search__clear\"\r\n                      (click)=\"clearQuickSearch()\"\r\n                      [attr.aria-label]=\"'table.search.clearQuick' | uiT: 'Clear quick search'\"\r\n                    >\r\n                      <span class=\"material-symbols-outlined\">close</span>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (detailedSearchEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--detailed-toggle\"\r\n                  (click)=\"toggleDetailedSearch()\"\r\n                  [attr.aria-expanded]=\"showDetailedSearchPanel()\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">tune</span>\r\n                  <span>\r\n                    {{\r\n                      showDetailedSearchPanel()\r\n                        ? ('table.search.hideDetailed' | uiT: 'Hide detailed search')\r\n                        : ('table.search.showDetailed' | uiT: 'Detailed search')\r\n                    }}\r\n                  </span>\r\n                  @if (detailedFiltersCount() > 0) {\r\n                    <span class=\"table-toolbar__badge\">{{ detailedFiltersCount() }}</span>\r\n                  }\r\n                </button>\r\n              }\r\n\r\n              @if (showHeaderCenterInLeft()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtStart()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n\r\n            @if (showHeaderCenterArea()) {\r\n              <div\r\n                class=\"table-toolbar__center\"\r\n                [class.table-toolbar__center--controls-only]=\"\r\n                  !hasCustomHeaderTemplate() && showHeaderCenterInCenter()\r\n                \"\r\n              >\r\n                @if (hasCustomHeaderTemplate()) {\r\n                  <div\r\n                    class=\"table-toolbar__custom\"\r\n                    [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                    [innerHTML]=\"customHeaderTemplateHtml()\"\r\n                    (click)=\"onHeaderTemplateClick($event)\"\r\n                  ></div>\r\n                }\r\n\r\n                @if (showHeaderCenterInCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n                }\r\n\r\n                @if (renderHeaderActionsAtCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div class=\"table-toolbar__right\">\r\n              @if (columnSettingsEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--icon-only\"\r\n                  (click)=\"openColumnSettings()\"\r\n                  [attr.aria-expanded]=\"openColumnSettingsDialog()\"\r\n                  [attr.aria-label]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                  [attr.title]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                >\r\n                  <nvb-icon class=\"table-action-icon\" name=\"settings\"></nvb-icon>\r\n                </button>\r\n              }\r\n\r\n              @if (exportEnabled()) {\r\n                <div class=\"table-export\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button\"\r\n                    [disabled]=\"exportBusy()\"\r\n                    [title]=\"exportBusy() ? ('table.export.busy' | uiT: 'Exporting...') : ''\"\r\n                    [attr.aria-expanded]=\"\r\n                      exportUsesColumnPicker() ? openExportDialog() : openExportMenu()\r\n                    \"\r\n                    (click)=\"toggleExportMenu($event)\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">ios_share</span>\r\n                    <span>{{ 'table.export.open' | uiT: 'Export' }}</span>\r\n                    @if (!exportUsesColumnPicker()) {\r\n                      <span class=\"material-symbols-outlined table-export__chevron\">\r\n                        {{ openExportMenu() ? 'expand_less' : 'expand_more' }}\r\n                      </span>\r\n                    }\r\n                  </button>\r\n\r\n                  @if (!exportUsesColumnPicker() && openExportMenu()) {\r\n                    <div\r\n                      class=\"table-export__menu\"\r\n                      [class.table-export__menu--top]=\"exportMenuPosition() === 'top'\"\r\n                      [ngStyle]=\"exportMenuStyle()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <label class=\"table-export__scope\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"exportScope() === 'all'\"\r\n                          (change)=\"onExportScopeToggle($event)\"\r\n                        />\r\n                        <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n                      </label>\r\n\r\n                      <div class=\"table-export__actions\">\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('csv', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">description</span>\r\n                          <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('excel', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">table_view</span>\r\n                          <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('pdf', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n                          <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (showHeaderCenterInRight()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtEnd()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <ng-template #headerCenterControlsTemplate>\r\n            <div\r\n              class=\"table-toolbar__dropzone\"\r\n              [class.table-toolbar__dropzone--left]=\"headerCenterElementsPosition() === 'left'\"\r\n              [class.table-toolbar__dropzone--center]=\"headerCenterElementsPosition() === 'center'\"\r\n              [class.table-toolbar__dropzone--right]=\"headerCenterElementsPosition() === 'right'\"\r\n            >\r\n              @if (isEditor()) {\r\n                <div class=\"table-toolbar__add-element\" (click)=\"$event.stopPropagation()\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button table-toolbar__button--add-element\"\r\n                    (click)=\"toggleHeaderCenterAddMenu($event)\"\r\n                    [attr.aria-expanded]=\"headerCenterAddMenuOpen()\"\r\n                    [attr.aria-label]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                    [title]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">add</span>\r\n                  </button>\r\n\r\n                  @if (headerCenterAddMenuOpen()) {\r\n                    <div class=\"table-toolbar__add-menu\">\r\n                      @for (option of headerCenterAddOptions; track option.type) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__add-menu-item\"\r\n                          (click)=\"addHeaderCenterElementByType(option.type, $event)\"\r\n                        >\r\n                          {{ option.labelKey | uiT: option.fallbackLabel }}\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (hasHeaderCenterElements()) {\r\n                <div class=\"table-toolbar__drop-items\">\r\n                  @for (headerElement of headerCenterElements(); track headerElement.name) {\r\n                    <div\r\n                      class=\"table-toolbar__drop-item\"\r\n                      [class.table-toolbar__drop-item--editor]=\"isEditor()\"\r\n                      [class.table-toolbar__drop-item--focused]=\"\r\n                        isHeaderCenterElementFocused(headerElement.name)\r\n                      \"\r\n                      [attr.data-nvb-header-center-name]=\"headerElement.name\"\r\n                      (mousedown)=\"focusHeaderCenterElementByName(headerElement.name, $event)\"\r\n                    >\r\n                      <runtime-lazy-element-outlet [model]=\"headerElement\" />\r\n                      @if (isEditor()) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__drop-remove\"\r\n                          (click)=\"removeHeaderCenterElement(headerElement.name, $event)\"\r\n                          [attr.aria-label]=\"\r\n                            'table.header.removeCenterElement' | uiT: 'Remove center element'\r\n                          \"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">close</span>\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n\r\n          <ng-template #headerActionsTemplate>\r\n            @if (visibleHeaderActions(); as headerActions) {\r\n              @if (headerActions.length > 0) {\r\n                @if (renderHeaderActionsAsDropdown()) {\r\n                  <nvb-select\r\n                    class=\"table-toolbar__select\"\r\n                    [ngModel]=\"headerActionDropdownValue()\"\r\n                    (ngModelChange)=\"onHeaderActionDropdownChange($event)\"\r\n                    (blur)=\"onHeaderActionDropdownBlur()\"\r\n                    [attr.aria-label]=\"headerActionsDropdownPlaceholder()\"\r\n                  >\r\n                    <option value=\"\">{{ headerActionsDropdownPlaceholder() }}</option>\r\n                    @for (option of headerActionDropdownOptions(); track option.value) {\r\n                      <option [value]=\"option.value\">{{ option.label }}</option>\r\n                    }\r\n                  </nvb-select>\r\n                } @else {\r\n                  <div class=\"table-toolbar__actions\">\r\n                    @for (action of headerActions; track action.id || $index) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        [class.table-toolbar__button--icon-only]=\"actionHidesText(action)\"\r\n                        [attr.title]=\"resolveActionLabel(action)\"\r\n                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                        (click)=\"runHeaderAction(action, $event)\"\r\n                      >\r\n                        @if (resolveActionIcon(action); as actionIcon) {\r\n                          <nvb-icon class=\"table-action-icon\" [name]=\"actionIcon\"></nvb-icon>\r\n                        }\r\n                        @if (!actionHidesText(action)) {\r\n                          <span>{{ resolveActionLabel(action) }}</span>\r\n                        }\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          </ng-template>\r\n        }\r\n\r\n        @if (detailedSearchEnabled() && showDetailedSearchPanel()) {\r\n          <div class=\"table-detailed-search\">\r\n            <div class=\"table-detailed-search__rows\">\r\n              @for (filter of detailedFilters(); track filter.id) {\r\n                <div class=\"table-detailed-search__row\">\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.key\"\r\n                    (ngModelChange)=\"updateDetailedFilterKey(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.field' | uiT: 'Field'\"\r\n                  >\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <option [value]=\"column.key\">{{ resolveColumnLabel(column) }}</option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.operator\"\r\n                    (ngModelChange)=\"updateDetailedFilterOperator(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.operator' | uiT: 'Operator'\"\r\n                  >\r\n                    @for (operator of getFilterOperators(filter); track operator.value) {\r\n                      <option [value]=\"operator.value\">\r\n                        {{ operator.label | uiT: operator.value }}\r\n                      </option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  @if (isSelectFilter(filter)) {\r\n                    <nvb-select\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    >\r\n                      <option value=\"\">\r\n                        {{\r\n                          resolveDetailedFilterOptions(filter).length > 0\r\n                            ? ('table.search.value' | uiT: 'Value')\r\n                            : ('table.search.emptyOptions' | uiT: 'No options')\r\n                        }}\r\n                      </option>\r\n                      @for (option of resolveDetailedFilterOptions(filter); track option.value) {\r\n                        <option [value]=\"option.value\">{{ option.label }}</option>\r\n                      }\r\n                    </nvb-select>\r\n                  } @else if (isMultiSelectFilter(filter)) {\r\n                    <div\r\n                      class=\"table-detailed-search__multi-select\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__multi-select-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterMultiSelectOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterMultiSelectMenu(filter.id, $event)\"\r\n                      >\r\n                        @if (hasDetailedFilterSelectedOptions(filter)) {\r\n                          <span>{{ resolveDetailedFilterMultiSelectLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__multi-select-placeholder\">{{\r\n                            resolveDetailedFilterOptions(filter).length > 0\r\n                              ? ('table.search.value' | uiT: 'Value')\r\n                              : ('table.search.emptyOptions' | uiT: 'No options')\r\n                          }}</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">\r\n                          {{\r\n                            isDetailedFilterMultiSelectOpen(filter.id)\r\n                              ? 'expand_less'\r\n                              : 'expand_more'\r\n                          }}\r\n                        </span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterMultiSelectOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__multi-select-menu\">\r\n                          @if (resolveDetailedFilterOptions(filter).length === 0) {\r\n                            <div class=\"table-detailed-search__multi-select-empty\">\r\n                              {{ 'table.search.emptyOptions' | uiT: 'No options' }}\r\n                            </div>\r\n                          } @else {\r\n                            @for (\r\n                              option of resolveDetailedFilterOptions(filter);\r\n                              track option.value\r\n                            ) {\r\n                              <label class=\"table-detailed-search__multi-select-option\">\r\n                                <input\r\n                                  type=\"checkbox\"\r\n                                  class=\"nvb-control__checkbox-input\"\r\n                                  [checked]=\"isFilterOptionSelected(filter, option.value)\"\r\n                                  (change)=\"\r\n                                    onDetailedFilterMultiSelectOptionToggle(\r\n                                      filter.id,\r\n                                      option.value,\r\n                                      $any($event.target).checked\r\n                                    )\r\n                                  \"\r\n                                />\r\n                                <span>{{ option.label }}</span>\r\n                              </label>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isToggleFilter(filter)) {\r\n                    <label\r\n                      class=\"table-detailed-search__toggle table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-toggle-switch__input\"\r\n                        [checked]=\"isToggleFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedToggleFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span class=\"nvb-toggle-switch__track\">\r\n                        <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                      </span>\r\n                      <span>{{ filterValueAsString(filter.value) }}</span>\r\n                    </label>\r\n                  } @else if (isCheckboxFilter(filter) || isBooleanFilter(filter)) {\r\n                    <label class=\"table-detailed-search__boolean-toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked ? 'true' : 'false'\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span>{{\r\n                        isFilterValueTrue(filter)\r\n                          ? ('table.search.boolean.true' | uiT: 'True')\r\n                          : ('table.search.boolean.false' | uiT: 'False')\r\n                      }}</span>\r\n                    </label>\r\n                  } @else if (isNumericFilter(filter)) {\r\n                    <input\r\n                      type=\"number\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else if (isDateFilter(filter)) {\r\n                    <div class=\"table-detailed-search__date\" (click)=\"$event.stopPropagation()\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__date-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterDatePickerOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterDatePicker(filter, $event)\"\r\n                      >\r\n                        @if (resolveDetailedFilterDateLabel(filter)) {\r\n                          <span>{{ resolveDetailedFilterDateLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__date-placeholder\">0000-00-00</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">calendar_month</span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterDatePickerOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__date-menu\">\r\n                          <div class=\"table-detailed-search__date-header\">\r\n                            <button type=\"button\" (click)=\"previousDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                            </button>\r\n                            <span>{{ resolveDetailedFilterDateMonthLabel() }}</span>\r\n                            <button type=\"button\" (click)=\"nextDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                            </button>\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-weekdays\">\r\n                            @for (\r\n                              weekday of resolveDetailedFilterDateWeekdays();\r\n                              track weekday + $index\r\n                            ) {\r\n                              <span>{{ weekday }}</span>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-days\">\r\n                            @for (day of resolveDetailedFilterDateDays(filter); track day.key) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"table-detailed-search__date-day\"\r\n                                [class.table-detailed-search__date-day--outside]=\"day.outsideMonth\"\r\n                                [class.table-detailed-search__date-day--today]=\"day.isToday\"\r\n                                [class.table-detailed-search__date-day--selected]=\"day.isSelected\"\r\n                                (click)=\"selectDetailedFilterDate(filter.id, day.iso, $event)\"\r\n                              >\r\n                                {{ day.day }}\r\n                              </button>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              (click)=\"clearDetailedFilterDate(filter.id, $event)\"\r\n                            >\r\n                              {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n                            </button>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isDateTimeFilter(filter)) {\r\n                    <input\r\n                      type=\"datetime-local\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else {\r\n                    <input\r\n                      type=\"text\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  }\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-detailed-search__remove\"\r\n                    (click)=\"removeDetailedFilter(filter.id)\"\r\n                    [attr.aria-label]=\"'table.search.removeFilter' | uiT: 'Remove filter'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">delete</span>\r\n                  </button>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"table-detailed-search__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"addDetailedFilter()\">\r\n                <span class=\"material-symbols-outlined\">add</span>\r\n                <span>{{ 'table.search.addFilter' | uiT: 'Add filter' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"clearDetailedSearch()\">\r\n                <span class=\"material-symbols-outlined\">ink_eraser</span>\r\n                <span>{{ 'table.search.clear' | uiT: 'Clear' }}</span>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-toolbar__button table-toolbar__button--primary\"\r\n                (click)=\"applyDetailedSearch()\"\r\n              >\r\n                <span class=\"material-symbols-outlined\">check</span>\r\n                <span>{{ 'table.search.apply' | uiT: 'Apply' }}</span>\r\n              </button>\r\n              @if (savedFiltersEnabled()) {\r\n                <button type=\"button\" class=\"table-toolbar__button\" (click)=\"openSavedFilters()\">\r\n                  <span class=\"material-symbols-outlined\">bookmark</span>\r\n                  <span>{{ 'table.search.saved' | uiT: 'Saved filters' }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (stickyHeaderCloneVisible()) {\r\n          <div class=\"table-sticky-clone\">\r\n            <div class=\"table-sticky-clone__viewport\">\r\n              <table\r\n                class=\"nvb-table table-sticky-clone__table\"\r\n                [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n                [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n                [style.width.px]=\"stickyHeaderTableWidth() || null\"\r\n                [style.transform]=\"'translateX(' + -stickyHeaderScrollLeft() + 'px)'\"\r\n              >\r\n                <thead>\r\n                  <tr class=\"table-sticky-clone__row\">\r\n                    @if (showExpandChevronColumn()) {\r\n                      <th\r\n                        class=\"expand-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                        [style.min-width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                      ></th>\r\n                    }\r\n                    @if (selectionEnabled()) {\r\n                      <th\r\n                        class=\"select-column\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                      >\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"allVisibleSelected()\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"toggleSelectAllVisible($event)\"\r\n                          [attr.aria-label]=\"\r\n                            model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                          \"\r\n                        />\r\n                      </th>\r\n                    }\r\n\r\n                    @for (\r\n                      column of dataColumns();\r\n                      track column.id || column.key;\r\n                      let columnIndex = $index\r\n                    ) {\r\n                      <th\r\n                        [class]=\"columnAlignClass(column)\"\r\n                        [class.sortable]=\"column.sortable\"\r\n                        [class.sorted-active]=\"isSortedColumn(column)\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                      >\r\n                        @if (showColumnHeaderLabel(column)) {\r\n                          <span>{{ resolveColumnLabel(column) }}</span>\r\n                        }\r\n                        @if (column.sortable) {\r\n                          <span\r\n                            class=\"material-symbols-outlined sort-icon\"\r\n                            [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                          >\r\n                            {{ sortIndicator(column) }}\r\n                          </span>\r\n                        }\r\n                      </th>\r\n                    }\r\n\r\n                    @if (hasRowActions()) {\r\n                      <th\r\n                        class=\"action-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\r\n                        \"\r\n                      >\r\n                        <div class=\"action-header\">\r\n                          @if (showActionsHeaderLabel()) {\r\n                            <span class=\"action-header__label\">{{\r\n                              model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                            }}</span>\r\n                          }\r\n                        </div>\r\n                      </th>\r\n                    }\r\n                  </tr>\r\n                </thead>\r\n              </table>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      class=\"table-frame\"\r\n      [class.table-frame--with-toolbar]=\"showToolbar() && !flatHeaderSurface()\"\r\n      [class.table-frame--with-paginator]=\"model().paginator && !flatFooterSurface()\"\r\n      [class.table-frame--with-detail-panel]=\"activeExpandedPanelContext() !== null\"\r\n    >\r\n      <div\r\n        #tableScrollerRef\r\n        class=\"table-frame__scroller\"\r\n        [class.table-frame__scroller--virtual]=\"virtualScrollEnabled()\"\r\n        [style.max-height.px]=\"virtualScrollEnabled() ? virtualScrollViewportHeight() : null\"\r\n        (scroll)=\"onTableScroll($event)\"\r\n      >\r\n        <table\r\n          class=\"nvb-table\"\r\n          [class.nvb-table--auto-stack]=\"model().responsiveMode === 'auto'\"\r\n          [class.nvb-table--force-stack]=\"model().responsiveMode === 'stack'\"\r\n          [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n          [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n          [class.nvb-table--row-hover]=\"rowHoverEnabled()\"\r\n          [class.nvb-table--sticky-header]=\"stickyHeaderEnabled()\"\r\n          [class.nvb-table--virtual-scroll]=\"virtualScrollEnabled()\"\r\n          data-testid=\"table-element-root\"\r\n        >\r\n          <thead>\r\n            <tr #mainHeaderRowRef>\r\n              @if (showExpandChevronColumn()) {\r\n                <th class=\"expand-column\"></th>\r\n              }\r\n              @if (selectionEnabled()) {\r\n                <th class=\"select-column\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input\"\r\n                    [checked]=\"allVisibleSelected()\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"toggleSelectAllVisible($event)\"\r\n                    [attr.aria-label]=\"\r\n                      model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                    \"\r\n                  />\r\n                </th>\r\n              }\r\n\r\n              @for (\r\n                column of dataColumns();\r\n                track column.id || column.key;\r\n                let columnIndex = $index\r\n              ) {\r\n                <th\r\n                  [class]=\"columnAlignClass(column)\"\r\n                  [class.sortable]=\"column.sortable\"\r\n                  [class.column-focused]=\"isColumnFocused(column, columnIndex)\"\r\n                  [class.sorted-active]=\"isSortedColumn(column)\"\r\n                  [style.width]=\"columnWidthStyle(column)\"\r\n                  [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                  (focus)=\"onColumnHeaderFocus(column, columnIndex)\"\r\n                  (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                >\r\n                  @if (showColumnHeaderLabel(column)) {\r\n                    <span>{{ resolveColumnLabel(column) }}</span>\r\n                  }\r\n                  @if (column.sortable) {\r\n                    <span\r\n                      class=\"material-symbols-outlined sort-icon\"\r\n                      [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                    >\r\n                      {{ sortIndicator(column) }}\r\n                    </span>\r\n                  }\r\n                </th>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <th class=\"action-column\">\r\n                  <div class=\"action-header\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      <span class=\"action-header__label\">{{\r\n                        model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                      }}</span>\r\n                    }\r\n\r\n                    @if (hasSelectionActions() && selectedRowsCount() > 0) {\r\n                      @if (visibleSelectionActions(); as selectionActions) {\r\n                        @if (selectionActions.length > 0) {\r\n                          <div class=\"selection-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              class=\"selection-actions__toggle\"\r\n                              (click)=\"toggleSelectionActionMenu(selectionActions.length, $event)\"\r\n                              [attr.aria-label]=\"\r\n                                selectionActionsLabel() | uiT: selectionActionsLabel()\r\n                              \"\r\n                            >\r\n                              <span class=\"material-symbols-outlined\">checklist</span>\r\n                              <span class=\"selection-actions__count\">{{\r\n                                selectedRowsCount()\r\n                              }}</span>\r\n                            </button>\r\n\r\n                            @if (openSelectionActionMenu()) {\r\n                              <div\r\n                                class=\"selection-actions__menu\"\r\n                                [class.selection-actions__menu--top]=\"\r\n                                  selectionActionMenuPosition() === 'top'\r\n                                \"\r\n                                [ngStyle]=\"selectionActionMenuStyle()\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @for (action of selectionActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    (click)=\"runSelectionAction(action, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  </button>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    }\r\n                  </div>\r\n                </th>\r\n              }\r\n            </tr>\r\n          </thead>\r\n\r\n          <tbody>\r\n            @if (showInitialSkeleton()) {\r\n              @for (rowIndex of initialSkeletonRows(); track rowIndex) {\r\n                <tr class=\"table-skeleton__row\" aria-hidden=\"true\">\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td class=\"select-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @for (\r\n                    column of dataColumns();\r\n                    track column.id || column.key;\r\n                    let columnIndex = $index\r\n                  ) {\r\n                    <td [class]=\"columnAlignClass(column)\">\r\n                      <span\r\n                        class=\"table-skeleton__line\"\r\n                        [style.width]=\"initialSkeletonCellWidth(rowIndex, columnIndex)\"\r\n                      ></span>\r\n                    </td>\r\n                  }\r\n                  @if (hasRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      <span class=\"table-skeleton__dot table-skeleton__dot--action\"></span>\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n            } @else {\r\n              @if (!loading() && visibleRows().length === 0) {\r\n                <tr>\r\n                  <td\r\n                    class=\"empty-cell\"\r\n                    [attr.colspan]=\"\r\n                      dataColumns().length +\r\n                      (hasRowActions() ? 1 : 0) +\r\n                      (selectionEnabled() ? 1 : 0) +\r\n                      (showExpandChevronColumn() ? 1 : 0)\r\n                    \"\r\n                  >\r\n                    {{ model().emptyMessage || ('table.empty' | uiT: 'No data') }}\r\n                  </td>\r\n                </tr>\r\n                @if (expandedUsesInline() && editorExpandedPreviewContext(); as expandedContext) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualTopSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualTopSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n\r\n              @for (\r\n                renderedRow of renderedRows();\r\n                track rowTrackKey(renderedRow.row, renderedRow.visibleIndex)\r\n              ) {\r\n                @let row = renderedRow.row;\r\n                @let rowIndex = renderedRow.visibleIndex;\r\n                <tr\r\n                  [class.nvb-table__row--active]=\"isRowActive(row, rowIndex)\"\r\n                  [class.nvb-table__row--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                  [class.nvb-table__row--editing]=\"isInlineEditRow(row, rowIndex)\"\r\n                  (click)=\"onRowClick(row, rowIndex, $event)\"\r\n                  (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n                >\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      @if (showExpandToggle(row, rowIndex)) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"expand-toggle\"\r\n                          [class.expand-toggle--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                          (click)=\"toggleRowExpand(row, rowIndex, $event)\"\r\n                          [attr.aria-label]=\"resolveExpandToggleLabel(row, rowIndex)\"\r\n                          [attr.aria-expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">{{\r\n                            resolveExpandToggleIcon(row, rowIndex)\r\n                          }}</span>\r\n                        </button>\r\n                      }\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td\r\n                      class=\"select-cell\"\r\n                      [attr.data-label]=\"model().selectLabel || ('table.select' | uiT: 'Select')\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isRowSelected(row, rowIndex)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (change)=\"toggleRowSelection(row, rowIndex, $event)\"\r\n                        [attr.aria-label]=\"\r\n                          model().selectRowLabel || ('table.selectRow' | uiT: 'Select row')\r\n                        \"\r\n                      />\r\n                    </td>\r\n                  }\r\n\r\n                  @if (rowTemplateEnabled()) {\r\n                    <td\r\n                      class=\"table-row-template-cell\"\r\n                      data-label=\"\"\r\n                      [attr.colspan]=\"rowTemplateColspan()\"\r\n                    >\r\n                      <div\r\n                        class=\"table-row-template-host\"\r\n                        [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                        [innerHTML]=\"resolveRowTemplateHtml(row, rowIndex) || ''\"\r\n                        (click)=\"onTemplateContentClick($event, row, row)\"\r\n                      ></div>\r\n                    </td>\r\n                  } @else {\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <td\r\n                        [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                        [class]=\"columnAlignClass(column)\"\r\n                      >\r\n                        <div class=\"table-cell-content\">\r\n                          <div class=\"table-cell-content__value\">\r\n                            @if (isInlineEditRow(row, rowIndex) && isInlineEditableColumn(column)) {\r\n                              @switch (resolveInlineEditorType(column)) {\r\n                                @case ('textarea') {\r\n                                  <textarea\r\n                                    class=\"table-inline-edit table-inline-edit--textarea\"\r\n                                    rows=\"2\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  ></textarea>\r\n                                }\r\n                                @case ('number') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"number\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('date') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"date\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('checkbox') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                  </label>\r\n                                }\r\n                                @case ('toggle') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-toggle-switch__input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                    <span class=\"nvb-toggle-switch__track\">\r\n                                      <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                    </span>\r\n                                  </label>\r\n                                }\r\n                                @case ('select') {\r\n                                  <select\r\n                                    class=\"table-inline-edit\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <option [ngValue]=\"null\">\r\n                                      {{\r\n                                        resolveInlineEditorPlaceholder(column) ||\r\n                                          ('table.inlineEdit.select' | uiT: 'Select')\r\n                                      }}\r\n                                    </option>\r\n                                    @for (\r\n                                      option of resolveInlineSelectOptions(column);\r\n                                      track $index\r\n                                    ) {\r\n                                      <option [ngValue]=\"option.rawValue\">\r\n                                        {{ option.label }}\r\n                                      </option>\r\n                                    }\r\n                                  </select>\r\n                                }\r\n                                @default {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"text\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                              }\r\n                            } @else if (isToggleSwitchColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                [class.nvb-toggle-switch--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-toggle-switch__input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                                <span class=\"nvb-toggle-switch__track\">\r\n                                  <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                </span>\r\n                              </label>\r\n                            } @else if (isSingleCheckboxColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                [class.nvb-single-checkbox--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                              </label>\r\n                            } @else if (resolveStatusBadge(row, column); as statusBadge) {\r\n                              <span\r\n                                class=\"status-pill\"\r\n                                [class]=\"'status-pill status-pill--' + statusBadge.tone\"\r\n                                [class.status-pill--rounded]=\"statusBadge.rounded\"\r\n                              >\r\n                                @if (statusBadge.icon) {\r\n                                  <nvb-icon\r\n                                    class=\"status-pill__icon\"\r\n                                    [name]=\"statusBadge.icon\"\r\n                                  ></nvb-icon>\r\n                                }\r\n                                {{ statusBadge.label }}\r\n                              </span>\r\n                            } @else if (resolveCellHtml(row, column); as cellHtml) {\r\n                              <div\r\n                                class=\"table-template-host\"\r\n                                [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                                [innerHTML]=\"cellHtml\"\r\n                                (click)=\"\r\n                                  onTemplateContentClick($event, row, resolveCellValue(row, column))\r\n                                \"\r\n                              ></div>\r\n                            } @else {\r\n                              {{ resolveCellText(row, column) }}\r\n                            }\r\n                          </div>\r\n\r\n                          @if (!isInteractiveColumn(column)) {\r\n                            @if (visibleColumnCellActions(row, column); as columnActions) {\r\n                              @if (columnActions.length > 0) {\r\n                                <div\r\n                                  class=\"table-cell-actions\"\r\n                                  [class.table-cell-actions--icon]=\"\r\n                                    columnCellActionsUseIconButtons(column)\r\n                                  \"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                >\r\n                                  @if (columnCellActionsUseDropdown(column)) {\r\n                                    <nvb-select\r\n                                      class=\"table-cell-actions__select\"\r\n                                      (change)=\"onColumnCellActionSelect(row, column, $event)\"\r\n                                    >\r\n                                      <option value=\"\">\r\n                                        {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                      </option>\r\n                                      @for (action of columnActions; track action.id || $index) {\r\n                                        <option [value]=\"'id:' + (action.id || $index)\">\r\n                                          {{ resolveActionLabel(action) }}\r\n                                        </option>\r\n                                      }\r\n                                    </nvb-select>\r\n                                  } @else {\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"table-cell-actions__button\"\r\n                                        [class.table-cell-actions__button--icon-only]=\"\r\n                                          columnCellActionsUseIconButtons(column) ||\r\n                                          actionHidesText(action)\r\n                                        \"\r\n                                        [attr.title]=\"resolveActionLabel(action)\"\r\n                                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                        (click)=\"runColumnCellAction(action, row, $event, column)\"\r\n                                      >\r\n                                        @if (resolveActionIcon(action); as actionIcon) {\r\n                                          <nvb-icon\r\n                                            class=\"table-action-icon\"\r\n                                            [name]=\"actionIcon\"\r\n                                          ></nvb-icon>\r\n                                        }\r\n                                        @if (\r\n                                          actionRendersText(\r\n                                            action,\r\n                                            columnCellActionsUseButtons(column)\r\n                                          )\r\n                                        ) {\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </td>\r\n                    }\r\n                  }\r\n\r\n                  @if (hasRowActions()) {\r\n                    <td\r\n                      class=\"action-cell\"\r\n                      [attr.data-label]=\"model().actionsLabel || ('table.actions' | uiT: 'Actions')\"\r\n                    >\r\n                      @if (visibleRowActions(row); as rowActions) {\r\n                        @let rowEditing = isInlineEditRow(row, rowIndex);\r\n                        @let inlineActionsEnabled =\r\n                          inlineEditEnabled() && hasInlineEditableColumns();\r\n                        @if (inlineActionsEnabled || rowActions.length > 0) {\r\n                          <div class=\"row-actions row-actions--inline\">\r\n                            @if (inlineActionsEnabled) {\r\n                              @if (rowEditing) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"saveInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">save</span>\r\n                                  <span>{{\r\n                                    isInlineEditBusy(row, rowIndex)\r\n                                      ? ('table.inlineEdit.saving' | uiT: 'Saving')\r\n                                      : ('table.inlineEdit.save' | uiT: 'Save')\r\n                                  }}</span>\r\n                                </button>\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"cancelInlineEdit($event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">close</span>\r\n                                  <span>{{ 'table.inlineEdit.cancel' | uiT: 'Cancel' }}</span>\r\n                                </button>\r\n                              } @else {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  (click)=\"startInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">edit</span>\r\n                                  <span>{{ 'table.inlineEdit.edit' | uiT: 'Edit' }}</span>\r\n                                </button>\r\n                              }\r\n                            }\r\n\r\n                            @if (!rowEditing && rowActions.length > 0) {\r\n                              @if (rowActionsUseDropdown()) {\r\n                                <div class=\"row-actions\">\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__toggle\"\r\n                                    [class.row-actions__toggle--borderless]=\"\r\n                                      rowActionsUseBorderlessDropdownToggle()\r\n                                    \"\r\n                                    (click)=\"toggleActionMenu(rowIndex, rowActions.length, $event)\"\r\n                                    [attr.aria-label]=\"\r\n                                      model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                                    \"\r\n                                  >\r\n                                    <span class=\"material-symbols-outlined\">more_vert</span>\r\n                                  </button>\r\n\r\n                                  @if (openActionMenuRow() === rowIndex) {\r\n                                    <div\r\n                                      class=\"row-actions__menu\"\r\n                                      [class.row-actions__menu--top]=\"\r\n                                        rowActionMenuPosition() === 'top'\r\n                                      \"\r\n                                      [ngStyle]=\"rowActionMenuStyle()\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                    >\r\n                                      @for (action of rowActions; track action.id || $index) {\r\n                                        <button\r\n                                          type=\"button\"\r\n                                          (click)=\"runRowAction(action, row, $event)\"\r\n                                        >\r\n                                          @if (resolveActionIcon(action); as actionIcon) {\r\n                                            <nvb-icon\r\n                                              class=\"table-action-icon\"\r\n                                              [name]=\"actionIcon\"\r\n                                            ></nvb-icon>\r\n                                          }\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        </button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              } @else {\r\n                                @for (action of rowActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__inline-button\"\r\n                                    [class.row-actions__inline-button--icon-only]=\"\r\n                                      rowActionsUseIconButtons() || actionHidesText(action)\r\n                                    \"\r\n                                    [attr.title]=\"resolveActionLabel(action)\"\r\n                                    [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                    (click)=\"runRowAction(action, row, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                      <span>{{ resolveActionLabel(action) }}</span>\r\n                                    }\r\n                                  </button>\r\n                                }\r\n                              }\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n                @if (expandedUsesInline() && isRowExpanded(row, rowIndex)) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row\"\r\n                    [attr.data-row-key]=\"resolveRowExpansionKey(row, rowIndex)\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                            expandedContext: {\r\n                              key: resolveRowExpansionKey(row, rowIndex),\r\n                              row: row,\r\n                              rowIndex: rowIndex,\r\n                            },\r\n                          }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n                @if (\r\n                  expandedUsesInline() &&\r\n                    isEditor() &&\r\n                    rowIndex === 0 &&\r\n                    !isRowExpanded(row, rowIndex) &&\r\n                    editorExpandedPreviewContext();\r\n                  as expandedContext\r\n                ) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualBottomSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualBottomSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <ng-template #expandedContentTemplate let-expandedContext=\"expandedContext\">\r\n        @if (\r\n          expansionEnabled() && isExpandedRowsLoading(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          <div class=\"expanded-row__loading\">\r\n            {{ resolveExpandedLoadingMessage() | uiT: 'Loading details...' }}\r\n          </div>\r\n        } @else if (\r\n          resolveExpandedRowsError(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedError\r\n        ) {\r\n          <div class=\"expanded-row__error\">\r\n            {{ expandedError | uiT: 'Failed to load details.' }}\r\n          </div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n            resolveExpandedTemplateHtml(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedTemplateHtml\r\n        ) {\r\n          <div\r\n            class=\"expanded-row__template\"\r\n            [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n            [innerHTML]=\"expandedTemplateHtml\"\r\n            (click)=\"\r\n              onTemplateContentClick(\r\n                $event,\r\n                expandedContext.row,\r\n                resolveExpandedRows(expandedContext.row, expandedContext.rowIndex),\r\n                expandedContext.row\r\n              )\r\n            \"\r\n          ></div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n          shouldRenderExpandedNestedTable(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          @let expandedRows = resolveExpandedRows(expandedContext.row, expandedContext.rowIndex);\r\n          <table class=\"nested-table\">\r\n            <thead>\r\n              <tr>\r\n                @for (\r\n                  column of expandedDataColumns();\r\n                  track column.id || column.key;\r\n                  let columnIndex = $index\r\n                ) {\r\n                  <th\r\n                    [class]=\"columnAlignClass(column)\"\r\n                    [class.column-focused]=\"isExpandedColumnFocused(column, columnIndex)\"\r\n                    [class.nested-table__header--focusable]=\"isEditor()\"\r\n                    [style.width]=\"columnWidthStyle(column)\"\r\n                    [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                    (focus)=\"onExpandedColumnHeaderFocus(column, columnIndex)\"\r\n                    (click)=\"onExpandedColumnHeaderClick(column, columnIndex, $event)\"\r\n                  >\r\n                    @if (showColumnHeaderLabel(column)) {\r\n                      {{ resolveColumnLabel(column) }}\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (hasExpandedRowActions()) {\r\n                  <th class=\"action-column\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      {{ model().actionsLabel || ('table.actions' | uiT: 'Actions') }}\r\n                    }\r\n                  </th>\r\n                }\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (expandedRow of expandedRows; track $index) {\r\n                <tr>\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td\r\n                      [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                      [class]=\"columnAlignClass(column)\"\r\n                    >\r\n                      <div class=\"table-cell-content\">\r\n                        <div class=\"table-cell-content__value\">\r\n                          @if (isToggleSwitchColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                              [class.nvb-toggle-switch--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-toggle-switch__input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                              <span class=\"nvb-toggle-switch__track\">\r\n                                <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                              </span>\r\n                            </label>\r\n                          } @else if (isSingleCheckboxColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                              [class.nvb-single-checkbox--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </label>\r\n                          } @else if (\r\n                            resolveStatusBadge(expandedRow, column);\r\n                            as expandedStatusBadge\r\n                          ) {\r\n                            <span\r\n                              class=\"status-pill\"\r\n                              [class]=\"'status-pill status-pill--' + expandedStatusBadge.tone\"\r\n                              [class.status-pill--rounded]=\"expandedStatusBadge.rounded\"\r\n                            >\r\n                              @if (expandedStatusBadge.icon) {\r\n                                <nvb-icon\r\n                                  class=\"status-pill__icon\"\r\n                                  [name]=\"expandedStatusBadge.icon\"\r\n                                ></nvb-icon>\r\n                              }\r\n                              {{ expandedStatusBadge.label }}\r\n                            </span>\r\n                          } @else if (resolveCellHtml(expandedRow, column); as expandedCellHtml) {\r\n                            <div\r\n                              class=\"table-template-host\"\r\n                              [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                              [innerHTML]=\"expandedCellHtml\"\r\n                              (click)=\"\r\n                                onTemplateContentClick(\r\n                                  $event,\r\n                                  expandedRow,\r\n                                  resolveCellValue(expandedRow, column),\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          } @else {\r\n                            {{ resolveCellText(expandedRow, column) }}\r\n                          }\r\n                        </div>\r\n\r\n                        @if (!isInteractiveColumn(column)) {\r\n                          @if (\r\n                            visibleColumnCellActions(expandedRow, column, expandedContext.row);\r\n                            as columnActions\r\n                          ) {\r\n                            @if (columnActions.length > 0) {\r\n                              <div\r\n                                class=\"table-cell-actions\"\r\n                                [class.table-cell-actions--icon]=\"\r\n                                  columnCellActionsUseIconButtons(column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @if (columnCellActionsUseDropdown(column)) {\r\n                                  <nvb-select\r\n                                    class=\"table-cell-actions__select\"\r\n                                    (change)=\"\r\n                                      onColumnCellActionSelect(\r\n                                        expandedRow,\r\n                                        column,\r\n                                        $event,\r\n                                        expandedContext.row\r\n                                      )\r\n                                    \"\r\n                                  >\r\n                                    <option value=\"\">\r\n                                      {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                    </option>\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <option [value]=\"'id:' + (action.id || $index)\">\r\n                                        {{ resolveActionLabel(action) }}\r\n                                      </option>\r\n                                    }\r\n                                  </nvb-select>\r\n                                } @else {\r\n                                  @for (action of columnActions; track action.id || $index) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"table-cell-actions__button\"\r\n                                      [class.table-cell-actions__button--icon-only]=\"\r\n                                        columnCellActionsUseIconButtons(column) ||\r\n                                        actionHidesText(action)\r\n                                      \"\r\n                                      [attr.title]=\"resolveActionLabel(action)\"\r\n                                      [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                      (click)=\"\r\n                                        runColumnCellAction(\r\n                                          action,\r\n                                          expandedRow,\r\n                                          $event,\r\n                                          column,\r\n                                          expandedContext.row\r\n                                        )\r\n                                      \"\r\n                                    >\r\n                                      @if (resolveActionIcon(action); as actionIcon) {\r\n                                        <nvb-icon\r\n                                          class=\"table-action-icon\"\r\n                                          [name]=\"actionIcon\"\r\n                                        ></nvb-icon>\r\n                                      }\r\n                                      @if (\r\n                                        actionRendersText(\r\n                                          action,\r\n                                          columnCellActionsUseButtons(column)\r\n                                        )\r\n                                      ) {\r\n                                        <span>{{ resolveActionLabel(action) }}</span>\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                }\r\n                              </div>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      @if (\r\n                        visibleExpandedRowActions(expandedContext.row, expandedRow);\r\n                        as expandedActions\r\n                      ) {\r\n                        @if (expandedActions.length > 0) {\r\n                          @if (rowActionsUseDropdown()) {\r\n                            <nvb-select\r\n                              class=\"table-cell-actions__select\"\r\n                              (change)=\"\r\n                                onExpandedRowActionSelect(expandedContext.row, expandedRow, $event)\r\n                              \"\r\n                            >\r\n                              <option value=\"\">\r\n                                {{ resolveExpandedRowActionsPlaceholder() }}\r\n                              </option>\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <option [value]=\"'id:' + (action.id || $index)\">\r\n                                  {{ resolveActionLabel(action) }}\r\n                                </option>\r\n                              }\r\n                            </nvb-select>\r\n                          } @else {\r\n                            <div\r\n                              class=\"expanded-row__actions\"\r\n                              [class.table-cell-actions--icon]=\"rowActionsUseIconButtons()\"\r\n                            >\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"expanded-row__action\"\r\n                                  [class.expanded-row__action--icon-only]=\"\r\n                                    rowActionsUseIconButtons() || actionHidesText(action)\r\n                                  \"\r\n                                  [attr.title]=\"resolveActionLabel(action)\"\r\n                                  [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                  (click)=\"\r\n                                    runExpandedRowAction(\r\n                                      action,\r\n                                      expandedContext.row,\r\n                                      expandedRow,\r\n                                      $event\r\n                                    )\r\n                                  \"\r\n                                >\r\n                                  @if (resolveActionIcon(action); as actionIcon) {\r\n                                    <nvb-icon\r\n                                      class=\"table-action-icon\"\r\n                                      [name]=\"actionIcon\"\r\n                                    ></nvb-icon>\r\n                                  }\r\n                                  @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  }\r\n                                </button>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n              @if (isEditor() && expandedContext.rowIndex < 0 && expandedRows.length === 0) {\r\n                <tr class=\"nested-table__placeholder-row\" aria-hidden=\"true\">\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td [class]=\"columnAlignClass(column)\">&nbsp;</td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">&nbsp;</td>\r\n                  }\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        } @else if (detailColumns().length > 0) {\r\n          <div class=\"expanded-row__details\">\r\n            @for (column of detailColumns(); track column.id || column.key) {\r\n              <div class=\"expanded-row__detail-item\">\r\n                <div class=\"expanded-row__detail-label\">{{ resolveDetailLabel(column) }}</div>\r\n                <div class=\"expanded-row__detail-value\">\r\n                  @if (resolveStatusBadge(expandedContext.row, column); as detailStatusBadge) {\r\n                    <span\r\n                      class=\"status-pill\"\r\n                      [class]=\"'status-pill status-pill--' + detailStatusBadge.tone\"\r\n                      [class.status-pill--rounded]=\"detailStatusBadge.rounded\"\r\n                    >\r\n                      @if (detailStatusBadge.icon) {\r\n                        <nvb-icon\r\n                          class=\"status-pill__icon\"\r\n                          [name]=\"detailStatusBadge.icon\"\r\n                        ></nvb-icon>\r\n                      }\r\n                      {{ detailStatusBadge.label }}\r\n                    </span>\r\n                  } @else if (resolveCellHtml(expandedContext.row, column); as detailCellHtml) {\r\n                    <div\r\n                      class=\"table-template-host\"\r\n                      [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                      [innerHTML]=\"detailCellHtml\"\r\n                      (click)=\"\r\n                        onTemplateContentClick(\r\n                          $event,\r\n                          expandedContext.row,\r\n                          resolveCellValue(expandedContext.row, column),\r\n                          expandedContext.row\r\n                        )\r\n                      \"\r\n                    ></div>\r\n                  } @else {\r\n                    {{ resolveCellText(expandedContext.row, column) }}\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"expanded-row__empty\">\r\n            {{ resolveExpandedEmptyMessage() | uiT: 'No nested rows' }}\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      @if (expandedUsesSidePanel() && activeExpandedPanelContext(); as expandedContext) {\r\n        <aside class=\"table-detail-panel\" [attr.data-row-key]=\"expandedContext.key\">\r\n          <div class=\"table-detail-panel__header\">\r\n            <strong class=\"table-detail-panel__title\">{{\r\n              resolveDetailsPanelTitle() | uiT: 'Detailed info'\r\n            }}</strong>\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-detail-panel__close\"\r\n              (click)=\"closeExpandedRowPanel($event)\"\r\n              [attr.aria-label]=\"'table.closeDetails' | uiT: 'Close details'\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          </div>\r\n\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n            [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n          />\r\n        </aside>\r\n      }\r\n    </div>\r\n\r\n    @if (model().paginator) {\r\n      <div\r\n        class=\"table-paginator\"\r\n        role=\"navigation\"\r\n        [attr.aria-label]=\"'table.pagination.label' | uiT: 'Table pagination'\"\r\n        [class.table-paginator--flat]=\"flatFooterSurface()\"\r\n        [class.table-paginator--compact]=\"paginatorStyle() === 'compact'\"\r\n        [class.table-paginator--segmented]=\"paginatorStyle() === 'segmented'\"\r\n        [class.table-paginator--align-start]=\"paginatorAlign() === 'start'\"\r\n        [class.table-paginator--align-center]=\"paginatorAlign() === 'center'\"\r\n      >\r\n        <div class=\"table-paginator__content\">\r\n          <div class=\"table-paginator__controls\">\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"firstPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.pagination.first' | uiT: 'First page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">first_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_left</span>\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.prev' | uiT: 'Prev'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                } @else {\r\n                  {{ model().prevLabel || ('table.prev' | uiT: 'Prev') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showNumericPaginator()) {\r\n              <div class=\"table-paginator__pages\">\r\n                @for (page of visiblePageNumbers(); track page) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-paginator__page\"\r\n                    [class.table-paginator__page--active]=\"page === pageIndex()\"\r\n                    (click)=\"goToPage(page)\"\r\n                    [disabled]=\"page === pageIndex()\"\r\n                    [attr.aria-label]=\"'Page ' + (page + 1)\"\r\n                    [attr.aria-current]=\"page === pageIndex() ? 'page' : null\"\r\n                  >\r\n                    {{ page + 1 }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.next' | uiT: 'Next'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                } @else {\r\n                  {{ model().nextLabel || ('table.next' | uiT: 'Next') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"lastPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.pagination.last' | uiT: 'Last page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">last_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_right</span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n\r\n          @if (showPageMeta()) {\r\n            <span class=\"table-paginator__meta\">{{ pageMeta() }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (showPageSizeSelector()) {\r\n          <div class=\"table-paginator__size\">\r\n            <nvb-select\r\n              class=\"table-paginator__size-select\"\r\n              [ngModel]=\"pageSize()\"\r\n              (ngModelChange)=\"setPageSize($event)\"\r\n              [attr.aria-label]=\"'table.pagination.pageSize' | uiT: 'Rows per page'\"\r\n            >\r\n              @for (size of pageSizeOptions(); track size) {\r\n                <option [ngValue]=\"size\">{{ size }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (openExportDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeExportSelectionDialog()\"></div>\r\n      <section\r\n        class=\"table-dialog\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-export-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-export-dialog-title\">\r\n            {{ 'table.export.dialog.title' | uiT: 'Export columns' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeExportSelectionDialog()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <label class=\"table-export__scope\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"exportScope() === 'all'\"\r\n              (change)=\"onExportScopeToggle($event)\"\r\n            />\r\n            <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n          </label>\r\n\r\n          <label class=\"table-dialog__select-all\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"allExportColumnsSelected()\"\r\n              (change)=\"toggleAllExportColumns($event)\"\r\n            />\r\n            <span>{{ 'table.export.columns.all' | uiT: 'Select all columns' }}</span>\r\n          </label>\r\n\r\n          <div class=\"table-export__columns\">\r\n            @for (column of exportColumns(); track column.id || column.key) {\r\n              <label class=\"table-export__column\">\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"nvb-control__checkbox-input\"\r\n                  [checked]=\"isExportColumnSelected(column)\"\r\n                  (change)=\"onExportColumnSelectionChange(column, $event)\"\r\n                />\r\n                <span>{{ resolveColumnLabel(column) }}</span>\r\n              </label>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('csv', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">description</span>\r\n            <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('excel', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">table_view</span>\r\n            <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('pdf', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n            <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openColumnSettingsDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeColumnSettings()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--column-settings\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-column-settings-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-column-settings-dialog-title\">\r\n            {{ columnSettingsDialogTitle() | uiT: 'Columns settings' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeColumnSettings()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <div class=\"table-column-settings\">\r\n            <div class=\"table-column-settings__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"showAllColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"visibility\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.showAll' | uiT: 'Show all' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"resetColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"restart_alt\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.reset' | uiT: 'Reset' }}</span>\r\n              </button>\r\n            </div>\r\n\r\n            <div\r\n              class=\"table-column-settings__list\"\r\n              cdkDropList\r\n              [cdkDropListData]=\"columnSettingsDraft()\"\r\n              (cdkDropListDropped)=\"reorderColumnSettingsRows($event)\"\r\n            >\r\n              @for (column of columnSettingsDraft(); track column.key) {\r\n                <article class=\"table-column-settings__item\" cdkDrag>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-column-settings__drag\"\r\n                    cdkDragHandle\r\n                    [attr.aria-label]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                    [attr.title]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                  >\r\n                    <nvb-icon class=\"table-action-icon\" name=\"drag_indicator\"></nvb-icon>\r\n                  </button>\r\n                  <div class=\"table-column-settings__content\">\r\n                    <label class=\"table-column-settings__toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"column.visible\"\r\n                        (change)=\"\r\n                          setColumnSettingsVisibility(column.key, $any($event.target).checked)\r\n                        \"\r\n                      />\r\n                      <span>{{ column.label || column.key }}</span>\r\n                    </label>\r\n\r\n                    <label class=\"table-column-settings__width\">\r\n                      <div class=\"table-column-settings__width-header\">\r\n                        <span>{{ 'table.columns.settings.width' | uiT: 'Plotis' }}</span>\r\n                        <div class=\"table-column-settings__width-meta\">\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"table-column-settings__width-reset\"\r\n                            [class.table-column-settings__width-reset--active]=\"\r\n                              !hasColumnSettingsCustomWidth(column)\r\n                            \"\r\n                            (click)=\"resetColumnSettingsWidth(column.key)\"\r\n                          >\r\n                            {{ 'table.columns.settings.auto' | uiT: 'Automatinis' }}\r\n                          </button>\r\n                          <span class=\"table-column-settings__width-value\">\r\n                            {{ resolveColumnSettingsWidthDisplay(column) }}\r\n                          </span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"table-column-settings__width-range\">\r\n                        <input\r\n                          type=\"range\"\r\n                          [min]=\"columnSettingsWidthMin\"\r\n                          [max]=\"columnSettingsWidthMax\"\r\n                          [step]=\"columnSettingsWidthStep\"\r\n                          [value]=\"resolveColumnSettingsWidthSliderValue(column)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (input)=\"setColumnSettingsWidth(column.key, $any($event.target).value)\"\r\n                        />\r\n                      </div>\r\n                    </label>\r\n                  </div>\r\n\r\n                  <div class=\"table-column-settings__order\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowFirst(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, -1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveUp' | uiT: 'Move up'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_upward\"></nvb-icon>\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowLast(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, 1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveDown' | uiT: 'Move down'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_downward\"></nvb-icon>\r\n                    </button>\r\n                  </div>\r\n                </article>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button type=\"button\" class=\"table-toolbar__button\" (click)=\"closeColumnSettings()\">\r\n            {{ 'table.columns.settings.cancel' | uiT: 'Cancel' }}\r\n          </button>\r\n          @if (showColumnSettingsSaveAction()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button\"\r\n              (click)=\"saveColumnSettings($event)\"\r\n            >\r\n              <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n              <span>{{ 'table.columns.settings.save' | uiT: 'Save settings' }}</span>\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-toolbar__button table-toolbar__button--primary\"\r\n            (click)=\"applyColumnSettings($event)\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n            <span>{{ 'table.columns.settings.apply' | uiT: 'Apply settings' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openSavedFiltersDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeSavedFilters()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--filters\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-saved-filters-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-saved-filters-dialog-title\">\r\n            {{ 'table.filters.dialog.title' | uiT: 'Saved filters' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeSavedFilters()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__tabs\" role=\"tablist\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'create'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'create'\"\r\n            (click)=\"setSavedFilterDialogTab('create')\"\r\n          >\r\n            {{ 'table.filters.dialog.new' | uiT: 'Create new' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'list'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'list'\"\r\n            (click)=\"setSavedFilterDialogTab('list')\"\r\n          >\r\n            {{ 'table.filters.dialog.list' | uiT: 'Filter list' }}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          @if (savedFilterDialogTab() === 'create') {\r\n            <div class=\"table-filter-form\">\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.name' | uiT: 'Name' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterName()\"\r\n                  (ngModelChange)=\"savedFilterName.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.description' | uiT: 'Description' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterDescription()\"\r\n                  (ngModelChange)=\"savedFilterDescription.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.code' | uiT: 'Code' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterCode()\"\r\n                  (ngModelChange)=\"savedFilterCode.set($event)\"\r\n                />\r\n              </label>\r\n            </div>\r\n          } @else {\r\n            <div class=\"table-filter-list\">\r\n              @if (savedFiltersLoading()) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.loading' | uiT: 'Loading...' }}\r\n                </div>\r\n              } @else if (savedFilters().length === 0) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.empty' | uiT: 'No saved filters' }}\r\n                </div>\r\n              } @else {\r\n                @for (savedFilter of savedFilters(); track savedFilter.id) {\r\n                  <article class=\"table-filter-list__item\">\r\n                    <div class=\"table-filter-list__meta\">\r\n                      <strong>{{ savedFilter.name }}</strong>\r\n                      @if (savedFilter.description) {\r\n                        <span>{{ savedFilter.description }}</span>\r\n                      }\r\n                      @if (savedFilter.code) {\r\n                        <small>{{ savedFilter.code }}</small>\r\n                      }\r\n                    </div>\r\n                    <div class=\"table-filter-list__actions\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"applySavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.apply' | uiT: 'Apply' }}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"deleteSavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.delete' | uiT: 'Delete' }}\r\n                      </button>\r\n                    </div>\r\n                  </article>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (savedFilterDialogTab() === 'create') {\r\n          <footer class=\"table-dialog__footer table-dialog__footer--single\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button table-toolbar__button--primary\"\r\n              [disabled]=\"savedFilterBusy() || !savedFilterName().trim()\"\r\n              (click)=\"saveCurrentFilter($event)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">save</span>\r\n              <span>{{ 'table.filters.save' | uiT: 'Save filter' }}</span>\r\n            </button>\r\n          </footer>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.table-shell{--table-control-height: 32px;--table-control-radius: var(--nvb-control-radius, 4px);--table-control-font-size: 13px;--table-control-padding-x: 10px;--table-surface-border: color-mix( in oklab, var(--color-neutral-300) 78%, var(--color-surface-mix-target, white) );--table-surface-border-strong: color-mix( in oklab, var(--color-neutral-300) 92%, var(--color-surface-mix-target, white) );--table-surface-radius: var(--nvb-table-radius, var(--nvb-card-radius, var(--radius-md, 4px)));--table-sticky-header-offset: 0px;position:relative;background:transparent;container-type:inline-size;display:flex;flex-direction:column;gap:0;font-family:var(--nvb-font-family)}.table-shell--editor .table-toolbar{z-index:1}.table-shell--editor .table-quick-search,.table-shell--editor .table-toolbar__button--detailed-toggle,.table-shell--editor .table-export,.table-shell--editor .table-header-menu,.table-shell--editor .table-header-actions,.table-shell--editor .table-detailed-search{pointer-events:none}.table-shell--editor .table-toolbar__add-element,.table-shell--editor .table-toolbar__drop-item--editor{pointer-events:auto}.table-sticky-header{display:flex;flex-direction:column;gap:0}.table-sticky-header--enabled{position:sticky;top:0;z-index:38}.table-sticky-header--enabled.table-sticky-header--pinned{background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8)}.table-sticky-header--enabled.table-sticky-header--pinned .table-toolbar--flat{background:var(--color-neutral-000)}.table-sticky-clone{position:absolute;inset-inline:0;top:100%;z-index:37;pointer-events:none}.table-sticky-clone__viewport{overflow:hidden;background:var(--color-neutral-000);border:1px solid var(--table-surface-border);border-top:none;box-shadow:var(--nvb-shadow-8)}.table-sticky-clone__table{margin:0;width:max-content;min-width:100%;transform:translate(0)}.table-sticky-clone__table thead th{position:static;top:auto;z-index:auto}.table-sticky-clone__row th{cursor:default}.table-sticky-clone__row th.sortable{cursor:pointer}.table-frame{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);overflow:hidden;background:var(--color-neutral-000);display:flex;align-items:stretch;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent),inset 0 1px color-mix(in oklab,var(--color-neutral-000) 84%,transparent)}.table-frame__scroller{flex:1 1 auto;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden}.table-frame__scroller--virtual{overflow-y:auto;overscroll-behavior:contain}.table-frame--with-toolbar{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.table-frame--with-paginator{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.table-toolbar{display:flex;position:relative;z-index:32;justify-content:space-between;align-items:center;gap:8px;padding:8px;border:1px solid var(--table-surface-border);border-bottom:none;border-top-left-radius:var(--table-surface-radius);border-top-right-radius:var(--table-surface-radius);background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));flex-wrap:wrap}.table-toolbar--flat{padding:0 0 8px;border:none;border-radius:0;background:transparent}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__center{flex:1 1 260px;min-width:180px}.table-toolbar__center--controls-only{justify-content:flex-end}.table-toolbar__right{justify-content:flex-end;flex:0 0 auto;margin-left:auto}.table-toolbar__actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__button,.table-export__action,.table-cell-actions__button,.row-actions__inline-button,.row-actions__toggle,.selection-actions__toggle,.table-detailed-search__remove,.table-quick-search__apply,.table-quick-search__clear,.table-detailed-search__multi-select-trigger,.table-detailed-search__date-trigger,.table-detailed-search__date-header>button,.table-detailed-search__date-actions>button{font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500);line-height:1.3;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease;outline:0}.table-toolbar__button:focus-visible,.table-export__action:focus-visible,.table-cell-actions__button:focus-visible,.row-actions__inline-button:focus-visible,.row-actions__toggle:focus-visible,.selection-actions__toggle:focus-visible,.table-detailed-search__remove:focus-visible,.table-quick-search__apply:focus-visible,.table-quick-search__clear:focus-visible,.table-detailed-search__multi-select-trigger:focus-visible,.table-detailed-search__date-trigger:focus-visible,.table-detailed-search__date-header>button:focus-visible,.table-detailed-search__date-actions>button:focus-visible{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-toolbar,.table-detailed-search,.table-paginator{--nvb-input-height: var(--table-control-height);--nvb-input-radius: var(--table-control-radius);--nvb-select-trigger-border-color: var(--table-surface-border-strong);--nvb-select-trigger-padding-inline-start: var(--table-control-padding-x);--nvb-select-trigger-padding-inline-end: 26px;--nvb-select-arrow-inset-inline-end: 9px;--nvb-select-menu-border: var(--table-surface-border-strong);--nvb-select-menu-radius: var(--table-control-radius);--nvb-select-option-min-height: 28px;--nvb-select-option-padding-block: 5px;font-size:var(--table-control-font-size)}.table-toolbar__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-toolbar__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-toolbar__button--header-action{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-300);background:var(--color-neutral-000);color:var(--color-neutral-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary{border-color:var(--color-primary-300);background:var(--color-neutral-000);color:var(--color-primary-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050);border-color:var(--color-primary-400)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk{border-color:var(--color-risk-300);background:var(--color-neutral-000);color:var(--color-risk-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050);border-color:var(--color-risk-400)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral:hover{border-color:var(--color-neutral-800);background:var(--color-neutral-800)}.table-toolbar__button--filled.table-toolbar__button--tone-primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-primary:hover{border-color:var(--color-primary-600);background:var(--color-primary-600)}.table-toolbar__button--filled.table-toolbar__button--tone-risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-risk:hover{border-color:var(--color-risk-600);background:var(--color-risk-600)}.table-toolbar__button--text{border-color:transparent;background:transparent;box-shadow:none}.table-toolbar__button--text.table-toolbar__button--tone-neutral{color:var(--color-neutral-700)}.table-toolbar__button--text.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--text.table-toolbar__button--tone-primary{color:var(--color-primary-700)}.table-toolbar__button--text.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050)}.table-toolbar__button--text.table-toolbar__button--tone-risk{color:var(--color-risk-700)}.table-toolbar__button--text.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050)}.table-toolbar__button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.table-toolbar__button span.material-symbols-outlined{font-size:16px;line-height:1}.table-action-icon{font-size:16px}.table-toolbar__button--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--primary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)}.table-toolbar__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-toolbar__badge{min-width:16px;height:16px;border-radius:999px;background:var(--color-primary-500);color:var(--color-neutral-000);display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 4px}.table-toolbar__custom{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.table-toolbar__dropzone{position:relative;z-index:24;width:auto;max-width:100%;flex:0 1 auto;min-width:0;min-height:var(--table-control-height);display:flex;align-items:center;gap:6px;overflow:visible}.table-toolbar__dropzone--center{width:100%;flex:1 1 auto}.table-toolbar__center--controls-only .table-toolbar__dropzone--center{width:auto;flex:0 0 auto}.table-toolbar__add-element{position:relative;display:inline-flex;align-items:center;max-width:none}.table-toolbar__button--add-element{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;justify-content:center}.table-toolbar__button--add-element span{font-size:16px}.table-toolbar__add-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;max-height:280px;overflow:auto;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:4px;z-index:42}.table-toolbar__add-menu-item{width:100%;border:none;background:transparent;border-radius:6px;padding:8px 10px;text-align:left;color:var(--color-neutral-700);font-size:13px;cursor:pointer}.table-toolbar__add-menu-item:hover{background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-surface-mix-target, white))}.table-toolbar__drop-items{width:auto;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow:visible}.table-toolbar__center--controls-only .table-toolbar__drop-items{flex:0 0 auto}.table-toolbar__drop-item{position:relative;min-width:0;max-width:none;flex:0 0 auto;border:none;border-radius:0;background:transparent;padding:0}.table-toolbar__drop-item runtime-lazy-element-outlet{display:block;width:auto;min-width:0}.table-toolbar__drop-item--editor{cursor:pointer;padding:5px 27px 5px 5px}.table-toolbar__drop-item--editor .table-toolbar__drop-remove{right:5px}.table-toolbar__drop-item--focused{border-radius:var(--table-control-radius);background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-primary-500) 46%,transparent)}.table-toolbar__drop-item--editor runtime-lazy-element-outlet{pointer-events:none}.table-toolbar__drop-remove{position:absolute;top:50%;right:0;transform:translateY(-50%);width:18px;min-width:18px;height:18px;border:1px solid var(--color-neutral-200);border-radius:5px;background:var(--color-neutral-000);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-toolbar__drop-remove span{font-size:14px}.table-toolbar__drop-remove:hover{border-color:var(--color-risk-300);color:var(--color-risk-600);background:var(--color-risk-050)}.table-toolbar__drop-placeholder{width:100%;font-size:12px;color:var(--color-neutral-500);padding:2px 4px 4px}.table-toolbar__drop-item ::ng-deep .field{gap:0}.table-toolbar__drop-item ::ng-deep .field__text-warpper{display:none}.table-toolbar__drop-item ::ng-deep .field__description{display:none}.table-header-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.table-header-menu{min-width:220px;display:inline-flex;align-items:center}.table-header-menu--actions{min-width:min(300px,100%)}.table-header-menu__select{width:100%}.table-quick-search{min-width:216px;border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));background:var(--nvb-input-bg, var(--color-neutral-000));border-radius:var(--table-control-radius);min-height:var(--table-control-height);display:inline-flex;align-items:center;padding:0 5px;gap:2px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-quick-search:focus-within{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-quick-search input{border:none;outline:none;background:transparent;width:100%;min-height:calc(var(--table-control-height) - 2px);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);color:var(--nvb-input-text-color, var(--color-neutral-700));padding:0 5px}.table-quick-search input:focus{outline:none;box-shadow:none}.table-quick-search input::placeholder{color:var(--nvb-input-placeholder-color, var(--color-neutral-500))}.table-quick-search__clear,.table-quick-search__apply{width:24px;min-width:24px;height:24px;border:1px solid transparent;border-radius:var(--table-control-radius);background:transparent;color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-quick-search__apply span{font-size:16px}.table-quick-search__apply:hover{background:var(--color-neutral-100)}.table-quick-search__clear span{font-size:16px}.table-quick-search__clear:hover{background:var(--color-neutral-100)}.table-export{position:relative;display:inline-flex;align-items:center;justify-content:flex-end}.table-export__chevron{font-size:16px}.table-export__menu{position:fixed;z-index:var(--nvb-floating-overlay-z-index, 2147483000);top:0;left:0;min-width:268px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:8px;display:flex;flex-direction:column;gap:8px}.table-export__menu--top{transform:translateY(calc(-100% - 6px))}.table-export__scope{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-neutral-700)}.table-export__scope input{width:16px;height:16px}.table-export__actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.table-export__action{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:auto;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.table-export__action span.material-symbols-outlined{font-size:16px}.table-export__action:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-export__action:disabled{opacity:.55;cursor:not-allowed}.table-detailed-search{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent)}.table-detailed-search__rows{display:flex;flex-direction:column;gap:8px}.table-detailed-search__row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr) auto;gap:8px;align-items:stretch}.table-detailed-search__row select,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]){border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);padding:0 var(--table-control-padding-x);width:100%;min-width:0;line-height:1.3;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-detailed-search__row select:focus,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring);outline:0}.table-detailed-search__row>*{min-width:0}.table-detailed-search__boolean-toggle{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);display:inline-flex;align-items:center;gap:8px;padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);-webkit-user-select:none;user-select:none}.table-detailed-search__boolean-toggle .nvb-control__checkbox-input{margin:0}.table-detailed-search__remove{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--color-risk-600);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;align-self:stretch}.table-detailed-search__remove span{font-size:16px}.table-detailed-search__remove:hover{background:var(--color-risk-050);border-color:var(--color-risk-300)}.table-detailed-search__actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.table-detailed-search__multi-select{position:relative;min-width:0}.table-detailed-search__multi-select-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__multi-select-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__multi-select-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__multi-select-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__multi-select-placeholder{color:var(--color-neutral-500)}.table-detailed-search__multi-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);max-height:240px;overflow:auto;z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:6px;display:flex;flex-direction:column;gap:2px}.table-detailed-search__multi-select-option{border-radius:var(--nvb-control-radius);min-height:32px;padding:6px 8px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-size:13px}.table-detailed-search__multi-select-option:hover{background:var(--color-neutral-100)}.table-detailed-search__multi-select-empty{color:var(--color-neutral-500);font-size:12px;padding:8px}.table-detailed-search__date{position:relative;min-width:0}.table-detailed-search__date-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__date-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__date-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__date-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__date-placeholder{color:var(--color-neutral-500)}.table-detailed-search__date-menu{position:absolute;top:calc(100% + 4px);left:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);width:280px;max-width:min(92vw,320px);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:8px;display:flex;flex-direction:column;gap:8px}.table-detailed-search__date-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detailed-search__date-header>span{font-size:13px;font-weight:600;color:var(--color-neutral-700);text-transform:capitalize}.table-detailed-search__date-header>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));border-radius:var(--nvb-control-radius);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detailed-search__date-header>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-detailed-search__date-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-weekdays>span{text-align:center;font-size:11px;color:var(--color-neutral-500);text-transform:uppercase}.table-detailed-search__date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-day{border:1px solid transparent;border-radius:6px;background:transparent;color:var(--color-neutral-700);min-height:30px;font-size:12px;cursor:pointer}.table-detailed-search__date-day:hover{background:var(--color-neutral-100)}.table-detailed-search__date-day--outside{color:var(--color-neutral-400)}.table-detailed-search__date-day--today{border-color:var(--color-primary-300)}.table-detailed-search__date-day--selected{background:var(--color-primary-500);color:var(--color-neutral-000)}.table-detailed-search__date-actions{display:flex;justify-content:flex-end}.table-detailed-search__date-actions>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));border-radius:6px;background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));min-height:30px;padding:0 10px;cursor:pointer}.table-detailed-search__date-actions>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.nvb-table{width:100%;border-collapse:collapse;table-layout:auto;background:var(--color-neutral-000)}.nvb-table th,.nvb-table td{border-bottom:1px solid var(--table-surface-border);padding:7px 10px;font-size:13px;line-height:18px;vertical-align:middle}.table-cell-content{display:flex;flex-direction:column;gap:6px;min-width:0}.table-cell-content__value{min-width:0;word-break:break-word}.table-interactive-control{display:inline-flex;align-items:center;justify-content:flex-start;min-height:24px;cursor:pointer}.table-interactive-control--toggle.nvb-toggle-switch,.table-interactive-control--checkbox.nvb-single-checkbox{gap:0;min-height:24px}.table-interactive-control--toggle.nvb-toggle-switch--disabled,.table-interactive-control--checkbox.nvb-single-checkbox--disabled{opacity:.6;cursor:not-allowed}.table-interactive-control--checkbox .nvb-single-checkbox__input{margin:0}.table-interactive-control--toggle .nvb-toggle-switch__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.table-interactive-control--toggle .nvb-toggle-switch__track{position:relative;width:36px;height:20px;border-radius:999px;border:1px solid var(--color-neutral-300);background:var(--color-neutral-100);transition:border-color .16s ease,background-color .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:999px;background:var(--color-neutral-000);box-shadow:0 1px 3px #0003;transition:transform .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track{border-color:var(--color-primary-500);background:var(--color-primary-500)}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track .nvb-toggle-switch__thumb{transform:translate(16px)}.table-template-host{display:block;min-width:0}.table-row-template-cell{min-width:0}.table-row-template-host{display:block;width:100%;min-width:0}.table-cell-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-cell-actions__select{min-width:170px}.table-cell-actions__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer}.table-cell-actions__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-cell-actions__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-cell-actions__button span.material-symbols-outlined{font-size:16px}.nvb-table th{background:color-mix(in oklab,var(--color-neutral-050) 34%,var(--color-neutral-000));color:var(--color-neutral-800);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}.nvb-table--sticky-header.nvb-table--virtual-scroll thead th{position:sticky;top:var(--table-sticky-header-offset, 0px);z-index:26;background-clip:padding-box}.table-frame--with-toolbar .nvb-table thead th{border-top:1px solid var(--table-surface-border)}.nvb-table th.sorted-active{color:var(--color-primary-700);background:color-mix(in oklab,var(--color-primary-500) 7%,var(--color-surface-mix-target, white))}.nvb-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nvb-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.nvb-table th.sortable:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-surface-mix-target, white))}.sort-icon{font-size:16px;margin-left:4px;vertical-align:middle;color:var(--color-neutral-500)}.sort-icon--active{color:var(--color-primary-600)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.empty-cell{text-align:center;color:var(--color-neutral-500);padding:14px 10px}.action-column,.action-cell{min-width:56px;width:auto;text-align:right}.action-header{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;position:relative}.action-header__label{display:inline-flex;align-items:center;gap:4px}.expand-column,.expand-cell{width:32px;min-width:32px;text-align:center}.expand-toggle{border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,var(--color-primary-050) 4%);border-radius:var(--nvb-button-radius, var(--nvb-control-radius, 4px));width:28px;min-width:28px;height:28px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;color:var(--color-neutral-600);box-shadow:0 1px 2px #0000000a}.expand-toggle:hover{border-color:color-mix(in oklab,var(--color-primary-300) 70%,transparent);background:color-mix(in oklab,var(--color-primary-050) 92%,white);color:var(--color-primary-700)}.expand-toggle span{font-size:16px;transition:transform .16s ease}.expand-toggle--expanded span{transform:rotate(90deg)}.expand-toggle--expanded{border-color:color-mix(in oklab,var(--color-primary-300) 78%,transparent);background:color-mix(in oklab,var(--color-primary-050) 88%,white);color:var(--color-primary-700)}.select-column,.select-cell{width:42px;text-align:center}.select-column input,.select-cell input{width:16px;min-width:16px;height:16px;min-height:16px;cursor:pointer}.row-actions{position:relative;display:inline-flex;justify-content:flex-end}.row-actions--inline{gap:6px;flex-wrap:wrap}.row-actions__inline-button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;justify-content:center;align-items:center;gap:6px;cursor:pointer}.row-actions__inline-button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__inline-button:disabled,.row-actions__toggle:disabled{opacity:.65;cursor:wait}.row-actions__inline-button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0}.row-actions__inline-button span.material-symbols-outlined{font-size:16px}.row-actions__toggle{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.row-actions__toggle--borderless{border-color:transparent;background:transparent;color:var(--color-neutral-600);box-shadow:none}.row-actions__toggle span{font-size:16px}.row-actions__toggle:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__toggle--borderless:hover{border-color:transparent;background:var(--color-neutral-100);color:var(--color-neutral-800)}.row-actions__menu{position:fixed;top:0;left:0;min-width:160px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.row-actions__menu--top{transform:translateY(calc(-100% - 6px))}.row-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.row-actions__menu button:hover{background:var(--color-neutral-100)}.row-actions__menu button span.material-symbols-outlined{font-size:16px}.row-actions__empty{font-size:11px;color:var(--color-neutral-400)}.nvb-table__row--editing>td{background:color-mix(in srgb,var(--color-primary-050) 72%,white)}.table-inline-edit{width:100%;min-height:34px;border:1px solid var(--color-primary-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-900);font:inherit;padding:6px 10px}.table-inline-edit--textarea{resize:vertical;min-height:72px}.table-inline-edit:focus{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring)}.table-virtual-spacer-row td{padding:0;border:0;background:transparent}.table-virtual-spacer-cell{height:0}.selection-actions{position:relative;display:inline-flex;align-items:center}.selection-actions__toggle{min-width:var(--table-control-height);min-height:var(--table-control-height);border:1px solid var(--color-primary-300);border-radius:var(--table-control-radius);background:var(--color-primary-050);color:var(--color-primary-700);display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 var(--table-control-padding-x);cursor:pointer}.selection-actions__toggle span.material-symbols-outlined{font-size:16px}.selection-actions__count{min-width:16px;height:16px;border-radius:999px;font-size:10px;font-weight:600;color:var(--color-neutral-000);background:var(--color-primary-600);display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.selection-actions__menu{position:fixed;top:0;left:0;min-width:190px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.selection-actions__menu--top{transform:translateY(calc(-100% - 6px))}.selection-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.selection-actions__menu button:hover{background:var(--color-neutral-100)}.selection-actions__menu button span.material-symbols-outlined{font-size:16px}.status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:20px;gap:4px;border-radius:var(--table-control-radius);padding:2px 8px;font-size:11px;line-height:1.2;border:1px solid transparent}.status-pill--rounded{border-radius:999px}.status-pill__icon{font-size:14px}.status-pill--neutral{background:var(--color-neutral-100);color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.status-pill--success{background:color-mix(in oklab,var(--color-success-500) 14%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-success-500) 80%,black);border-color:color-mix(in oklab,var(--color-success-500) 28%,var(--color-surface-mix-target, white))}.status-pill--danger,.status-pill--risk{background:var(--color-risk-050);color:var(--color-risk-700);border-color:var(--color-risk-300)}.status-pill--warning{background:color-mix(in oklab,var(--color-warning-500) 18%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-warning-500) 80%,black);border-color:color-mix(in oklab,var(--color-warning-500) 36%,var(--color-surface-mix-target, white))}.status-pill--info,.status-pill--primary{background:color-mix(in oklab,var(--color-primary-500) 14%,var(--color-surface-mix-target, white));color:var(--color-primary-700);border-color:color-mix(in oklab,var(--color-primary-500) 30%,var(--color-surface-mix-target, white))}.nvb-table__row--expanded td{background:color-mix(in oklab,var(--color-primary-500) 6%,var(--color-surface-mix-target, white))}.table-expanded-inline-row__cell{padding:0!important;background:transparent}.table-expanded-inline-row__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 4%,var(--color-surface-mix-target, white));border-top:1px solid var(--color-neutral-200)}.table-detail-panel{flex:0 0 clamp(260px,34%,420px);min-width:260px;max-width:420px;border-left:1px solid var(--color-neutral-200);background:color-mix(in oklab,var(--color-neutral-000) 94%,var(--color-surface-mix-target, white));padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}.table-detail-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detail-panel__title{font-size:13px;color:var(--color-neutral-700)}.table-detail-panel__close{width:24px;min-width:24px;height:24px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detail-panel__close span{font-size:16px}.table-detail-panel__close:hover{border-color:var(--color-neutral-400);background:color-mix(in oklab,var(--color-neutral-100) 88%,var(--color-surface-mix-target, white))}.expanded-row__template{color:var(--color-neutral-700);font-size:13px}.expanded-row__loading,.expanded-row__error,.expanded-row__empty{border:1px dashed var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-050);padding:10px 12px;font-size:12px}.expanded-row__loading,.expanded-row__empty{color:var(--color-neutral-500)}.expanded-row__error{color:var(--color-risk-700);border-color:var(--color-risk-300);background:var(--color-risk-050)}.expanded-row__details{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.expanded-row__detail-item{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:4px}.expanded-row__detail-label{font-size:11px;color:var(--color-neutral-500);font-weight:600}.expanded-row__detail-value{font-size:13px;color:var(--color-neutral-700);word-break:break-word}.nested-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--color-neutral-200);border-radius:6px;overflow:hidden}.nested-table th,.nested-table td{border-bottom:1px solid var(--color-neutral-200);padding:6px 8px;font-size:12px}.nested-table th{background:var(--color-neutral-050);color:var(--color-neutral-700)}.nested-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nested-table__header--focusable{cursor:pointer}.nested-table__placeholder-row td{color:transparent;min-height:32px}.nested-table tr:last-child td{border-bottom:none}.expanded-row__actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.expanded-row__action{border:1px solid var(--color-neutral-300);background:#fff;border-radius:6px;padding:4px 6px;display:inline-flex;align-items:center;gap:4px;color:var(--color-neutral-700);cursor:pointer;font-size:11px}.expanded-row__action--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);padding:0;justify-content:center}.expanded-row__action span.material-symbols-outlined{font-size:14px}.table-skeleton__row td{padding-top:10px;padding-bottom:10px}.table-skeleton__line{display:block;height:12px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-skeleton__dot{display:inline-block;width:16px;height:16px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-200) 88%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-neutral-300) 75%,transparent)}.table-skeleton__dot--action{width:22px;height:22px;border-radius:8px}.table-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:stretch;padding:12px;font-size:13px;background:color-mix(in oklab,var(--color-neutral-000) 90%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--color-neutral-700);z-index:5;animation:table-loading-fade .16s ease-out}.table-loading__skeleton{width:min(100%,980px);margin:0 auto;display:grid;gap:10px;padding:12px;border-radius:10px;border:1px solid color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,transparent);box-shadow:0 1px color-mix(in oklab,var(--color-neutral-100) 80%,transparent),0 12px 24px color-mix(in oklab,var(--color-neutral-900) 8%,transparent)}.table-loading__row{height:16px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-loading__row:first-child{height:22px;width:96%;border-radius:8px}.table-loading__row:nth-child(2){width:90%}.table-loading__row:nth-child(3){width:94%}.table-loading__row:nth-child(4){width:86%}.table-loading__row:nth-child(5){width:92%}.table-loading__label{align-self:center;font-size:11px;font-weight:500;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 86%,transparent);border:1px solid color-mix(in oklab,var(--color-neutral-300) 66%,transparent);color:var(--color-neutral-600)}.table-paginator{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 10px;background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));border:1px solid var(--table-surface-border);border-top:none;border-bottom-left-radius:var(--table-surface-radius);border-bottom-right-radius:var(--table-surface-radius);flex-wrap:wrap}.table-paginator__content,.table-paginator__controls{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.table-paginator--align-start{justify-content:flex-start}.table-paginator--align-center{justify-content:center}.table-paginator__size{display:inline-flex;align-items:center;min-width:0;margin-inline-start:auto}.table-paginator--align-start .table-paginator__size,.table-paginator--align-center .table-paginator__size{margin-inline-start:0}.table-paginator__nav,.table-paginator__page{border:1px solid var(--table-surface-border-strong);background:var(--color-neutral-000);color:var(--color-neutral-700);border-radius:var(--table-control-radius);min-width:var(--table-control-height);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);cursor:pointer;transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-paginator__nav{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.table-paginator__nav:not(:disabled):hover,.table-paginator__page:not(:disabled):hover{border-color:var(--color-primary-300);background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator__nav--icon{min-width:var(--table-control-height);width:var(--table-control-height);padding:0}.table-paginator__nav--icon span{font-size:16px;color:inherit}.table-paginator__pages{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}.table-paginator__size-select{width:84px;min-width:84px}.table-paginator__nav:disabled,.table-paginator__page:disabled{opacity:1;cursor:not-allowed;background:color-mix(in oklab,var(--color-neutral-100) 58%,var(--color-surface-mix-target, white));border-color:color-mix(in oklab,var(--color-neutral-300) 54%,var(--color-surface-mix-target, white));color:var(--color-neutral-400);box-shadow:none}.table-paginator__page--active,.table-paginator__page--active:disabled{opacity:1;border-color:var(--color-primary-500);background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.table-paginator__meta{font-size:12px;color:var(--color-neutral-600)}.table-paginator--compact{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--compact .table-paginator__content,.table-paginator--compact .table-paginator__controls,.table-paginator--compact .table-paginator__pages{gap:6px}.table-paginator--compact .table-paginator__nav,.table-paginator--compact .table-paginator__page{min-width:30px;min-height:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);box-shadow:none}.table-paginator--compact .table-paginator__nav--icon{width:30px;padding:0}.table-paginator--compact .table-paginator__nav:not(:disabled):hover,.table-paginator--compact .table-paginator__page:not(:disabled):hover{border-color:color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-surface-mix-target, white));color:var(--color-neutral-900)}.table-paginator--compact .table-paginator__page--active,.table-paginator--compact .table-paginator__page--active:disabled{border-color:var(--color-neutral-950);background:var(--color-neutral-950);color:var(--color-neutral-000);font-weight:700}.table-paginator--compact .table-paginator__nav:disabled,.table-paginator--compact .table-paginator__page:disabled{opacity:.4;background:transparent;border-color:transparent;color:var(--color-neutral-400)}.table-paginator--compact .table-paginator__meta{padding:0 6px}.table-paginator--compact .table-paginator__size{margin-inline-start:auto}.table-paginator--compact .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--segmented{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__content{gap:10px}.table-paginator--segmented .table-paginator__controls{gap:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--table-control-radius);overflow:hidden;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__pages{gap:0}.table-paginator--segmented .table-paginator__nav,.table-paginator--segmented .table-paginator__page{min-width:32px;min-height:32px;height:32px;padding:0 10px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);box-shadow:none}.table-paginator--segmented .table-paginator__nav--icon{width:32px;padding:0}.table-paginator--segmented .table-paginator__nav+.table-paginator__nav,.table-paginator--segmented .table-paginator__nav+.table-paginator__pages,.table-paginator--segmented .table-paginator__pages+.table-paginator__nav,.table-paginator--segmented .table-paginator__pages+.table-paginator__pages,.table-paginator--segmented .table-paginator__page+.table-paginator__page{border-inline-start:1px solid color-mix(in oklab,var(--color-neutral-300) 86%,transparent)}.table-paginator--segmented .table-paginator__nav:not(:disabled):hover,.table-paginator--segmented .table-paginator__page:not(:disabled):hover{background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator--segmented .table-paginator__page--active,.table-paginator--segmented .table-paginator__page--active:disabled{background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:700}.table-paginator--segmented .table-paginator__nav:disabled,.table-paginator--segmented .table-paginator__page:disabled{opacity:1;background:transparent;color:var(--color-neutral-400);border-color:transparent}.table-paginator--segmented .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--compact.table-paginator--flat,.table-paginator--segmented.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.nvb-table--grid th,.nvb-table--grid td{border-right:1px solid var(--table-surface-border)}.nvb-table--grid th:last-child,.nvb-table--grid td:last-child{border-right:none}.nvb-table--striped tbody tr:nth-child(2n){background:color-mix(in oklab,var(--color-neutral-050) 74%,var(--color-surface-mix-target, white))}.nvb-table--row-hover tbody>tr:not(.expanded-row):hover>td{background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-surface-mix-target, white))}.nvb-table__row--active>td{background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white))}.nvb-table--force-stack thead{display:none}.nvb-table--force-stack,.nvb-table--force-stack tbody,.nvb-table--force-stack tr,.nvb-table--force-stack td{display:block;width:100%}.nvb-table--force-stack tr{display:block;width:100%;border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--force-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--force-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--force-stack .action-cell{justify-items:end}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--force-stack .expand-cell:before,.nvb-table--force-stack .table-expanded-inline-row__cell:before,.nvb-table--force-stack .table-row-template-cell:before{content:none}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--force-stack .table-expanded-inline-row__content{width:100%}.table-dialog-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:1500}.table-dialog{--nvb-floating-overlay-z-index: 1520;--nvb-page-margin-bottom: 0px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,760px);max-height:84vh;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);z-index:1510;overflow:hidden;min-height:0;outline:0}.table-dialog--filters{width:min(92vw,680px)}.table-dialog--column-settings{width:min(92vw,620px)}.table-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);flex-shrink:0}.table-dialog__header h4{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900)}.table-dialog__close{width:32px;height:32px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.table-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.table-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.table-dialog__close span{font-size:18px}.table-dialog__body{padding:16px 24px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1 1 auto;min-height:0}.table-dialog__select-all{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-dialog__footer{border-top:1px solid var(--color-neutral-200);padding:16px 24px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0}.table-dialog__footer .table-export__action,.table-dialog__footer .table-toolbar__button{width:100%;justify-content:center}.table-dialog__footer--single{grid-template-columns:1fr}.table-dialog__tabs{display:flex;align-items:center;gap:4px;padding:0 24px;border-bottom:1px solid var(--color-neutral-200)}.table-dialog__tab{position:relative;min-height:40px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);font-size:13px;line-height:20px;font-weight:600;padding:0 12px;cursor:pointer}.table-dialog__tab:hover{color:var(--color-neutral-900);background:color-mix(in oklab,var(--color-neutral-100) 72%,transparent)}.table-dialog__tab--active{color:var(--color-primary-700)}.table-dialog__tab--active:after{content:\"\";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:999px;background:var(--color-primary-600)}.table-dialog__tab:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.table-export__columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.table-column-settings{display:flex;flex-direction:column;gap:10px}.table-column-settings__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.table-column-settings__list{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,520px);overflow:auto;padding-right:2px}.table-column-settings__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:6px 8px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;background:var(--color-neutral-000)}.table-column-settings__content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,180px);gap:10px;align-items:center}.table-column-settings__drag{width:32px;min-width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:grab;flex:0 0 auto}.table-column-settings__drag:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__drag:active{cursor:grabbing}.table-column-settings__list.cdk-drop-list-dragging .table-column-settings__item:not(.cdk-drag-placeholder){transition:transform .16s ease}.table-column-settings__item.cdk-drag-preview{box-sizing:border-box;background:var(--color-neutral-000);border:1px solid var(--color-primary-300);border-radius:8px;box-shadow:0 14px 28px #0f172a29}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__item.cdk-drag-placeholder{opacity:.35;border-style:dashed;background:var(--color-primary-050)}.table-column-settings__item.cdk-drag-animating{transition:transform .18s ease}.table-column-settings__toggle{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;font-size:12px;color:var(--color-neutral-800);font-weight:500}.table-column-settings__toggle .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}.table-column-settings__toggle .nvb-control__checkbox-input:hover{border-color:var(--color-primary-500)}.table-column-settings__toggle .nvb-control__checkbox-input:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary-500) 20%,transparent)}.table-column-settings__toggle .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__toggle span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}.table-column-settings__width{display:flex;flex-direction:column;gap:6px;min-width:0}.table-column-settings__width-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.table-column-settings__width-header>span{font-size:11px;line-height:1.2;color:var(--color-neutral-600)}.table-column-settings__width-meta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.table-column-settings__width-reset{min-height:24px;border:1px solid var(--color-neutral-300);border-radius:999px;background:var(--color-neutral-050);color:var(--color-neutral-700);font:inherit;font-size:11px;padding:0 10px;cursor:pointer}.table-column-settings__width-reset:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__width-reset--active{border-color:var(--color-primary-300);background:var(--color-primary-100);color:var(--color-primary-800)}.table-column-settings__width-range{display:block}.table-column-settings__width-range input[type=range]{width:100%;margin:0;accent-color:var(--color-primary-600);cursor:pointer}.table-column-settings__width-value{min-width:92px;min-height:28px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-800);display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:12px;font-weight:600}.table-column-settings__order{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.table-column-settings__move{width:30px;height:30px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-column-settings__move:hover:not(:disabled){border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__move:disabled{opacity:.5;cursor:not-allowed}@media(max-width:720px){.table-column-settings__content{grid-template-columns:minmax(0,1fr)}}.table-dialog--column-settings .table-dialog__footer{grid-template-columns:repeat(2,minmax(0,1fr))}.table-export__column{border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form{display:flex;flex-direction:column;gap:10px}.table-filter-form__row{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form__row input{border:1px solid var(--color-neutral-300);border-radius:7px;min-height:34px;padding:0 10px;font-size:12px;color:var(--color-neutral-700)}.table-filter-list{display:flex;flex-direction:column;gap:8px}.table-filter-list__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.table-filter-list__meta{min-width:0;display:flex;flex-direction:column;gap:2px}.table-filter-list__meta strong{font-size:13px;color:var(--color-neutral-800)}.table-filter-list__meta span,.table-filter-list__meta small{font-size:11px;color:var(--color-neutral-600)}.table-filter-list__actions{display:inline-flex;align-items:center;gap:6px}.table-filter-list__empty{font-size:12px;color:var(--color-neutral-500);padding:6px 0}@keyframes table-loading-fade{0%{opacity:0}to{opacity:1}}@keyframes table-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@container (max-width: 768px){.table-sticky-clone{display:none}.table-toolbar{flex-direction:column;align-items:stretch}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{width:100%;justify-content:flex-start;flex:0 0 auto}.table-toolbar__center{min-width:0}.table-toolbar__center--controls-only{justify-content:flex-start}.table-toolbar__right{margin-left:0}.table-toolbar__dropzone--center{flex:0 0 auto}.table-toolbar__drop-item{min-width:0;max-width:none;width:100%;flex-basis:100%}.table-toolbar__add-menu{position:static;width:100%;min-width:0;max-height:220px;margin-top:6px;box-shadow:none}.table-toolbar__button--detailed-toggle{width:100%;justify-content:space-between}.table-quick-search,.table-export{width:100%}.table-header-menu{width:100%;min-width:0}.table-export>.table-toolbar__button{width:100%;justify-content:space-between}.table-export__menu{left:0;right:auto;width:min(100%,280px)}.table-detailed-search__row{grid-template-columns:1fr}.table-detailed-search__remove,.table-detailed-search__actions{width:100%}.table-detailed-search__actions .table-toolbar__button{width:100%;justify-content:center}.table-cell-actions{width:100%}.table-frame{flex-direction:column}.table-detail-panel{width:100%;min-width:0;max-width:none;border-left:none;border-top:1px solid var(--color-neutral-200)}.table-cell-actions__select{width:100%;min-width:0}.table-dialog{width:min(94vw,720px);max-height:88vh}.table-dialog__footer{grid-template-columns:1fr}.table-filter-list__item{flex-direction:column;align-items:stretch}.table-filter-list__actions{width:100%}.table-filter-list__actions .table-toolbar__button{flex:1 1 0;justify-content:center}.nvb-table--auto-stack thead{display:none}.nvb-table--auto-stack,.nvb-table--auto-stack tbody,.nvb-table--auto-stack tr,.nvb-table--auto-stack td{display:block;width:100%}.nvb-table--auto-stack tr{border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--auto-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--auto-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--auto-stack .action-cell{justify-items:end}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--auto-stack .expand-cell:before,.nvb-table--auto-stack .table-expanded-inline-row__cell:before,.nvb-table--auto-stack .table-row-template-cell:before{content:none}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--auto-stack .table-expanded-inline-row__content{width:100%}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: ElementWrapper, selector: "element-wrapper", inputs: ["model", "controlIdInput", "labelForInput", "groupRole", "showTextWrapperInput"], exportAs: ["elementWrapper"] }, { kind: "component", type: RuntimeLazyElementOutlet, selector: "runtime-lazy-element-outlet", inputs: ["model"] }, { kind: "component", type: NvbStyleOutlet, selector: "nvb-style-outlet", inputs: ["cssText", "renderInPlace", "styleKey"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableElement, decorators: [{
             type: Component,
@@ -55276,7 +55276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         UiTranslatePipe,
                         RuntimeLazyElementOutlet,
                         NvbStyleOutlet,
-                    ], template: "<element-wrapper [model]=\"model()\">\r\n  @if (templateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"templateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"styleOutletKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n  <div\r\n    #tableShellRef\r\n    class=\"table-shell\"\r\n    [class.table-shell--editor]=\"isEditor()\"\r\n    [class.table-shell--sticky-header]=\"stickyHeaderEnabled()\"\r\n    [style.--table-sticky-header-offset]=\"stickyHeaderActiveOffset() + 'px'\"\r\n    [attr.aria-busy]=\"loading()\"\r\n  >\r\n    @if (\r\n      stickyHeaderEnabled() ||\r\n      showToolbar() ||\r\n      (detailedSearchEnabled() && showDetailedSearchPanel())\r\n    ) {\r\n      <div\r\n        #stickyHeaderRef\r\n        class=\"table-sticky-header\"\r\n        [class.table-sticky-header--enabled]=\"stickyHeaderEnabled()\"\r\n        [class.table-sticky-header--pinned]=\"stickyHeaderPinned()\"\r\n      >\r\n        @if (showToolbar()) {\r\n          <div\r\n            class=\"table-toolbar\"\r\n            role=\"toolbar\"\r\n            [class.table-toolbar--flat]=\"flatHeaderSurface()\"\r\n            [attr.aria-label]=\"'table.toolbar.label' | uiT: 'Table actions'\"\r\n          >\r\n            <div class=\"table-toolbar__left\">\r\n              @if (quickSearchEnabled()) {\r\n                <div\r\n                  class=\"table-quick-search\"\r\n                  role=\"search\"\r\n                  [attr.aria-label]=\"'table.search.quick' | uiT: 'Quick search'\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-quick-search__apply\"\r\n                    (click)=\"applyQuickSearch()\"\r\n                    [attr.aria-label]=\"'table.search.apply' | uiT: 'Search'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">search</span>\r\n                  </button>\r\n                  <input\r\n                    type=\"text\"\r\n                    [ngModel]=\"quickSearchTerm()\"\r\n                    (ngModelChange)=\"onQuickSearchValueChange($event)\"\r\n                    (keydown.enter)=\"applyQuickSearch(); $event.preventDefault()\"\r\n                    [placeholder]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                    [attr.aria-label]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                  />\r\n                  @if (quickSearchTerm()) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-quick-search__clear\"\r\n                      (click)=\"clearQuickSearch()\"\r\n                      [attr.aria-label]=\"'table.search.clearQuick' | uiT: 'Clear quick search'\"\r\n                    >\r\n                      <span class=\"material-symbols-outlined\">close</span>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (detailedSearchEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--detailed-toggle\"\r\n                  (click)=\"toggleDetailedSearch()\"\r\n                  [attr.aria-expanded]=\"showDetailedSearchPanel()\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">tune</span>\r\n                  <span>\r\n                    {{\r\n                      showDetailedSearchPanel()\r\n                        ? ('table.search.hideDetailed' | uiT: 'Hide detailed search')\r\n                        : ('table.search.showDetailed' | uiT: 'Detailed search')\r\n                    }}\r\n                  </span>\r\n                  @if (detailedFiltersCount() > 0) {\r\n                    <span class=\"table-toolbar__badge\">{{ detailedFiltersCount() }}</span>\r\n                  }\r\n                </button>\r\n              }\r\n\r\n              @if (showHeaderCenterInLeft()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtStart()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n\r\n            @if (showHeaderCenterArea()) {\r\n              <div\r\n                class=\"table-toolbar__center\"\r\n                [class.table-toolbar__center--controls-only]=\"\r\n                  !hasCustomHeaderTemplate() && showHeaderCenterInCenter()\r\n                \"\r\n              >\r\n                @if (hasCustomHeaderTemplate()) {\r\n                  <div\r\n                    class=\"table-toolbar__custom\"\r\n                    [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                    [innerHTML]=\"customHeaderTemplateHtml()\"\r\n                    (click)=\"onHeaderTemplateClick($event)\"\r\n                  ></div>\r\n                }\r\n\r\n                @if (showHeaderCenterInCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n                }\r\n\r\n                @if (renderHeaderActionsAtCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div class=\"table-toolbar__right\">\r\n              @if (columnSettingsEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--icon-only\"\r\n                  (click)=\"openColumnSettings()\"\r\n                  [attr.aria-expanded]=\"openColumnSettingsDialog()\"\r\n                  [attr.aria-label]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                  [attr.title]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                >\r\n                  <nvb-icon class=\"table-action-icon\" name=\"settings\"></nvb-icon>\r\n                </button>\r\n              }\r\n\r\n              @if (exportEnabled()) {\r\n                <div class=\"table-export\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button\"\r\n                    [disabled]=\"exportBusy()\"\r\n                    [title]=\"exportBusy() ? ('table.export.busy' | uiT: 'Exporting...') : ''\"\r\n                    [attr.aria-expanded]=\"\r\n                      exportUsesColumnPicker() ? openExportDialog() : openExportMenu()\r\n                    \"\r\n                    (click)=\"toggleExportMenu($event)\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">ios_share</span>\r\n                    <span>{{ 'table.export.open' | uiT: 'Export' }}</span>\r\n                    @if (!exportUsesColumnPicker()) {\r\n                      <span class=\"material-symbols-outlined table-export__chevron\">\r\n                        {{ openExportMenu() ? 'expand_less' : 'expand_more' }}\r\n                      </span>\r\n                    }\r\n                  </button>\r\n\r\n                  @if (!exportUsesColumnPicker() && openExportMenu()) {\r\n                    <div\r\n                      class=\"table-export__menu\"\r\n                      [class.table-export__menu--top]=\"exportMenuPosition() === 'top'\"\r\n                      [ngStyle]=\"exportMenuStyle()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <label class=\"table-export__scope\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"exportScope() === 'all'\"\r\n                          (change)=\"onExportScopeToggle($event)\"\r\n                        />\r\n                        <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n                      </label>\r\n\r\n                      <div class=\"table-export__actions\">\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('csv', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">description</span>\r\n                          <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('excel', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">table_view</span>\r\n                          <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('pdf', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n                          <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (showHeaderCenterInRight()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtEnd()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <ng-template #headerCenterControlsTemplate>\r\n            <div\r\n              class=\"table-toolbar__dropzone\"\r\n              [class.table-toolbar__dropzone--left]=\"headerCenterElementsPosition() === 'left'\"\r\n              [class.table-toolbar__dropzone--center]=\"headerCenterElementsPosition() === 'center'\"\r\n              [class.table-toolbar__dropzone--right]=\"headerCenterElementsPosition() === 'right'\"\r\n            >\r\n              @if (isEditor()) {\r\n                <div class=\"table-toolbar__add-element\" (click)=\"$event.stopPropagation()\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button table-toolbar__button--add-element\"\r\n                    (click)=\"toggleHeaderCenterAddMenu($event)\"\r\n                    [attr.aria-expanded]=\"headerCenterAddMenuOpen()\"\r\n                    [attr.aria-label]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                    [title]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">add</span>\r\n                  </button>\r\n\r\n                  @if (headerCenterAddMenuOpen()) {\r\n                    <div class=\"table-toolbar__add-menu\">\r\n                      @for (option of headerCenterAddOptions; track option.type) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__add-menu-item\"\r\n                          (click)=\"addHeaderCenterElementByType(option.type, $event)\"\r\n                        >\r\n                          {{ option.labelKey | uiT: option.fallbackLabel }}\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (hasHeaderCenterElements()) {\r\n                <div class=\"table-toolbar__drop-items\">\r\n                  @for (headerElement of headerCenterElements(); track headerElement.name) {\r\n                    <div\r\n                      class=\"table-toolbar__drop-item\"\r\n                      [class.table-toolbar__drop-item--editor]=\"isEditor()\"\r\n                      [class.table-toolbar__drop-item--focused]=\"\r\n                        isHeaderCenterElementFocused(headerElement.name)\r\n                      \"\r\n                      [attr.data-nvb-header-center-name]=\"headerElement.name\"\r\n                      (mousedown)=\"focusHeaderCenterElementByName(headerElement.name, $event)\"\r\n                    >\r\n                      <runtime-lazy-element-outlet [model]=\"headerElement\" />\r\n                      @if (isEditor()) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__drop-remove\"\r\n                          (click)=\"removeHeaderCenterElement(headerElement.name, $event)\"\r\n                          [attr.aria-label]=\"\r\n                            'table.header.removeCenterElement' | uiT: 'Remove center element'\r\n                          \"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">close</span>\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n\r\n          <ng-template #headerActionsTemplate>\r\n            @if (visibleHeaderActions(); as headerActions) {\r\n              @if (headerActions.length > 0) {\r\n                @if (renderHeaderActionsAsDropdown()) {\r\n                  <nvb-select\r\n                    class=\"table-toolbar__select\"\r\n                    [ngModel]=\"headerActionDropdownValue()\"\r\n                    (ngModelChange)=\"onHeaderActionDropdownChange($event)\"\r\n                    (blur)=\"onHeaderActionDropdownBlur()\"\r\n                    [attr.aria-label]=\"headerActionsDropdownPlaceholder()\"\r\n                  >\r\n                    <option value=\"\">{{ headerActionsDropdownPlaceholder() }}</option>\r\n                    @for (option of headerActionDropdownOptions(); track option.value) {\r\n                      <option [value]=\"option.value\">{{ option.label }}</option>\r\n                    }\r\n                  </nvb-select>\r\n                } @else {\r\n                  <div class=\"table-toolbar__actions\">\r\n                    @for (action of headerActions; track action.id || $index) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        [class.table-toolbar__button--icon-only]=\"actionHidesText(action)\"\r\n                        [attr.title]=\"resolveActionLabel(action)\"\r\n                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                        (click)=\"runHeaderAction(action, $event)\"\r\n                      >\r\n                        @if (resolveActionIcon(action); as actionIcon) {\r\n                          <nvb-icon class=\"table-action-icon\" [name]=\"actionIcon\"></nvb-icon>\r\n                        }\r\n                        @if (!actionHidesText(action)) {\r\n                          <span>{{ resolveActionLabel(action) }}</span>\r\n                        }\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          </ng-template>\r\n        }\r\n\r\n        @if (detailedSearchEnabled() && showDetailedSearchPanel()) {\r\n          <div class=\"table-detailed-search\">\r\n            <div class=\"table-detailed-search__rows\">\r\n              @for (filter of detailedFilters(); track filter.id) {\r\n                <div class=\"table-detailed-search__row\">\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.key\"\r\n                    (ngModelChange)=\"updateDetailedFilterKey(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.field' | uiT: 'Field'\"\r\n                  >\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <option [value]=\"column.key\">{{ resolveColumnLabel(column) }}</option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.operator\"\r\n                    (ngModelChange)=\"updateDetailedFilterOperator(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.operator' | uiT: 'Operator'\"\r\n                  >\r\n                    @for (operator of getFilterOperators(filter); track operator.value) {\r\n                      <option [value]=\"operator.value\">\r\n                        {{ operator.label | uiT: operator.value }}\r\n                      </option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  @if (isSelectFilter(filter)) {\r\n                    <nvb-select\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    >\r\n                      <option value=\"\">\r\n                        {{\r\n                          resolveDetailedFilterOptions(filter).length > 0\r\n                            ? ('table.search.value' | uiT: 'Value')\r\n                            : ('table.search.emptyOptions' | uiT: 'No options')\r\n                        }}\r\n                      </option>\r\n                      @for (option of resolveDetailedFilterOptions(filter); track option.value) {\r\n                        <option [value]=\"option.value\">{{ option.label }}</option>\r\n                      }\r\n                    </nvb-select>\r\n                  } @else if (isMultiSelectFilter(filter)) {\r\n                    <div\r\n                      class=\"table-detailed-search__multi-select\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__multi-select-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterMultiSelectOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterMultiSelectMenu(filter.id, $event)\"\r\n                      >\r\n                        @if (hasDetailedFilterSelectedOptions(filter)) {\r\n                          <span>{{ resolveDetailedFilterMultiSelectLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__multi-select-placeholder\">{{\r\n                            resolveDetailedFilterOptions(filter).length > 0\r\n                              ? ('table.search.value' | uiT: 'Value')\r\n                              : ('table.search.emptyOptions' | uiT: 'No options')\r\n                          }}</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">\r\n                          {{\r\n                            isDetailedFilterMultiSelectOpen(filter.id)\r\n                              ? 'expand_less'\r\n                              : 'expand_more'\r\n                          }}\r\n                        </span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterMultiSelectOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__multi-select-menu\">\r\n                          @if (resolveDetailedFilterOptions(filter).length === 0) {\r\n                            <div class=\"table-detailed-search__multi-select-empty\">\r\n                              {{ 'table.search.emptyOptions' | uiT: 'No options' }}\r\n                            </div>\r\n                          } @else {\r\n                            @for (\r\n                              option of resolveDetailedFilterOptions(filter);\r\n                              track option.value\r\n                            ) {\r\n                              <label class=\"table-detailed-search__multi-select-option\">\r\n                                <input\r\n                                  type=\"checkbox\"\r\n                                  class=\"nvb-control__checkbox-input\"\r\n                                  [checked]=\"isFilterOptionSelected(filter, option.value)\"\r\n                                  (change)=\"\r\n                                    onDetailedFilterMultiSelectOptionToggle(\r\n                                      filter.id,\r\n                                      option.value,\r\n                                      $any($event.target).checked\r\n                                    )\r\n                                  \"\r\n                                />\r\n                                <span>{{ option.label }}</span>\r\n                              </label>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isToggleFilter(filter)) {\r\n                    <label\r\n                      class=\"table-detailed-search__toggle table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-toggle-switch__input\"\r\n                        [checked]=\"isToggleFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedToggleFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span class=\"nvb-toggle-switch__track\">\r\n                        <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                      </span>\r\n                      <span>{{ filterValueAsString(filter.value) }}</span>\r\n                    </label>\r\n                  } @else if (isCheckboxFilter(filter) || isBooleanFilter(filter)) {\r\n                    <label class=\"table-detailed-search__boolean-toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked ? 'true' : 'false'\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span>{{\r\n                        isFilterValueTrue(filter)\r\n                          ? ('table.search.boolean.true' | uiT: 'True')\r\n                          : ('table.search.boolean.false' | uiT: 'False')\r\n                      }}</span>\r\n                    </label>\r\n                  } @else if (isNumericFilter(filter)) {\r\n                    <input\r\n                      type=\"number\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else if (isDateFilter(filter)) {\r\n                    <div class=\"table-detailed-search__date\" (click)=\"$event.stopPropagation()\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__date-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterDatePickerOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterDatePicker(filter, $event)\"\r\n                      >\r\n                        @if (resolveDetailedFilterDateLabel(filter)) {\r\n                          <span>{{ resolveDetailedFilterDateLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__date-placeholder\">0000-00-00</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">calendar_month</span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterDatePickerOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__date-menu\">\r\n                          <div class=\"table-detailed-search__date-header\">\r\n                            <button type=\"button\" (click)=\"previousDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                            </button>\r\n                            <span>{{ resolveDetailedFilterDateMonthLabel() }}</span>\r\n                            <button type=\"button\" (click)=\"nextDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                            </button>\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-weekdays\">\r\n                            @for (\r\n                              weekday of resolveDetailedFilterDateWeekdays();\r\n                              track weekday + $index\r\n                            ) {\r\n                              <span>{{ weekday }}</span>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-days\">\r\n                            @for (day of resolveDetailedFilterDateDays(filter); track day.key) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"table-detailed-search__date-day\"\r\n                                [class.table-detailed-search__date-day--outside]=\"day.outsideMonth\"\r\n                                [class.table-detailed-search__date-day--today]=\"day.isToday\"\r\n                                [class.table-detailed-search__date-day--selected]=\"day.isSelected\"\r\n                                (click)=\"selectDetailedFilterDate(filter.id, day.iso, $event)\"\r\n                              >\r\n                                {{ day.day }}\r\n                              </button>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              (click)=\"clearDetailedFilterDate(filter.id, $event)\"\r\n                            >\r\n                              {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n                            </button>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isDateTimeFilter(filter)) {\r\n                    <input\r\n                      type=\"datetime-local\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else {\r\n                    <input\r\n                      type=\"text\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  }\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-detailed-search__remove\"\r\n                    (click)=\"removeDetailedFilter(filter.id)\"\r\n                    [attr.aria-label]=\"'table.search.removeFilter' | uiT: 'Remove filter'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">delete</span>\r\n                  </button>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"table-detailed-search__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"addDetailedFilter()\">\r\n                <span class=\"material-symbols-outlined\">add</span>\r\n                <span>{{ 'table.search.addFilter' | uiT: 'Add filter' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"clearDetailedSearch()\">\r\n                <span class=\"material-symbols-outlined\">ink_eraser</span>\r\n                <span>{{ 'table.search.clear' | uiT: 'Clear' }}</span>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-toolbar__button table-toolbar__button--primary\"\r\n                (click)=\"applyDetailedSearch()\"\r\n              >\r\n                <span class=\"material-symbols-outlined\">check</span>\r\n                <span>{{ 'table.search.apply' | uiT: 'Apply' }}</span>\r\n              </button>\r\n              @if (savedFiltersEnabled()) {\r\n                <button type=\"button\" class=\"table-toolbar__button\" (click)=\"openSavedFilters()\">\r\n                  <span class=\"material-symbols-outlined\">bookmark</span>\r\n                  <span>{{ 'table.search.saved' | uiT: 'Saved filters' }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (stickyHeaderCloneVisible()) {\r\n          <div class=\"table-sticky-clone\">\r\n            <div class=\"table-sticky-clone__viewport\">\r\n              <table\r\n                class=\"nvb-table table-sticky-clone__table\"\r\n                [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n                [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n                [style.width.px]=\"stickyHeaderTableWidth() || null\"\r\n                [style.transform]=\"'translateX(' + -stickyHeaderScrollLeft() + 'px)'\"\r\n              >\r\n                <thead>\r\n                  <tr class=\"table-sticky-clone__row\">\r\n                    @if (showExpandChevronColumn()) {\r\n                      <th\r\n                        class=\"expand-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                        [style.min-width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                      ></th>\r\n                    }\r\n                    @if (selectionEnabled()) {\r\n                      <th\r\n                        class=\"select-column\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                      >\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"allVisibleSelected()\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"toggleSelectAllVisible($event)\"\r\n                          [attr.aria-label]=\"\r\n                            model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                          \"\r\n                        />\r\n                      </th>\r\n                    }\r\n\r\n                    @for (\r\n                      column of dataColumns();\r\n                      track column.id || column.key;\r\n                      let columnIndex = $index\r\n                    ) {\r\n                      <th\r\n                        [class]=\"columnAlignClass(column)\"\r\n                        [class.sortable]=\"column.sortable\"\r\n                        [class.sorted-active]=\"isSortedColumn(column)\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                      >\r\n                        @if (showColumnHeaderLabel(column)) {\r\n                          <span>{{ resolveColumnLabel(column) }}</span>\r\n                        }\r\n                        @if (column.sortable) {\r\n                          <span\r\n                            class=\"material-symbols-outlined sort-icon\"\r\n                            [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                          >\r\n                            {{ sortIndicator(column) }}\r\n                          </span>\r\n                        }\r\n                      </th>\r\n                    }\r\n\r\n                    @if (hasRowActions()) {\r\n                      <th\r\n                        class=\"action-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\r\n                        \"\r\n                      >\r\n                        <div class=\"action-header\">\r\n                          @if (showActionsHeaderLabel()) {\r\n                            <span class=\"action-header__label\">{{\r\n                              model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                            }}</span>\r\n                          }\r\n                        </div>\r\n                      </th>\r\n                    }\r\n                  </tr>\r\n                </thead>\r\n              </table>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      class=\"table-frame\"\r\n      [class.table-frame--with-toolbar]=\"showToolbar() && !flatHeaderSurface()\"\r\n      [class.table-frame--with-paginator]=\"model().paginator && !flatFooterSurface()\"\r\n      [class.table-frame--with-detail-panel]=\"activeExpandedPanelContext() !== null\"\r\n    >\r\n      <div\r\n        #tableScrollerRef\r\n        class=\"table-frame__scroller\"\r\n        [class.table-frame__scroller--virtual]=\"virtualScrollEnabled()\"\r\n        [style.max-height.px]=\"virtualScrollEnabled() ? virtualScrollViewportHeight() : null\"\r\n        (scroll)=\"onTableScroll($event)\"\r\n      >\r\n        <table\r\n          class=\"nvb-table\"\r\n          [class.nvb-table--auto-stack]=\"model().responsiveMode === 'auto'\"\r\n          [class.nvb-table--force-stack]=\"model().responsiveMode === 'stack'\"\r\n          [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n          [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n          [class.nvb-table--row-hover]=\"rowHoverEnabled()\"\r\n          [class.nvb-table--sticky-header]=\"stickyHeaderEnabled()\"\r\n          [class.nvb-table--virtual-scroll]=\"virtualScrollEnabled()\"\r\n          data-testid=\"table-element-root\"\r\n        >\r\n          <thead>\r\n            <tr #mainHeaderRowRef>\r\n              @if (showExpandChevronColumn()) {\r\n                <th class=\"expand-column\"></th>\r\n              }\r\n              @if (selectionEnabled()) {\r\n                <th class=\"select-column\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input\"\r\n                    [checked]=\"allVisibleSelected()\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"toggleSelectAllVisible($event)\"\r\n                    [attr.aria-label]=\"\r\n                      model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                    \"\r\n                  />\r\n                </th>\r\n              }\r\n\r\n              @for (\r\n                column of dataColumns();\r\n                track column.id || column.key;\r\n                let columnIndex = $index\r\n              ) {\r\n                <th\r\n                  [class]=\"columnAlignClass(column)\"\r\n                  [class.sortable]=\"column.sortable\"\r\n                  [class.column-focused]=\"isColumnFocused(column, columnIndex)\"\r\n                  [class.sorted-active]=\"isSortedColumn(column)\"\r\n                  [style.width]=\"columnWidthStyle(column)\"\r\n                  [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                  (focus)=\"onColumnHeaderFocus(column, columnIndex)\"\r\n                  (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                >\r\n                  @if (showColumnHeaderLabel(column)) {\r\n                    <span>{{ resolveColumnLabel(column) }}</span>\r\n                  }\r\n                  @if (column.sortable) {\r\n                    <span\r\n                      class=\"material-symbols-outlined sort-icon\"\r\n                      [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                    >\r\n                      {{ sortIndicator(column) }}\r\n                    </span>\r\n                  }\r\n                </th>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <th class=\"action-column\">\r\n                  <div class=\"action-header\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      <span class=\"action-header__label\">{{\r\n                        model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                      }}</span>\r\n                    }\r\n\r\n                    @if (hasSelectionActions() && selectedRowsCount() > 0) {\r\n                      @if (visibleSelectionActions(); as selectionActions) {\r\n                        @if (selectionActions.length > 0) {\r\n                          <div class=\"selection-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              class=\"selection-actions__toggle\"\r\n                              (click)=\"toggleSelectionActionMenu(selectionActions.length, $event)\"\r\n                              [attr.aria-label]=\"\r\n                                selectionActionsLabel() | uiT: selectionActionsLabel()\r\n                              \"\r\n                            >\r\n                              <span class=\"material-symbols-outlined\">checklist</span>\r\n                              <span class=\"selection-actions__count\">{{\r\n                                selectedRowsCount()\r\n                              }}</span>\r\n                            </button>\r\n\r\n                            @if (openSelectionActionMenu()) {\r\n                              <div\r\n                                class=\"selection-actions__menu\"\r\n                                [class.selection-actions__menu--top]=\"\r\n                                  selectionActionMenuPosition() === 'top'\r\n                                \"\r\n                                [ngStyle]=\"selectionActionMenuStyle()\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @for (action of selectionActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    (click)=\"runSelectionAction(action, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  </button>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    }\r\n                  </div>\r\n                </th>\r\n              }\r\n            </tr>\r\n          </thead>\r\n\r\n          <tbody>\r\n            @if (showInitialSkeleton()) {\r\n              @for (rowIndex of initialSkeletonRows(); track rowIndex) {\r\n                <tr class=\"table-skeleton__row\" aria-hidden=\"true\">\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td class=\"select-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @for (\r\n                    column of dataColumns();\r\n                    track column.id || column.key;\r\n                    let columnIndex = $index\r\n                  ) {\r\n                    <td [class]=\"columnAlignClass(column)\">\r\n                      <span\r\n                        class=\"table-skeleton__line\"\r\n                        [style.width]=\"initialSkeletonCellWidth(rowIndex, columnIndex)\"\r\n                      ></span>\r\n                    </td>\r\n                  }\r\n                  @if (hasRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      <span class=\"table-skeleton__dot table-skeleton__dot--action\"></span>\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n            } @else {\r\n              @if (!loading() && visibleRows().length === 0) {\r\n                <tr>\r\n                  <td\r\n                    class=\"empty-cell\"\r\n                    [attr.colspan]=\"\r\n                      dataColumns().length +\r\n                      (hasRowActions() ? 1 : 0) +\r\n                      (selectionEnabled() ? 1 : 0) +\r\n                      (showExpandChevronColumn() ? 1 : 0)\r\n                    \"\r\n                  >\r\n                    {{ model().emptyMessage || ('table.empty' | uiT: 'No data') }}\r\n                  </td>\r\n                </tr>\r\n                @if (expandedUsesInline() && editorExpandedPreviewContext(); as expandedContext) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualTopSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualTopSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n\r\n              @for (\r\n                renderedRow of renderedRows();\r\n                track rowTrackKey(renderedRow.row, renderedRow.visibleIndex)\r\n              ) {\r\n                @let row = renderedRow.row;\r\n                @let rowIndex = renderedRow.visibleIndex;\r\n                <tr\r\n                  [class.nvb-table__row--active]=\"isRowActive(row, rowIndex)\"\r\n                  [class.nvb-table__row--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                  [class.nvb-table__row--editing]=\"isInlineEditRow(row, rowIndex)\"\r\n                  (click)=\"onRowClick(row, rowIndex, $event)\"\r\n                  (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n                >\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      @if (showExpandToggle(row, rowIndex)) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"expand-toggle\"\r\n                          [class.expand-toggle--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                          (click)=\"toggleRowExpand(row, rowIndex, $event)\"\r\n                          [attr.aria-label]=\"resolveExpandToggleLabel(row, rowIndex)\"\r\n                          [attr.aria-expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">{{\r\n                            resolveExpandToggleIcon(row, rowIndex)\r\n                          }}</span>\r\n                        </button>\r\n                      }\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td\r\n                      class=\"select-cell\"\r\n                      [attr.data-label]=\"model().selectLabel || ('table.select' | uiT: 'Select')\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isRowSelected(row, rowIndex)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (change)=\"toggleRowSelection(row, rowIndex, $event)\"\r\n                        [attr.aria-label]=\"\r\n                          model().selectRowLabel || ('table.selectRow' | uiT: 'Select row')\r\n                        \"\r\n                      />\r\n                    </td>\r\n                  }\r\n\r\n                  @if (rowTemplateEnabled()) {\r\n                    <td\r\n                      class=\"table-row-template-cell\"\r\n                      data-label=\"\"\r\n                      [attr.colspan]=\"rowTemplateColspan()\"\r\n                    >\r\n                      <div\r\n                        class=\"table-row-template-host\"\r\n                        [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                        [innerHTML]=\"resolveRowTemplateHtml(row, rowIndex) || ''\"\r\n                        (click)=\"onTemplateContentClick($event, row, row)\"\r\n                      ></div>\r\n                    </td>\r\n                  } @else {\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <td\r\n                        [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                        [class]=\"columnAlignClass(column)\"\r\n                      >\r\n                        <div class=\"table-cell-content\">\r\n                          <div class=\"table-cell-content__value\">\r\n                            @if (isInlineEditRow(row, rowIndex) && isInlineEditableColumn(column)) {\r\n                              @switch (resolveInlineEditorType(column)) {\r\n                                @case ('textarea') {\r\n                                  <textarea\r\n                                    class=\"table-inline-edit table-inline-edit--textarea\"\r\n                                    rows=\"2\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  ></textarea>\r\n                                }\r\n                                @case ('number') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"number\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('date') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"date\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('checkbox') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                  </label>\r\n                                }\r\n                                @case ('toggle') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-toggle-switch__input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                    <span class=\"nvb-toggle-switch__track\">\r\n                                      <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                    </span>\r\n                                  </label>\r\n                                }\r\n                                @case ('select') {\r\n                                  <select\r\n                                    class=\"table-inline-edit\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <option [ngValue]=\"null\">\r\n                                      {{\r\n                                        resolveInlineEditorPlaceholder(column) ||\r\n                                          ('table.inlineEdit.select' | uiT: 'Select')\r\n                                      }}\r\n                                    </option>\r\n                                    @for (\r\n                                      option of resolveInlineSelectOptions(column);\r\n                                      track $index\r\n                                    ) {\r\n                                      <option [ngValue]=\"option.rawValue\">\r\n                                        {{ option.label }}\r\n                                      </option>\r\n                                    }\r\n                                  </select>\r\n                                }\r\n                                @default {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"text\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                              }\r\n                            } @else if (isToggleSwitchColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                [class.nvb-toggle-switch--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-toggle-switch__input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                                <span class=\"nvb-toggle-switch__track\">\r\n                                  <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                </span>\r\n                              </label>\r\n                            } @else if (isSingleCheckboxColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                [class.nvb-single-checkbox--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                              </label>\r\n                            } @else if (resolveStatusBadge(row, column); as statusBadge) {\r\n                              <span\r\n                                class=\"status-pill\"\r\n                                [class]=\"'status-pill status-pill--' + statusBadge.tone\"\r\n                                [class.status-pill--rounded]=\"statusBadge.rounded\"\r\n                              >\r\n                                @if (statusBadge.icon) {\r\n                                  <nvb-icon\r\n                                    class=\"status-pill__icon\"\r\n                                    [name]=\"statusBadge.icon\"\r\n                                  ></nvb-icon>\r\n                                }\r\n                                {{ statusBadge.label }}\r\n                              </span>\r\n                            } @else if (resolveCellHtml(row, column); as cellHtml) {\r\n                              <div\r\n                                class=\"table-template-host\"\r\n                                [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                                [innerHTML]=\"cellHtml\"\r\n                                (click)=\"\r\n                                  onTemplateContentClick($event, row, resolveCellValue(row, column))\r\n                                \"\r\n                              ></div>\r\n                            } @else {\r\n                              {{ resolveCellText(row, column) }}\r\n                            }\r\n                          </div>\r\n\r\n                          @if (!isInteractiveColumn(column)) {\r\n                            @if (visibleColumnCellActions(row, column); as columnActions) {\r\n                              @if (columnActions.length > 0) {\r\n                                <div\r\n                                  class=\"table-cell-actions\"\r\n                                  [class.table-cell-actions--icon]=\"\r\n                                    columnCellActionsUseIconButtons(column)\r\n                                  \"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                >\r\n                                  @if (columnCellActionsUseDropdown(column)) {\r\n                                    <nvb-select\r\n                                      class=\"table-cell-actions__select\"\r\n                                      (change)=\"onColumnCellActionSelect(row, column, $event)\"\r\n                                    >\r\n                                      <option value=\"\">\r\n                                        {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                      </option>\r\n                                      @for (action of columnActions; track action.id || $index) {\r\n                                        <option [value]=\"'id:' + (action.id || $index)\">\r\n                                          {{ resolveActionLabel(action) }}\r\n                                        </option>\r\n                                      }\r\n                                    </nvb-select>\r\n                                  } @else {\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"table-cell-actions__button\"\r\n                                        [class.table-cell-actions__button--icon-only]=\"\r\n                                          columnCellActionsUseIconButtons(column) ||\r\n                                          actionHidesText(action)\r\n                                        \"\r\n                                        [attr.title]=\"resolveActionLabel(action)\"\r\n                                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                        (click)=\"runColumnCellAction(action, row, $event, column)\"\r\n                                      >\r\n                                        @if (resolveActionIcon(action); as actionIcon) {\r\n                                          <nvb-icon\r\n                                            class=\"table-action-icon\"\r\n                                            [name]=\"actionIcon\"\r\n                                          ></nvb-icon>\r\n                                        }\r\n                                        @if (\r\n                                          actionRendersText(\r\n                                            action,\r\n                                            columnCellActionsUseButtons(column)\r\n                                          )\r\n                                        ) {\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </td>\r\n                    }\r\n                  }\r\n\r\n                  @if (hasRowActions()) {\r\n                    <td\r\n                      class=\"action-cell\"\r\n                      [attr.data-label]=\"model().actionsLabel || ('table.actions' | uiT: 'Actions')\"\r\n                    >\r\n                      @if (visibleRowActions(row); as rowActions) {\r\n                        @let rowEditing = isInlineEditRow(row, rowIndex);\r\n                        @let inlineActionsEnabled =\r\n                          inlineEditEnabled() && hasInlineEditableColumns();\r\n                        @if (inlineActionsEnabled || rowActions.length > 0) {\r\n                          <div class=\"row-actions row-actions--inline\">\r\n                            @if (inlineActionsEnabled) {\r\n                              @if (rowEditing) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"saveInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">save</span>\r\n                                  <span>{{\r\n                                    isInlineEditBusy(row, rowIndex)\r\n                                      ? ('table.inlineEdit.saving' | uiT: 'Saving')\r\n                                      : ('table.inlineEdit.save' | uiT: 'Save')\r\n                                  }}</span>\r\n                                </button>\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"cancelInlineEdit($event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">close</span>\r\n                                  <span>{{ 'table.inlineEdit.cancel' | uiT: 'Cancel' }}</span>\r\n                                </button>\r\n                              } @else {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  (click)=\"startInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">edit</span>\r\n                                  <span>{{ 'table.inlineEdit.edit' | uiT: 'Redaguoti' }}</span>\r\n                                </button>\r\n                              }\r\n                            }\r\n\r\n                            @if (!rowEditing && rowActions.length > 0) {\r\n                              @if (rowActionsUseDropdown()) {\r\n                                <div class=\"row-actions\">\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__toggle\"\r\n                                    [class.row-actions__toggle--borderless]=\"\r\n                                      rowActionsUseBorderlessDropdownToggle()\r\n                                    \"\r\n                                    (click)=\"toggleActionMenu(rowIndex, rowActions.length, $event)\"\r\n                                    [attr.aria-label]=\"\r\n                                      model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                                    \"\r\n                                  >\r\n                                    <span class=\"material-symbols-outlined\">more_vert</span>\r\n                                  </button>\r\n\r\n                                  @if (openActionMenuRow() === rowIndex) {\r\n                                    <div\r\n                                      class=\"row-actions__menu\"\r\n                                      [class.row-actions__menu--top]=\"\r\n                                        rowActionMenuPosition() === 'top'\r\n                                      \"\r\n                                      [ngStyle]=\"rowActionMenuStyle()\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                    >\r\n                                      @for (action of rowActions; track action.id || $index) {\r\n                                        <button\r\n                                          type=\"button\"\r\n                                          (click)=\"runRowAction(action, row, $event)\"\r\n                                        >\r\n                                          @if (resolveActionIcon(action); as actionIcon) {\r\n                                            <nvb-icon\r\n                                              class=\"table-action-icon\"\r\n                                              [name]=\"actionIcon\"\r\n                                            ></nvb-icon>\r\n                                          }\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        </button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              } @else {\r\n                                @for (action of rowActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__inline-button\"\r\n                                    [class.row-actions__inline-button--icon-only]=\"\r\n                                      rowActionsUseIconButtons() || actionHidesText(action)\r\n                                    \"\r\n                                    [attr.title]=\"resolveActionLabel(action)\"\r\n                                    [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                    (click)=\"runRowAction(action, row, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                      <span>{{ resolveActionLabel(action) }}</span>\r\n                                    }\r\n                                  </button>\r\n                                }\r\n                              }\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n                @if (expandedUsesInline() && isRowExpanded(row, rowIndex)) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row\"\r\n                    [attr.data-row-key]=\"resolveRowExpansionKey(row, rowIndex)\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                            expandedContext: {\r\n                              key: resolveRowExpansionKey(row, rowIndex),\r\n                              row: row,\r\n                              rowIndex: rowIndex,\r\n                            },\r\n                          }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n                @if (\r\n                  expandedUsesInline() &&\r\n                    isEditor() &&\r\n                    rowIndex === 0 &&\r\n                    !isRowExpanded(row, rowIndex) &&\r\n                    editorExpandedPreviewContext();\r\n                  as expandedContext\r\n                ) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualBottomSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualBottomSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <ng-template #expandedContentTemplate let-expandedContext=\"expandedContext\">\r\n        @if (\r\n          expansionEnabled() && isExpandedRowsLoading(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          <div class=\"expanded-row__loading\">\r\n            {{ resolveExpandedLoadingMessage() | uiT: 'Loading details...' }}\r\n          </div>\r\n        } @else if (\r\n          resolveExpandedRowsError(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedError\r\n        ) {\r\n          <div class=\"expanded-row__error\">\r\n            {{ expandedError | uiT: 'Failed to load details.' }}\r\n          </div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n            resolveExpandedTemplateHtml(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedTemplateHtml\r\n        ) {\r\n          <div\r\n            class=\"expanded-row__template\"\r\n            [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n            [innerHTML]=\"expandedTemplateHtml\"\r\n            (click)=\"\r\n              onTemplateContentClick(\r\n                $event,\r\n                expandedContext.row,\r\n                resolveExpandedRows(expandedContext.row, expandedContext.rowIndex),\r\n                expandedContext.row\r\n              )\r\n            \"\r\n          ></div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n          shouldRenderExpandedNestedTable(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          @let expandedRows = resolveExpandedRows(expandedContext.row, expandedContext.rowIndex);\r\n          <table class=\"nested-table\">\r\n            <thead>\r\n              <tr>\r\n                @for (\r\n                  column of expandedDataColumns();\r\n                  track column.id || column.key;\r\n                  let columnIndex = $index\r\n                ) {\r\n                  <th\r\n                    [class]=\"columnAlignClass(column)\"\r\n                    [class.column-focused]=\"isExpandedColumnFocused(column, columnIndex)\"\r\n                    [class.nested-table__header--focusable]=\"isEditor()\"\r\n                    [style.width]=\"columnWidthStyle(column)\"\r\n                    [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                    (focus)=\"onExpandedColumnHeaderFocus(column, columnIndex)\"\r\n                    (click)=\"onExpandedColumnHeaderClick(column, columnIndex, $event)\"\r\n                  >\r\n                    @if (showColumnHeaderLabel(column)) {\r\n                      {{ resolveColumnLabel(column) }}\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (hasExpandedRowActions()) {\r\n                  <th class=\"action-column\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      {{ model().actionsLabel || ('table.actions' | uiT: 'Actions') }}\r\n                    }\r\n                  </th>\r\n                }\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (expandedRow of expandedRows; track $index) {\r\n                <tr>\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td\r\n                      [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                      [class]=\"columnAlignClass(column)\"\r\n                    >\r\n                      <div class=\"table-cell-content\">\r\n                        <div class=\"table-cell-content__value\">\r\n                          @if (isToggleSwitchColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                              [class.nvb-toggle-switch--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-toggle-switch__input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                              <span class=\"nvb-toggle-switch__track\">\r\n                                <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                              </span>\r\n                            </label>\r\n                          } @else if (isSingleCheckboxColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                              [class.nvb-single-checkbox--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </label>\r\n                          } @else if (\r\n                            resolveStatusBadge(expandedRow, column);\r\n                            as expandedStatusBadge\r\n                          ) {\r\n                            <span\r\n                              class=\"status-pill\"\r\n                              [class]=\"'status-pill status-pill--' + expandedStatusBadge.tone\"\r\n                              [class.status-pill--rounded]=\"expandedStatusBadge.rounded\"\r\n                            >\r\n                              @if (expandedStatusBadge.icon) {\r\n                                <nvb-icon\r\n                                  class=\"status-pill__icon\"\r\n                                  [name]=\"expandedStatusBadge.icon\"\r\n                                ></nvb-icon>\r\n                              }\r\n                              {{ expandedStatusBadge.label }}\r\n                            </span>\r\n                          } @else if (resolveCellHtml(expandedRow, column); as expandedCellHtml) {\r\n                            <div\r\n                              class=\"table-template-host\"\r\n                              [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                              [innerHTML]=\"expandedCellHtml\"\r\n                              (click)=\"\r\n                                onTemplateContentClick(\r\n                                  $event,\r\n                                  expandedRow,\r\n                                  resolveCellValue(expandedRow, column),\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          } @else {\r\n                            {{ resolveCellText(expandedRow, column) }}\r\n                          }\r\n                        </div>\r\n\r\n                        @if (!isInteractiveColumn(column)) {\r\n                          @if (\r\n                            visibleColumnCellActions(expandedRow, column, expandedContext.row);\r\n                            as columnActions\r\n                          ) {\r\n                            @if (columnActions.length > 0) {\r\n                              <div\r\n                                class=\"table-cell-actions\"\r\n                                [class.table-cell-actions--icon]=\"\r\n                                  columnCellActionsUseIconButtons(column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @if (columnCellActionsUseDropdown(column)) {\r\n                                  <nvb-select\r\n                                    class=\"table-cell-actions__select\"\r\n                                    (change)=\"\r\n                                      onColumnCellActionSelect(\r\n                                        expandedRow,\r\n                                        column,\r\n                                        $event,\r\n                                        expandedContext.row\r\n                                      )\r\n                                    \"\r\n                                  >\r\n                                    <option value=\"\">\r\n                                      {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                    </option>\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <option [value]=\"'id:' + (action.id || $index)\">\r\n                                        {{ resolveActionLabel(action) }}\r\n                                      </option>\r\n                                    }\r\n                                  </nvb-select>\r\n                                } @else {\r\n                                  @for (action of columnActions; track action.id || $index) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"table-cell-actions__button\"\r\n                                      [class.table-cell-actions__button--icon-only]=\"\r\n                                        columnCellActionsUseIconButtons(column) ||\r\n                                        actionHidesText(action)\r\n                                      \"\r\n                                      [attr.title]=\"resolveActionLabel(action)\"\r\n                                      [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                      (click)=\"\r\n                                        runColumnCellAction(\r\n                                          action,\r\n                                          expandedRow,\r\n                                          $event,\r\n                                          column,\r\n                                          expandedContext.row\r\n                                        )\r\n                                      \"\r\n                                    >\r\n                                      @if (resolveActionIcon(action); as actionIcon) {\r\n                                        <nvb-icon\r\n                                          class=\"table-action-icon\"\r\n                                          [name]=\"actionIcon\"\r\n                                        ></nvb-icon>\r\n                                      }\r\n                                      @if (\r\n                                        actionRendersText(\r\n                                          action,\r\n                                          columnCellActionsUseButtons(column)\r\n                                        )\r\n                                      ) {\r\n                                        <span>{{ resolveActionLabel(action) }}</span>\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                }\r\n                              </div>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      @if (\r\n                        visibleExpandedRowActions(expandedContext.row, expandedRow);\r\n                        as expandedActions\r\n                      ) {\r\n                        @if (expandedActions.length > 0) {\r\n                          @if (rowActionsUseDropdown()) {\r\n                            <nvb-select\r\n                              class=\"table-cell-actions__select\"\r\n                              (change)=\"\r\n                                onExpandedRowActionSelect(expandedContext.row, expandedRow, $event)\r\n                              \"\r\n                            >\r\n                              <option value=\"\">\r\n                                {{ resolveExpandedRowActionsPlaceholder() }}\r\n                              </option>\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <option [value]=\"'id:' + (action.id || $index)\">\r\n                                  {{ resolveActionLabel(action) }}\r\n                                </option>\r\n                              }\r\n                            </nvb-select>\r\n                          } @else {\r\n                            <div\r\n                              class=\"expanded-row__actions\"\r\n                              [class.table-cell-actions--icon]=\"rowActionsUseIconButtons()\"\r\n                            >\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"expanded-row__action\"\r\n                                  [class.expanded-row__action--icon-only]=\"\r\n                                    rowActionsUseIconButtons() || actionHidesText(action)\r\n                                  \"\r\n                                  [attr.title]=\"resolveActionLabel(action)\"\r\n                                  [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                  (click)=\"\r\n                                    runExpandedRowAction(\r\n                                      action,\r\n                                      expandedContext.row,\r\n                                      expandedRow,\r\n                                      $event\r\n                                    )\r\n                                  \"\r\n                                >\r\n                                  @if (resolveActionIcon(action); as actionIcon) {\r\n                                    <nvb-icon\r\n                                      class=\"table-action-icon\"\r\n                                      [name]=\"actionIcon\"\r\n                                    ></nvb-icon>\r\n                                  }\r\n                                  @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  }\r\n                                </button>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n              @if (isEditor() && expandedContext.rowIndex < 0 && expandedRows.length === 0) {\r\n                <tr class=\"nested-table__placeholder-row\" aria-hidden=\"true\">\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td [class]=\"columnAlignClass(column)\">&nbsp;</td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">&nbsp;</td>\r\n                  }\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        } @else if (detailColumns().length > 0) {\r\n          <div class=\"expanded-row__details\">\r\n            @for (column of detailColumns(); track column.id || column.key) {\r\n              <div class=\"expanded-row__detail-item\">\r\n                <div class=\"expanded-row__detail-label\">{{ resolveDetailLabel(column) }}</div>\r\n                <div class=\"expanded-row__detail-value\">\r\n                  @if (resolveStatusBadge(expandedContext.row, column); as detailStatusBadge) {\r\n                    <span\r\n                      class=\"status-pill\"\r\n                      [class]=\"'status-pill status-pill--' + detailStatusBadge.tone\"\r\n                      [class.status-pill--rounded]=\"detailStatusBadge.rounded\"\r\n                    >\r\n                      @if (detailStatusBadge.icon) {\r\n                        <nvb-icon\r\n                          class=\"status-pill__icon\"\r\n                          [name]=\"detailStatusBadge.icon\"\r\n                        ></nvb-icon>\r\n                      }\r\n                      {{ detailStatusBadge.label }}\r\n                    </span>\r\n                  } @else if (resolveCellHtml(expandedContext.row, column); as detailCellHtml) {\r\n                    <div\r\n                      class=\"table-template-host\"\r\n                      [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                      [innerHTML]=\"detailCellHtml\"\r\n                      (click)=\"\r\n                        onTemplateContentClick(\r\n                          $event,\r\n                          expandedContext.row,\r\n                          resolveCellValue(expandedContext.row, column),\r\n                          expandedContext.row\r\n                        )\r\n                      \"\r\n                    ></div>\r\n                  } @else {\r\n                    {{ resolveCellText(expandedContext.row, column) }}\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"expanded-row__empty\">\r\n            {{ resolveExpandedEmptyMessage() | uiT: 'No nested rows' }}\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      @if (expandedUsesSidePanel() && activeExpandedPanelContext(); as expandedContext) {\r\n        <aside class=\"table-detail-panel\" [attr.data-row-key]=\"expandedContext.key\">\r\n          <div class=\"table-detail-panel__header\">\r\n            <strong class=\"table-detail-panel__title\">{{\r\n              resolveDetailsPanelTitle() | uiT: 'Detailed info'\r\n            }}</strong>\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-detail-panel__close\"\r\n              (click)=\"closeExpandedRowPanel($event)\"\r\n              [attr.aria-label]=\"'table.closeDetails' | uiT: 'Close details'\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          </div>\r\n\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n            [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n          />\r\n        </aside>\r\n      }\r\n    </div>\r\n\r\n    @if (model().paginator) {\r\n      <div\r\n        class=\"table-paginator\"\r\n        role=\"navigation\"\r\n        [attr.aria-label]=\"'table.pagination.label' | uiT: 'Table pagination'\"\r\n        [class.table-paginator--flat]=\"flatFooterSurface()\"\r\n        [class.table-paginator--compact]=\"paginatorStyle() === 'compact'\"\r\n        [class.table-paginator--segmented]=\"paginatorStyle() === 'segmented'\"\r\n        [class.table-paginator--align-start]=\"paginatorAlign() === 'start'\"\r\n        [class.table-paginator--align-center]=\"paginatorAlign() === 'center'\"\r\n      >\r\n        <div class=\"table-paginator__content\">\r\n          <div class=\"table-paginator__controls\">\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"firstPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.pagination.first' | uiT: 'First page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">first_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_left</span>\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.prev' | uiT: 'Prev'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                } @else {\r\n                  {{ model().prevLabel || ('table.prev' | uiT: 'Prev') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showNumericPaginator()) {\r\n              <div class=\"table-paginator__pages\">\r\n                @for (page of visiblePageNumbers(); track page) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-paginator__page\"\r\n                    [class.table-paginator__page--active]=\"page === pageIndex()\"\r\n                    (click)=\"goToPage(page)\"\r\n                    [disabled]=\"page === pageIndex()\"\r\n                    [attr.aria-label]=\"'Page ' + (page + 1)\"\r\n                    [attr.aria-current]=\"page === pageIndex() ? 'page' : null\"\r\n                  >\r\n                    {{ page + 1 }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.next' | uiT: 'Next'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                } @else {\r\n                  {{ model().nextLabel || ('table.next' | uiT: 'Next') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"lastPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.pagination.last' | uiT: 'Last page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">last_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_right</span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n\r\n          @if (showPageMeta()) {\r\n            <span class=\"table-paginator__meta\">{{ pageMeta() }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (showPageSizeSelector()) {\r\n          <div class=\"table-paginator__size\">\r\n            <nvb-select\r\n              class=\"table-paginator__size-select\"\r\n              [ngModel]=\"pageSize()\"\r\n              (ngModelChange)=\"setPageSize($event)\"\r\n              [attr.aria-label]=\"'table.pagination.pageSize' | uiT: 'Rows per page'\"\r\n            >\r\n              @for (size of pageSizeOptions(); track size) {\r\n                <option [ngValue]=\"size\">{{ size }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (openExportDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeExportSelectionDialog()\"></div>\r\n      <section\r\n        class=\"table-dialog\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-export-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-export-dialog-title\">\r\n            {{ 'table.export.dialog.title' | uiT: 'Export columns' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeExportSelectionDialog()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <label class=\"table-export__scope\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"exportScope() === 'all'\"\r\n              (change)=\"onExportScopeToggle($event)\"\r\n            />\r\n            <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n          </label>\r\n\r\n          <label class=\"table-dialog__select-all\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"allExportColumnsSelected()\"\r\n              (change)=\"toggleAllExportColumns($event)\"\r\n            />\r\n            <span>{{ 'table.export.columns.all' | uiT: 'Select all columns' }}</span>\r\n          </label>\r\n\r\n          <div class=\"table-export__columns\">\r\n            @for (column of exportColumns(); track column.id || column.key) {\r\n              <label class=\"table-export__column\">\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"nvb-control__checkbox-input\"\r\n                  [checked]=\"isExportColumnSelected(column)\"\r\n                  (change)=\"onExportColumnSelectionChange(column, $event)\"\r\n                />\r\n                <span>{{ resolveColumnLabel(column) }}</span>\r\n              </label>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('csv', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">description</span>\r\n            <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('excel', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">table_view</span>\r\n            <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('pdf', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n            <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openColumnSettingsDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeColumnSettings()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--column-settings\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-column-settings-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-column-settings-dialog-title\">\r\n            {{ columnSettingsDialogTitle() | uiT: 'Columns settings' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeColumnSettings()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <div class=\"table-column-settings\">\r\n            <div class=\"table-column-settings__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"showAllColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"visibility\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.showAll' | uiT: 'Show all' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"resetColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"restart_alt\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.reset' | uiT: 'Reset' }}</span>\r\n              </button>\r\n            </div>\r\n\r\n            <div\r\n              class=\"table-column-settings__list\"\r\n              cdkDropList\r\n              [cdkDropListData]=\"columnSettingsDraft()\"\r\n              (cdkDropListDropped)=\"reorderColumnSettingsRows($event)\"\r\n            >\r\n              @for (column of columnSettingsDraft(); track column.key) {\r\n                <article class=\"table-column-settings__item\" cdkDrag>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-column-settings__drag\"\r\n                    cdkDragHandle\r\n                    [attr.aria-label]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                    [attr.title]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                  >\r\n                    <nvb-icon class=\"table-action-icon\" name=\"drag_indicator\"></nvb-icon>\r\n                  </button>\r\n                  <div class=\"table-column-settings__content\">\r\n                    <label class=\"table-column-settings__toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"column.visible\"\r\n                        (change)=\"\r\n                          setColumnSettingsVisibility(column.key, $any($event.target).checked)\r\n                        \"\r\n                      />\r\n                      <span>{{ column.label || column.key }}</span>\r\n                    </label>\r\n\r\n                    <label class=\"table-column-settings__width\">\r\n                      <div class=\"table-column-settings__width-header\">\r\n                        <span>{{ 'table.columns.settings.width' | uiT: 'Plotis' }}</span>\r\n                        <div class=\"table-column-settings__width-meta\">\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"table-column-settings__width-reset\"\r\n                            [class.table-column-settings__width-reset--active]=\"\r\n                              !hasColumnSettingsCustomWidth(column)\r\n                            \"\r\n                            (click)=\"resetColumnSettingsWidth(column.key)\"\r\n                          >\r\n                            {{ 'table.columns.settings.auto' | uiT: 'Automatinis' }}\r\n                          </button>\r\n                          <span class=\"table-column-settings__width-value\">\r\n                            {{ resolveColumnSettingsWidthDisplay(column) }}\r\n                          </span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"table-column-settings__width-range\">\r\n                        <input\r\n                          type=\"range\"\r\n                          [min]=\"columnSettingsWidthMin\"\r\n                          [max]=\"columnSettingsWidthMax\"\r\n                          [step]=\"columnSettingsWidthStep\"\r\n                          [value]=\"resolveColumnSettingsWidthSliderValue(column)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (input)=\"setColumnSettingsWidth(column.key, $any($event.target).value)\"\r\n                        />\r\n                      </div>\r\n                    </label>\r\n                  </div>\r\n\r\n                  <div class=\"table-column-settings__order\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowFirst(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, -1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveUp' | uiT: 'Move up'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_upward\"></nvb-icon>\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowLast(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, 1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveDown' | uiT: 'Move down'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_downward\"></nvb-icon>\r\n                    </button>\r\n                  </div>\r\n                </article>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button type=\"button\" class=\"table-toolbar__button\" (click)=\"closeColumnSettings()\">\r\n            {{ 'table.columns.settings.cancel' | uiT: 'Cancel' }}\r\n          </button>\r\n          @if (showColumnSettingsSaveAction()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button\"\r\n              (click)=\"saveColumnSettings($event)\"\r\n            >\r\n              <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n              <span>{{ 'table.columns.settings.save' | uiT: 'Save settings' }}</span>\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-toolbar__button table-toolbar__button--primary\"\r\n            (click)=\"applyColumnSettings($event)\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n            <span>{{ 'table.columns.settings.apply' | uiT: 'Apply settings' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openSavedFiltersDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeSavedFilters()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--filters\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-saved-filters-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-saved-filters-dialog-title\">\r\n            {{ 'table.filters.dialog.title' | uiT: 'Saved filters' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeSavedFilters()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__tabs\" role=\"tablist\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'create'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'create'\"\r\n            (click)=\"setSavedFilterDialogTab('create')\"\r\n          >\r\n            {{ 'table.filters.dialog.new' | uiT: 'Create new' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'list'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'list'\"\r\n            (click)=\"setSavedFilterDialogTab('list')\"\r\n          >\r\n            {{ 'table.filters.dialog.list' | uiT: 'Filter list' }}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          @if (savedFilterDialogTab() === 'create') {\r\n            <div class=\"table-filter-form\">\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.name' | uiT: 'Name' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterName()\"\r\n                  (ngModelChange)=\"savedFilterName.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.description' | uiT: 'Description' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterDescription()\"\r\n                  (ngModelChange)=\"savedFilterDescription.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.code' | uiT: 'Code' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterCode()\"\r\n                  (ngModelChange)=\"savedFilterCode.set($event)\"\r\n                />\r\n              </label>\r\n            </div>\r\n          } @else {\r\n            <div class=\"table-filter-list\">\r\n              @if (savedFiltersLoading()) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.loading' | uiT: 'Loading...' }}\r\n                </div>\r\n              } @else if (savedFilters().length === 0) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.empty' | uiT: 'No saved filters' }}\r\n                </div>\r\n              } @else {\r\n                @for (savedFilter of savedFilters(); track savedFilter.id) {\r\n                  <article class=\"table-filter-list__item\">\r\n                    <div class=\"table-filter-list__meta\">\r\n                      <strong>{{ savedFilter.name }}</strong>\r\n                      @if (savedFilter.description) {\r\n                        <span>{{ savedFilter.description }}</span>\r\n                      }\r\n                      @if (savedFilter.code) {\r\n                        <small>{{ savedFilter.code }}</small>\r\n                      }\r\n                    </div>\r\n                    <div class=\"table-filter-list__actions\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"applySavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.apply' | uiT: 'Apply' }}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"deleteSavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.delete' | uiT: 'Delete' }}\r\n                      </button>\r\n                    </div>\r\n                  </article>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (savedFilterDialogTab() === 'create') {\r\n          <footer class=\"table-dialog__footer table-dialog__footer--single\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button table-toolbar__button--primary\"\r\n              [disabled]=\"savedFilterBusy() || !savedFilterName().trim()\"\r\n              (click)=\"saveCurrentFilter($event)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">save</span>\r\n              <span>{{ 'table.filters.save' | uiT: 'Save filter' }}</span>\r\n            </button>\r\n          </footer>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.table-shell{--table-control-height: 32px;--table-control-radius: var(--nvb-control-radius, 4px);--table-control-font-size: 13px;--table-control-padding-x: 10px;--table-surface-border: color-mix( in oklab, var(--color-neutral-300) 78%, var(--color-surface-mix-target, white) );--table-surface-border-strong: color-mix( in oklab, var(--color-neutral-300) 92%, var(--color-surface-mix-target, white) );--table-surface-radius: var(--nvb-table-radius, var(--nvb-card-radius, var(--radius-md, 4px)));--table-sticky-header-offset: 0px;position:relative;background:transparent;container-type:inline-size;display:flex;flex-direction:column;gap:0;font-family:var(--nvb-font-family)}.table-shell--editor .table-toolbar{z-index:1}.table-shell--editor .table-quick-search,.table-shell--editor .table-toolbar__button--detailed-toggle,.table-shell--editor .table-export,.table-shell--editor .table-header-menu,.table-shell--editor .table-header-actions,.table-shell--editor .table-detailed-search{pointer-events:none}.table-shell--editor .table-toolbar__add-element,.table-shell--editor .table-toolbar__drop-item--editor{pointer-events:auto}.table-sticky-header{display:flex;flex-direction:column;gap:0}.table-sticky-header--enabled{position:sticky;top:0;z-index:38}.table-sticky-header--enabled.table-sticky-header--pinned{background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8)}.table-sticky-header--enabled.table-sticky-header--pinned .table-toolbar--flat{background:var(--color-neutral-000)}.table-sticky-clone{position:absolute;inset-inline:0;top:100%;z-index:37;pointer-events:none}.table-sticky-clone__viewport{overflow:hidden;background:var(--color-neutral-000);border:1px solid var(--table-surface-border);border-top:none;box-shadow:var(--nvb-shadow-8)}.table-sticky-clone__table{margin:0;width:max-content;min-width:100%;transform:translate(0)}.table-sticky-clone__table thead th{position:static;top:auto;z-index:auto}.table-sticky-clone__row th{cursor:default}.table-sticky-clone__row th.sortable{cursor:pointer}.table-frame{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);overflow:hidden;background:var(--color-neutral-000);display:flex;align-items:stretch;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent),inset 0 1px color-mix(in oklab,var(--color-neutral-000) 84%,transparent)}.table-frame__scroller{flex:1 1 auto;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden}.table-frame__scroller--virtual{overflow-y:auto;overscroll-behavior:contain}.table-frame--with-toolbar{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.table-frame--with-paginator{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.table-toolbar{display:flex;position:relative;z-index:32;justify-content:space-between;align-items:center;gap:8px;padding:8px;border:1px solid var(--table-surface-border);border-bottom:none;border-top-left-radius:var(--table-surface-radius);border-top-right-radius:var(--table-surface-radius);background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));flex-wrap:wrap}.table-toolbar--flat{padding:0 0 8px;border:none;border-radius:0;background:transparent}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__center{flex:1 1 260px;min-width:180px}.table-toolbar__center--controls-only{justify-content:flex-end}.table-toolbar__right{justify-content:flex-end;flex:0 0 auto;margin-left:auto}.table-toolbar__actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__button,.table-export__action,.table-cell-actions__button,.row-actions__inline-button,.row-actions__toggle,.selection-actions__toggle,.table-detailed-search__remove,.table-quick-search__apply,.table-quick-search__clear,.table-detailed-search__multi-select-trigger,.table-detailed-search__date-trigger,.table-detailed-search__date-header>button,.table-detailed-search__date-actions>button{font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500);line-height:1.3;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease;outline:0}.table-toolbar__button:focus-visible,.table-export__action:focus-visible,.table-cell-actions__button:focus-visible,.row-actions__inline-button:focus-visible,.row-actions__toggle:focus-visible,.selection-actions__toggle:focus-visible,.table-detailed-search__remove:focus-visible,.table-quick-search__apply:focus-visible,.table-quick-search__clear:focus-visible,.table-detailed-search__multi-select-trigger:focus-visible,.table-detailed-search__date-trigger:focus-visible,.table-detailed-search__date-header>button:focus-visible,.table-detailed-search__date-actions>button:focus-visible{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-toolbar,.table-detailed-search,.table-paginator{--nvb-input-height: var(--table-control-height);--nvb-input-radius: var(--table-control-radius);--nvb-select-trigger-border-color: var(--table-surface-border-strong);--nvb-select-trigger-padding-inline-start: var(--table-control-padding-x);--nvb-select-trigger-padding-inline-end: 26px;--nvb-select-arrow-inset-inline-end: 9px;--nvb-select-menu-border: var(--table-surface-border-strong);--nvb-select-menu-radius: var(--table-control-radius);--nvb-select-option-min-height: 28px;--nvb-select-option-padding-block: 5px;font-size:var(--table-control-font-size)}.table-toolbar__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-toolbar__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-toolbar__button--header-action{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-300);background:var(--color-neutral-000);color:var(--color-neutral-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary{border-color:var(--color-primary-300);background:var(--color-neutral-000);color:var(--color-primary-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050);border-color:var(--color-primary-400)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk{border-color:var(--color-risk-300);background:var(--color-neutral-000);color:var(--color-risk-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050);border-color:var(--color-risk-400)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral:hover{border-color:var(--color-neutral-800);background:var(--color-neutral-800)}.table-toolbar__button--filled.table-toolbar__button--tone-primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-primary:hover{border-color:var(--color-primary-600);background:var(--color-primary-600)}.table-toolbar__button--filled.table-toolbar__button--tone-risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-risk:hover{border-color:var(--color-risk-600);background:var(--color-risk-600)}.table-toolbar__button--text{border-color:transparent;background:transparent;box-shadow:none}.table-toolbar__button--text.table-toolbar__button--tone-neutral{color:var(--color-neutral-700)}.table-toolbar__button--text.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--text.table-toolbar__button--tone-primary{color:var(--color-primary-700)}.table-toolbar__button--text.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050)}.table-toolbar__button--text.table-toolbar__button--tone-risk{color:var(--color-risk-700)}.table-toolbar__button--text.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050)}.table-toolbar__button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.table-toolbar__button span.material-symbols-outlined{font-size:16px;line-height:1}.table-action-icon{font-size:16px}.table-toolbar__button--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--primary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)}.table-toolbar__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-toolbar__badge{min-width:16px;height:16px;border-radius:999px;background:var(--color-primary-500);color:var(--color-neutral-000);display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 4px}.table-toolbar__custom{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.table-toolbar__dropzone{position:relative;z-index:24;width:auto;max-width:100%;flex:0 1 auto;min-width:0;min-height:var(--table-control-height);display:flex;align-items:center;gap:6px;overflow:visible}.table-toolbar__dropzone--center{width:100%;flex:1 1 auto}.table-toolbar__center--controls-only .table-toolbar__dropzone--center{width:auto;flex:0 0 auto}.table-toolbar__add-element{position:relative;display:inline-flex;align-items:center;max-width:none}.table-toolbar__button--add-element{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;justify-content:center}.table-toolbar__button--add-element span{font-size:16px}.table-toolbar__add-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;max-height:280px;overflow:auto;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:4px;z-index:42}.table-toolbar__add-menu-item{width:100%;border:none;background:transparent;border-radius:6px;padding:8px 10px;text-align:left;color:var(--color-neutral-700);font-size:13px;cursor:pointer}.table-toolbar__add-menu-item:hover{background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-surface-mix-target, white))}.table-toolbar__drop-items{width:auto;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow:visible}.table-toolbar__center--controls-only .table-toolbar__drop-items{flex:0 0 auto}.table-toolbar__drop-item{position:relative;min-width:0;max-width:none;flex:0 0 auto;border:none;border-radius:0;background:transparent;padding:0}.table-toolbar__drop-item runtime-lazy-element-outlet{display:block;width:auto;min-width:0}.table-toolbar__drop-item--editor{cursor:pointer;padding:5px 27px 5px 5px}.table-toolbar__drop-item--editor .table-toolbar__drop-remove{right:5px}.table-toolbar__drop-item--focused{border-radius:var(--table-control-radius);background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-primary-500) 46%,transparent)}.table-toolbar__drop-item--editor runtime-lazy-element-outlet{pointer-events:none}.table-toolbar__drop-remove{position:absolute;top:50%;right:0;transform:translateY(-50%);width:18px;min-width:18px;height:18px;border:1px solid var(--color-neutral-200);border-radius:5px;background:var(--color-neutral-000);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-toolbar__drop-remove span{font-size:14px}.table-toolbar__drop-remove:hover{border-color:var(--color-risk-300);color:var(--color-risk-600);background:var(--color-risk-050)}.table-toolbar__drop-placeholder{width:100%;font-size:12px;color:var(--color-neutral-500);padding:2px 4px 4px}.table-toolbar__drop-item ::ng-deep .field{gap:0}.table-toolbar__drop-item ::ng-deep .field__text-warpper{display:none}.table-toolbar__drop-item ::ng-deep .field__description{display:none}.table-header-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.table-header-menu{min-width:220px;display:inline-flex;align-items:center}.table-header-menu--actions{min-width:min(300px,100%)}.table-header-menu__select{width:100%}.table-quick-search{min-width:216px;border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));background:var(--nvb-input-bg, var(--color-neutral-000));border-radius:var(--table-control-radius);min-height:var(--table-control-height);display:inline-flex;align-items:center;padding:0 5px;gap:2px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-quick-search:focus-within{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-quick-search input{border:none;outline:none;background:transparent;width:100%;min-height:calc(var(--table-control-height) - 2px);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);color:var(--nvb-input-text-color, var(--color-neutral-700));padding:0 5px}.table-quick-search input:focus{outline:none;box-shadow:none}.table-quick-search input::placeholder{color:var(--nvb-input-placeholder-color, var(--color-neutral-500))}.table-quick-search__clear,.table-quick-search__apply{width:24px;min-width:24px;height:24px;border:1px solid transparent;border-radius:var(--table-control-radius);background:transparent;color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-quick-search__apply span{font-size:16px}.table-quick-search__apply:hover{background:var(--color-neutral-100)}.table-quick-search__clear span{font-size:16px}.table-quick-search__clear:hover{background:var(--color-neutral-100)}.table-export{position:relative;display:inline-flex;align-items:center;justify-content:flex-end}.table-export__chevron{font-size:16px}.table-export__menu{position:fixed;z-index:var(--nvb-floating-overlay-z-index, 2147483000);top:0;left:0;min-width:268px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:8px;display:flex;flex-direction:column;gap:8px}.table-export__menu--top{transform:translateY(calc(-100% - 6px))}.table-export__scope{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-neutral-700)}.table-export__scope input{width:16px;height:16px}.table-export__actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.table-export__action{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:auto;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.table-export__action span.material-symbols-outlined{font-size:16px}.table-export__action:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-export__action:disabled{opacity:.55;cursor:not-allowed}.table-detailed-search{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent)}.table-detailed-search__rows{display:flex;flex-direction:column;gap:8px}.table-detailed-search__row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr) auto;gap:8px;align-items:stretch}.table-detailed-search__row select,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]){border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);padding:0 var(--table-control-padding-x);width:100%;min-width:0;line-height:1.3;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-detailed-search__row select:focus,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring);outline:0}.table-detailed-search__row>*{min-width:0}.table-detailed-search__boolean-toggle{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);display:inline-flex;align-items:center;gap:8px;padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);-webkit-user-select:none;user-select:none}.table-detailed-search__boolean-toggle .nvb-control__checkbox-input{margin:0}.table-detailed-search__remove{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--color-risk-600);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;align-self:stretch}.table-detailed-search__remove span{font-size:16px}.table-detailed-search__remove:hover{background:var(--color-risk-050);border-color:var(--color-risk-300)}.table-detailed-search__actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.table-detailed-search__multi-select{position:relative;min-width:0}.table-detailed-search__multi-select-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__multi-select-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__multi-select-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__multi-select-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__multi-select-placeholder{color:var(--color-neutral-500)}.table-detailed-search__multi-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);max-height:240px;overflow:auto;z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:6px;display:flex;flex-direction:column;gap:2px}.table-detailed-search__multi-select-option{border-radius:var(--nvb-control-radius);min-height:32px;padding:6px 8px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-size:13px}.table-detailed-search__multi-select-option:hover{background:var(--color-neutral-100)}.table-detailed-search__multi-select-empty{color:var(--color-neutral-500);font-size:12px;padding:8px}.table-detailed-search__date{position:relative;min-width:0}.table-detailed-search__date-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__date-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__date-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__date-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__date-placeholder{color:var(--color-neutral-500)}.table-detailed-search__date-menu{position:absolute;top:calc(100% + 4px);left:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);width:280px;max-width:min(92vw,320px);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:8px;display:flex;flex-direction:column;gap:8px}.table-detailed-search__date-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detailed-search__date-header>span{font-size:13px;font-weight:600;color:var(--color-neutral-700);text-transform:capitalize}.table-detailed-search__date-header>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));border-radius:var(--nvb-control-radius);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detailed-search__date-header>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-detailed-search__date-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-weekdays>span{text-align:center;font-size:11px;color:var(--color-neutral-500);text-transform:uppercase}.table-detailed-search__date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-day{border:1px solid transparent;border-radius:6px;background:transparent;color:var(--color-neutral-700);min-height:30px;font-size:12px;cursor:pointer}.table-detailed-search__date-day:hover{background:var(--color-neutral-100)}.table-detailed-search__date-day--outside{color:var(--color-neutral-400)}.table-detailed-search__date-day--today{border-color:var(--color-primary-300)}.table-detailed-search__date-day--selected{background:var(--color-primary-500);color:var(--color-neutral-000)}.table-detailed-search__date-actions{display:flex;justify-content:flex-end}.table-detailed-search__date-actions>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));border-radius:6px;background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));min-height:30px;padding:0 10px;cursor:pointer}.table-detailed-search__date-actions>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.nvb-table{width:100%;border-collapse:collapse;table-layout:auto;background:var(--color-neutral-000)}.nvb-table th,.nvb-table td{border-bottom:1px solid var(--table-surface-border);padding:7px 10px;font-size:13px;line-height:18px;vertical-align:middle}.table-cell-content{display:flex;flex-direction:column;gap:6px;min-width:0}.table-cell-content__value{min-width:0;word-break:break-word}.table-interactive-control{display:inline-flex;align-items:center;justify-content:flex-start;min-height:24px;cursor:pointer}.table-interactive-control--toggle.nvb-toggle-switch,.table-interactive-control--checkbox.nvb-single-checkbox{gap:0;min-height:24px}.table-interactive-control--toggle.nvb-toggle-switch--disabled,.table-interactive-control--checkbox.nvb-single-checkbox--disabled{opacity:.6;cursor:not-allowed}.table-interactive-control--checkbox .nvb-single-checkbox__input{margin:0}.table-interactive-control--toggle .nvb-toggle-switch__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.table-interactive-control--toggle .nvb-toggle-switch__track{position:relative;width:36px;height:20px;border-radius:999px;border:1px solid var(--color-neutral-300);background:var(--color-neutral-100);transition:border-color .16s ease,background-color .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:999px;background:var(--color-neutral-000);box-shadow:0 1px 3px #0003;transition:transform .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track{border-color:var(--color-primary-500);background:var(--color-primary-500)}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track .nvb-toggle-switch__thumb{transform:translate(16px)}.table-template-host{display:block;min-width:0}.table-row-template-cell{min-width:0}.table-row-template-host{display:block;width:100%;min-width:0}.table-cell-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-cell-actions__select{min-width:170px}.table-cell-actions__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer}.table-cell-actions__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-cell-actions__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-cell-actions__button span.material-symbols-outlined{font-size:16px}.nvb-table th{background:color-mix(in oklab,var(--color-neutral-050) 34%,var(--color-neutral-000));color:var(--color-neutral-800);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}.nvb-table--sticky-header.nvb-table--virtual-scroll thead th{position:sticky;top:var(--table-sticky-header-offset, 0px);z-index:26;background-clip:padding-box}.table-frame--with-toolbar .nvb-table thead th{border-top:1px solid var(--table-surface-border)}.nvb-table th.sorted-active{color:var(--color-primary-700);background:color-mix(in oklab,var(--color-primary-500) 7%,var(--color-surface-mix-target, white))}.nvb-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nvb-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.nvb-table th.sortable:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-surface-mix-target, white))}.sort-icon{font-size:16px;margin-left:4px;vertical-align:middle;color:var(--color-neutral-500)}.sort-icon--active{color:var(--color-primary-600)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.empty-cell{text-align:center;color:var(--color-neutral-500);padding:14px 10px}.action-column,.action-cell{min-width:56px;width:auto;text-align:right}.action-header{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;position:relative}.action-header__label{display:inline-flex;align-items:center;gap:4px}.expand-column,.expand-cell{width:32px;min-width:32px;text-align:center}.expand-toggle{border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,var(--color-primary-050) 4%);border-radius:var(--nvb-button-radius, var(--nvb-control-radius, 4px));width:28px;min-width:28px;height:28px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;color:var(--color-neutral-600);box-shadow:0 1px 2px #0000000a}.expand-toggle:hover{border-color:color-mix(in oklab,var(--color-primary-300) 70%,transparent);background:color-mix(in oklab,var(--color-primary-050) 92%,white);color:var(--color-primary-700)}.expand-toggle span{font-size:16px;transition:transform .16s ease}.expand-toggle--expanded span{transform:rotate(90deg)}.expand-toggle--expanded{border-color:color-mix(in oklab,var(--color-primary-300) 78%,transparent);background:color-mix(in oklab,var(--color-primary-050) 88%,white);color:var(--color-primary-700)}.select-column,.select-cell{width:42px;text-align:center}.select-column input,.select-cell input{width:16px;min-width:16px;height:16px;min-height:16px;cursor:pointer}.row-actions{position:relative;display:inline-flex;justify-content:flex-end}.row-actions--inline{gap:6px;flex-wrap:wrap}.row-actions__inline-button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;justify-content:center;align-items:center;gap:6px;cursor:pointer}.row-actions__inline-button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__inline-button:disabled,.row-actions__toggle:disabled{opacity:.65;cursor:wait}.row-actions__inline-button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0}.row-actions__inline-button span.material-symbols-outlined{font-size:16px}.row-actions__toggle{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.row-actions__toggle--borderless{border-color:transparent;background:transparent;color:var(--color-neutral-600);box-shadow:none}.row-actions__toggle span{font-size:16px}.row-actions__toggle:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__toggle--borderless:hover{border-color:transparent;background:var(--color-neutral-100);color:var(--color-neutral-800)}.row-actions__menu{position:fixed;top:0;left:0;min-width:160px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.row-actions__menu--top{transform:translateY(calc(-100% - 6px))}.row-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.row-actions__menu button:hover{background:var(--color-neutral-100)}.row-actions__menu button span.material-symbols-outlined{font-size:16px}.row-actions__empty{font-size:11px;color:var(--color-neutral-400)}.nvb-table__row--editing>td{background:color-mix(in srgb,var(--color-primary-050) 72%,white)}.table-inline-edit{width:100%;min-height:34px;border:1px solid var(--color-primary-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-900);font:inherit;padding:6px 10px}.table-inline-edit--textarea{resize:vertical;min-height:72px}.table-inline-edit:focus{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring)}.table-virtual-spacer-row td{padding:0;border:0;background:transparent}.table-virtual-spacer-cell{height:0}.selection-actions{position:relative;display:inline-flex;align-items:center}.selection-actions__toggle{min-width:var(--table-control-height);min-height:var(--table-control-height);border:1px solid var(--color-primary-300);border-radius:var(--table-control-radius);background:var(--color-primary-050);color:var(--color-primary-700);display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 var(--table-control-padding-x);cursor:pointer}.selection-actions__toggle span.material-symbols-outlined{font-size:16px}.selection-actions__count{min-width:16px;height:16px;border-radius:999px;font-size:10px;font-weight:600;color:var(--color-neutral-000);background:var(--color-primary-600);display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.selection-actions__menu{position:fixed;top:0;left:0;min-width:190px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.selection-actions__menu--top{transform:translateY(calc(-100% - 6px))}.selection-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.selection-actions__menu button:hover{background:var(--color-neutral-100)}.selection-actions__menu button span.material-symbols-outlined{font-size:16px}.status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:20px;gap:4px;border-radius:var(--table-control-radius);padding:2px 8px;font-size:11px;line-height:1.2;border:1px solid transparent}.status-pill--rounded{border-radius:999px}.status-pill__icon{font-size:14px}.status-pill--neutral{background:var(--color-neutral-100);color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.status-pill--success{background:color-mix(in oklab,var(--color-success-500) 14%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-success-500) 80%,black);border-color:color-mix(in oklab,var(--color-success-500) 28%,var(--color-surface-mix-target, white))}.status-pill--danger,.status-pill--risk{background:var(--color-risk-050);color:var(--color-risk-700);border-color:var(--color-risk-300)}.status-pill--warning{background:color-mix(in oklab,var(--color-warning-500) 18%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-warning-500) 80%,black);border-color:color-mix(in oklab,var(--color-warning-500) 36%,var(--color-surface-mix-target, white))}.status-pill--info,.status-pill--primary{background:color-mix(in oklab,var(--color-primary-500) 14%,var(--color-surface-mix-target, white));color:var(--color-primary-700);border-color:color-mix(in oklab,var(--color-primary-500) 30%,var(--color-surface-mix-target, white))}.nvb-table__row--expanded td{background:color-mix(in oklab,var(--color-primary-500) 6%,var(--color-surface-mix-target, white))}.table-expanded-inline-row__cell{padding:0!important;background:transparent}.table-expanded-inline-row__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 4%,var(--color-surface-mix-target, white));border-top:1px solid var(--color-neutral-200)}.table-detail-panel{flex:0 0 clamp(260px,34%,420px);min-width:260px;max-width:420px;border-left:1px solid var(--color-neutral-200);background:color-mix(in oklab,var(--color-neutral-000) 94%,var(--color-surface-mix-target, white));padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}.table-detail-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detail-panel__title{font-size:13px;color:var(--color-neutral-700)}.table-detail-panel__close{width:24px;min-width:24px;height:24px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detail-panel__close span{font-size:16px}.table-detail-panel__close:hover{border-color:var(--color-neutral-400);background:color-mix(in oklab,var(--color-neutral-100) 88%,var(--color-surface-mix-target, white))}.expanded-row__template{color:var(--color-neutral-700);font-size:13px}.expanded-row__loading,.expanded-row__error,.expanded-row__empty{border:1px dashed var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-050);padding:10px 12px;font-size:12px}.expanded-row__loading,.expanded-row__empty{color:var(--color-neutral-500)}.expanded-row__error{color:var(--color-risk-700);border-color:var(--color-risk-300);background:var(--color-risk-050)}.expanded-row__details{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.expanded-row__detail-item{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:4px}.expanded-row__detail-label{font-size:11px;color:var(--color-neutral-500);font-weight:600}.expanded-row__detail-value{font-size:13px;color:var(--color-neutral-700);word-break:break-word}.nested-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--color-neutral-200);border-radius:6px;overflow:hidden}.nested-table th,.nested-table td{border-bottom:1px solid var(--color-neutral-200);padding:6px 8px;font-size:12px}.nested-table th{background:var(--color-neutral-050);color:var(--color-neutral-700)}.nested-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nested-table__header--focusable{cursor:pointer}.nested-table__placeholder-row td{color:transparent;min-height:32px}.nested-table tr:last-child td{border-bottom:none}.expanded-row__actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.expanded-row__action{border:1px solid var(--color-neutral-300);background:#fff;border-radius:6px;padding:4px 6px;display:inline-flex;align-items:center;gap:4px;color:var(--color-neutral-700);cursor:pointer;font-size:11px}.expanded-row__action--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);padding:0;justify-content:center}.expanded-row__action span.material-symbols-outlined{font-size:14px}.table-skeleton__row td{padding-top:10px;padding-bottom:10px}.table-skeleton__line{display:block;height:12px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-skeleton__dot{display:inline-block;width:16px;height:16px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-200) 88%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-neutral-300) 75%,transparent)}.table-skeleton__dot--action{width:22px;height:22px;border-radius:8px}.table-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:stretch;padding:12px;font-size:13px;background:color-mix(in oklab,var(--color-neutral-000) 90%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--color-neutral-700);z-index:5;animation:table-loading-fade .16s ease-out}.table-loading__skeleton{width:min(100%,980px);margin:0 auto;display:grid;gap:10px;padding:12px;border-radius:10px;border:1px solid color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,transparent);box-shadow:0 1px color-mix(in oklab,var(--color-neutral-100) 80%,transparent),0 12px 24px color-mix(in oklab,var(--color-neutral-900) 8%,transparent)}.table-loading__row{height:16px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-loading__row:first-child{height:22px;width:96%;border-radius:8px}.table-loading__row:nth-child(2){width:90%}.table-loading__row:nth-child(3){width:94%}.table-loading__row:nth-child(4){width:86%}.table-loading__row:nth-child(5){width:92%}.table-loading__label{align-self:center;font-size:11px;font-weight:500;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 86%,transparent);border:1px solid color-mix(in oklab,var(--color-neutral-300) 66%,transparent);color:var(--color-neutral-600)}.table-paginator{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 10px;background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));border:1px solid var(--table-surface-border);border-top:none;border-bottom-left-radius:var(--table-surface-radius);border-bottom-right-radius:var(--table-surface-radius);flex-wrap:wrap}.table-paginator__content,.table-paginator__controls{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.table-paginator--align-start{justify-content:flex-start}.table-paginator--align-center{justify-content:center}.table-paginator__size{display:inline-flex;align-items:center;min-width:0;margin-inline-start:auto}.table-paginator--align-start .table-paginator__size,.table-paginator--align-center .table-paginator__size{margin-inline-start:0}.table-paginator__nav,.table-paginator__page{border:1px solid var(--table-surface-border-strong);background:var(--color-neutral-000);color:var(--color-neutral-700);border-radius:var(--table-control-radius);min-width:var(--table-control-height);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);cursor:pointer;transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-paginator__nav{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.table-paginator__nav:not(:disabled):hover,.table-paginator__page:not(:disabled):hover{border-color:var(--color-primary-300);background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator__nav--icon{min-width:var(--table-control-height);width:var(--table-control-height);padding:0}.table-paginator__nav--icon span{font-size:16px;color:inherit}.table-paginator__pages{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}.table-paginator__size-select{width:84px;min-width:84px}.table-paginator__nav:disabled,.table-paginator__page:disabled{opacity:1;cursor:not-allowed;background:color-mix(in oklab,var(--color-neutral-100) 58%,var(--color-surface-mix-target, white));border-color:color-mix(in oklab,var(--color-neutral-300) 54%,var(--color-surface-mix-target, white));color:var(--color-neutral-400);box-shadow:none}.table-paginator__page--active,.table-paginator__page--active:disabled{opacity:1;border-color:var(--color-primary-500);background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.table-paginator__meta{font-size:12px;color:var(--color-neutral-600)}.table-paginator--compact{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--compact .table-paginator__content,.table-paginator--compact .table-paginator__controls,.table-paginator--compact .table-paginator__pages{gap:6px}.table-paginator--compact .table-paginator__nav,.table-paginator--compact .table-paginator__page{min-width:30px;min-height:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);box-shadow:none}.table-paginator--compact .table-paginator__nav--icon{width:30px;padding:0}.table-paginator--compact .table-paginator__nav:not(:disabled):hover,.table-paginator--compact .table-paginator__page:not(:disabled):hover{border-color:color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-surface-mix-target, white));color:var(--color-neutral-900)}.table-paginator--compact .table-paginator__page--active,.table-paginator--compact .table-paginator__page--active:disabled{border-color:var(--color-neutral-950);background:var(--color-neutral-950);color:var(--color-neutral-000);font-weight:700}.table-paginator--compact .table-paginator__nav:disabled,.table-paginator--compact .table-paginator__page:disabled{opacity:.4;background:transparent;border-color:transparent;color:var(--color-neutral-400)}.table-paginator--compact .table-paginator__meta{padding:0 6px}.table-paginator--compact .table-paginator__size{margin-inline-start:auto}.table-paginator--compact .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--segmented{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__content{gap:10px}.table-paginator--segmented .table-paginator__controls{gap:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--table-control-radius);overflow:hidden;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__pages{gap:0}.table-paginator--segmented .table-paginator__nav,.table-paginator--segmented .table-paginator__page{min-width:32px;min-height:32px;height:32px;padding:0 10px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);box-shadow:none}.table-paginator--segmented .table-paginator__nav--icon{width:32px;padding:0}.table-paginator--segmented .table-paginator__nav+.table-paginator__nav,.table-paginator--segmented .table-paginator__nav+.table-paginator__pages,.table-paginator--segmented .table-paginator__pages+.table-paginator__nav,.table-paginator--segmented .table-paginator__pages+.table-paginator__pages,.table-paginator--segmented .table-paginator__page+.table-paginator__page{border-inline-start:1px solid color-mix(in oklab,var(--color-neutral-300) 86%,transparent)}.table-paginator--segmented .table-paginator__nav:not(:disabled):hover,.table-paginator--segmented .table-paginator__page:not(:disabled):hover{background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator--segmented .table-paginator__page--active,.table-paginator--segmented .table-paginator__page--active:disabled{background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:700}.table-paginator--segmented .table-paginator__nav:disabled,.table-paginator--segmented .table-paginator__page:disabled{opacity:1;background:transparent;color:var(--color-neutral-400);border-color:transparent}.table-paginator--segmented .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--compact.table-paginator--flat,.table-paginator--segmented.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.nvb-table--grid th,.nvb-table--grid td{border-right:1px solid var(--table-surface-border)}.nvb-table--grid th:last-child,.nvb-table--grid td:last-child{border-right:none}.nvb-table--striped tbody tr:nth-child(2n){background:color-mix(in oklab,var(--color-neutral-050) 74%,var(--color-surface-mix-target, white))}.nvb-table--row-hover tbody>tr:not(.expanded-row):hover>td{background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-surface-mix-target, white))}.nvb-table__row--active>td{background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white))}.nvb-table--force-stack thead{display:none}.nvb-table--force-stack,.nvb-table--force-stack tbody,.nvb-table--force-stack tr,.nvb-table--force-stack td{display:block;width:100%}.nvb-table--force-stack tr{display:block;width:100%;border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--force-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--force-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--force-stack .action-cell{justify-items:end}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--force-stack .expand-cell:before,.nvb-table--force-stack .table-expanded-inline-row__cell:before,.nvb-table--force-stack .table-row-template-cell:before{content:none}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--force-stack .table-expanded-inline-row__content{width:100%}.table-dialog-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:1500}.table-dialog{--nvb-floating-overlay-z-index: 1520;--nvb-page-margin-bottom: 0px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,760px);max-height:84vh;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);z-index:1510;overflow:hidden;min-height:0;outline:0}.table-dialog--filters{width:min(92vw,680px)}.table-dialog--column-settings{width:min(92vw,620px)}.table-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);flex-shrink:0}.table-dialog__header h4{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900)}.table-dialog__close{width:32px;height:32px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.table-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.table-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.table-dialog__close span{font-size:18px}.table-dialog__body{padding:16px 24px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1 1 auto;min-height:0}.table-dialog__select-all{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-dialog__footer{border-top:1px solid var(--color-neutral-200);padding:16px 24px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0}.table-dialog__footer .table-export__action,.table-dialog__footer .table-toolbar__button{width:100%;justify-content:center}.table-dialog__footer--single{grid-template-columns:1fr}.table-dialog__tabs{display:flex;align-items:center;gap:4px;padding:0 24px;border-bottom:1px solid var(--color-neutral-200)}.table-dialog__tab{position:relative;min-height:40px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);font-size:13px;line-height:20px;font-weight:600;padding:0 12px;cursor:pointer}.table-dialog__tab:hover{color:var(--color-neutral-900);background:color-mix(in oklab,var(--color-neutral-100) 72%,transparent)}.table-dialog__tab--active{color:var(--color-primary-700)}.table-dialog__tab--active:after{content:\"\";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:999px;background:var(--color-primary-600)}.table-dialog__tab:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.table-export__columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.table-column-settings{display:flex;flex-direction:column;gap:10px}.table-column-settings__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.table-column-settings__list{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,520px);overflow:auto;padding-right:2px}.table-column-settings__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:6px 8px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;background:var(--color-neutral-000)}.table-column-settings__content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,180px);gap:10px;align-items:center}.table-column-settings__drag{width:32px;min-width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:grab;flex:0 0 auto}.table-column-settings__drag:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__drag:active{cursor:grabbing}.table-column-settings__list.cdk-drop-list-dragging .table-column-settings__item:not(.cdk-drag-placeholder){transition:transform .16s ease}.table-column-settings__item.cdk-drag-preview{box-sizing:border-box;background:var(--color-neutral-000);border:1px solid var(--color-primary-300);border-radius:8px;box-shadow:0 14px 28px #0f172a29}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__item.cdk-drag-placeholder{opacity:.35;border-style:dashed;background:var(--color-primary-050)}.table-column-settings__item.cdk-drag-animating{transition:transform .18s ease}.table-column-settings__toggle{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;font-size:12px;color:var(--color-neutral-800);font-weight:500}.table-column-settings__toggle .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}.table-column-settings__toggle .nvb-control__checkbox-input:hover{border-color:var(--color-primary-500)}.table-column-settings__toggle .nvb-control__checkbox-input:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary-500) 20%,transparent)}.table-column-settings__toggle .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__toggle span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}.table-column-settings__width{display:flex;flex-direction:column;gap:6px;min-width:0}.table-column-settings__width-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.table-column-settings__width-header>span{font-size:11px;line-height:1.2;color:var(--color-neutral-600)}.table-column-settings__width-meta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.table-column-settings__width-reset{min-height:24px;border:1px solid var(--color-neutral-300);border-radius:999px;background:var(--color-neutral-050);color:var(--color-neutral-700);font:inherit;font-size:11px;padding:0 10px;cursor:pointer}.table-column-settings__width-reset:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__width-reset--active{border-color:var(--color-primary-300);background:var(--color-primary-100);color:var(--color-primary-800)}.table-column-settings__width-range{display:block}.table-column-settings__width-range input[type=range]{width:100%;margin:0;accent-color:var(--color-primary-600);cursor:pointer}.table-column-settings__width-value{min-width:92px;min-height:28px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-800);display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:12px;font-weight:600}.table-column-settings__order{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.table-column-settings__move{width:30px;height:30px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-column-settings__move:hover:not(:disabled){border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__move:disabled{opacity:.5;cursor:not-allowed}@media(max-width:720px){.table-column-settings__content{grid-template-columns:minmax(0,1fr)}}.table-dialog--column-settings .table-dialog__footer{grid-template-columns:repeat(2,minmax(0,1fr))}.table-export__column{border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form{display:flex;flex-direction:column;gap:10px}.table-filter-form__row{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form__row input{border:1px solid var(--color-neutral-300);border-radius:7px;min-height:34px;padding:0 10px;font-size:12px;color:var(--color-neutral-700)}.table-filter-list{display:flex;flex-direction:column;gap:8px}.table-filter-list__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.table-filter-list__meta{min-width:0;display:flex;flex-direction:column;gap:2px}.table-filter-list__meta strong{font-size:13px;color:var(--color-neutral-800)}.table-filter-list__meta span,.table-filter-list__meta small{font-size:11px;color:var(--color-neutral-600)}.table-filter-list__actions{display:inline-flex;align-items:center;gap:6px}.table-filter-list__empty{font-size:12px;color:var(--color-neutral-500);padding:6px 0}@keyframes table-loading-fade{0%{opacity:0}to{opacity:1}}@keyframes table-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@container (max-width: 768px){.table-sticky-clone{display:none}.table-toolbar{flex-direction:column;align-items:stretch}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{width:100%;justify-content:flex-start;flex:0 0 auto}.table-toolbar__center{min-width:0}.table-toolbar__center--controls-only{justify-content:flex-start}.table-toolbar__right{margin-left:0}.table-toolbar__dropzone--center{flex:0 0 auto}.table-toolbar__drop-item{min-width:0;max-width:none;width:100%;flex-basis:100%}.table-toolbar__add-menu{position:static;width:100%;min-width:0;max-height:220px;margin-top:6px;box-shadow:none}.table-toolbar__button--detailed-toggle{width:100%;justify-content:space-between}.table-quick-search,.table-export{width:100%}.table-header-menu{width:100%;min-width:0}.table-export>.table-toolbar__button{width:100%;justify-content:space-between}.table-export__menu{left:0;right:auto;width:min(100%,280px)}.table-detailed-search__row{grid-template-columns:1fr}.table-detailed-search__remove,.table-detailed-search__actions{width:100%}.table-detailed-search__actions .table-toolbar__button{width:100%;justify-content:center}.table-cell-actions{width:100%}.table-frame{flex-direction:column}.table-detail-panel{width:100%;min-width:0;max-width:none;border-left:none;border-top:1px solid var(--color-neutral-200)}.table-cell-actions__select{width:100%;min-width:0}.table-dialog{width:min(94vw,720px);max-height:88vh}.table-dialog__footer{grid-template-columns:1fr}.table-filter-list__item{flex-direction:column;align-items:stretch}.table-filter-list__actions{width:100%}.table-filter-list__actions .table-toolbar__button{flex:1 1 0;justify-content:center}.nvb-table--auto-stack thead{display:none}.nvb-table--auto-stack,.nvb-table--auto-stack tbody,.nvb-table--auto-stack tr,.nvb-table--auto-stack td{display:block;width:100%}.nvb-table--auto-stack tr{border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--auto-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--auto-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--auto-stack .action-cell{justify-items:end}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--auto-stack .expand-cell:before,.nvb-table--auto-stack .table-expanded-inline-row__cell:before,.nvb-table--auto-stack .table-row-template-cell:before{content:none}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--auto-stack .table-expanded-inline-row__content{width:100%}}\n"] }]
+                    ], template: "<element-wrapper [model]=\"model()\">\r\n  @if (templateCss()) {\r\n    <nvb-style-outlet\r\n      [cssText]=\"templateCss()\"\r\n      [renderInPlace]=\"true\"\r\n      [styleKey]=\"styleOutletKey()\"\r\n    ></nvb-style-outlet>\r\n  }\r\n  <div\r\n    #tableShellRef\r\n    class=\"table-shell\"\r\n    [class.table-shell--editor]=\"isEditor()\"\r\n    [class.table-shell--sticky-header]=\"stickyHeaderEnabled()\"\r\n    [style.--table-sticky-header-offset]=\"stickyHeaderActiveOffset() + 'px'\"\r\n    [attr.aria-busy]=\"loading()\"\r\n  >\r\n    @if (\r\n      stickyHeaderEnabled() ||\r\n      showToolbar() ||\r\n      (detailedSearchEnabled() && showDetailedSearchPanel())\r\n    ) {\r\n      <div\r\n        #stickyHeaderRef\r\n        class=\"table-sticky-header\"\r\n        [class.table-sticky-header--enabled]=\"stickyHeaderEnabled()\"\r\n        [class.table-sticky-header--pinned]=\"stickyHeaderPinned()\"\r\n      >\r\n        @if (showToolbar()) {\r\n          <div\r\n            class=\"table-toolbar\"\r\n            role=\"toolbar\"\r\n            [class.table-toolbar--flat]=\"flatHeaderSurface()\"\r\n            [attr.aria-label]=\"'table.toolbar.label' | uiT: 'Table actions'\"\r\n          >\r\n            <div class=\"table-toolbar__left\">\r\n              @if (quickSearchEnabled()) {\r\n                <div\r\n                  class=\"table-quick-search\"\r\n                  role=\"search\"\r\n                  [attr.aria-label]=\"'table.search.quick' | uiT: 'Quick search'\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-quick-search__apply\"\r\n                    (click)=\"applyQuickSearch()\"\r\n                    [attr.aria-label]=\"'table.search.apply' | uiT: 'Search'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">search</span>\r\n                  </button>\r\n                  <input\r\n                    type=\"text\"\r\n                    [ngModel]=\"quickSearchTerm()\"\r\n                    (ngModelChange)=\"onQuickSearchValueChange($event)\"\r\n                    (keydown.enter)=\"applyQuickSearch(); $event.preventDefault()\"\r\n                    [placeholder]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                    [attr.aria-label]=\"quickSearchPlaceholder() | uiT: quickSearchPlaceholder()\"\r\n                  />\r\n                  @if (quickSearchTerm()) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-quick-search__clear\"\r\n                      (click)=\"clearQuickSearch()\"\r\n                      [attr.aria-label]=\"'table.search.clearQuick' | uiT: 'Clear quick search'\"\r\n                    >\r\n                      <span class=\"material-symbols-outlined\">close</span>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (detailedSearchEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--detailed-toggle\"\r\n                  (click)=\"toggleDetailedSearch()\"\r\n                  [attr.aria-expanded]=\"showDetailedSearchPanel()\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">tune</span>\r\n                  <span>\r\n                    {{\r\n                      showDetailedSearchPanel()\r\n                        ? ('table.search.hideDetailed' | uiT: 'Hide detailed search')\r\n                        : ('table.search.showDetailed' | uiT: 'Detailed search')\r\n                    }}\r\n                  </span>\r\n                  @if (detailedFiltersCount() > 0) {\r\n                    <span class=\"table-toolbar__badge\">{{ detailedFiltersCount() }}</span>\r\n                  }\r\n                </button>\r\n              }\r\n\r\n              @if (showHeaderCenterInLeft()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtStart()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n\r\n            @if (showHeaderCenterArea()) {\r\n              <div\r\n                class=\"table-toolbar__center\"\r\n                [class.table-toolbar__center--controls-only]=\"\r\n                  !hasCustomHeaderTemplate() && showHeaderCenterInCenter()\r\n                \"\r\n              >\r\n                @if (hasCustomHeaderTemplate()) {\r\n                  <div\r\n                    class=\"table-toolbar__custom\"\r\n                    [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                    [innerHTML]=\"customHeaderTemplateHtml()\"\r\n                    (click)=\"onHeaderTemplateClick($event)\"\r\n                  ></div>\r\n                }\r\n\r\n                @if (showHeaderCenterInCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n                }\r\n\r\n                @if (renderHeaderActionsAtCenter()) {\r\n                  <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div class=\"table-toolbar__right\">\r\n              @if (columnSettingsEnabled()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"table-toolbar__button table-toolbar__button--icon-only\"\r\n                  (click)=\"openColumnSettings()\"\r\n                  [attr.aria-expanded]=\"openColumnSettingsDialog()\"\r\n                  [attr.aria-label]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                  [attr.title]=\"'table.columns.settings.button' | uiT: 'Column settings'\"\r\n                >\r\n                  <nvb-icon class=\"table-action-icon\" name=\"settings\"></nvb-icon>\r\n                </button>\r\n              }\r\n\r\n              @if (exportEnabled()) {\r\n                <div class=\"table-export\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button\"\r\n                    [disabled]=\"exportBusy()\"\r\n                    [title]=\"exportBusy() ? ('table.export.busy' | uiT: 'Exporting...') : ''\"\r\n                    [attr.aria-expanded]=\"\r\n                      exportUsesColumnPicker() ? openExportDialog() : openExportMenu()\r\n                    \"\r\n                    (click)=\"toggleExportMenu($event)\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">ios_share</span>\r\n                    <span>{{ 'table.export.open' | uiT: 'Export' }}</span>\r\n                    @if (!exportUsesColumnPicker()) {\r\n                      <span class=\"material-symbols-outlined table-export__chevron\">\r\n                        {{ openExportMenu() ? 'expand_less' : 'expand_more' }}\r\n                      </span>\r\n                    }\r\n                  </button>\r\n\r\n                  @if (!exportUsesColumnPicker() && openExportMenu()) {\r\n                    <div\r\n                      class=\"table-export__menu\"\r\n                      [class.table-export__menu--top]=\"exportMenuPosition() === 'top'\"\r\n                      [ngStyle]=\"exportMenuStyle()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <label class=\"table-export__scope\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"exportScope() === 'all'\"\r\n                          (change)=\"onExportScopeToggle($event)\"\r\n                        />\r\n                        <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n                      </label>\r\n\r\n                      <div class=\"table-export__actions\">\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('csv', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">description</span>\r\n                          <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('excel', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">table_view</span>\r\n                          <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n                        </button>\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-export__action\"\r\n                          [disabled]=\"exportBusy()\"\r\n                          (click)=\"runExport('pdf', $event)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n                          <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (showHeaderCenterInRight()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerCenterControlsTemplate\"></ng-container>\r\n              }\r\n\r\n              @if (renderHeaderActionsAtEnd()) {\r\n                <ng-container [ngTemplateOutlet]=\"headerActionsTemplate\"></ng-container>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <ng-template #headerCenterControlsTemplate>\r\n            <div\r\n              class=\"table-toolbar__dropzone\"\r\n              [class.table-toolbar__dropzone--left]=\"headerCenterElementsPosition() === 'left'\"\r\n              [class.table-toolbar__dropzone--center]=\"headerCenterElementsPosition() === 'center'\"\r\n              [class.table-toolbar__dropzone--right]=\"headerCenterElementsPosition() === 'right'\"\r\n            >\r\n              @if (isEditor()) {\r\n                <div class=\"table-toolbar__add-element\" (click)=\"$event.stopPropagation()\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-toolbar__button table-toolbar__button--add-element\"\r\n                    (click)=\"toggleHeaderCenterAddMenu($event)\"\r\n                    [attr.aria-expanded]=\"headerCenterAddMenuOpen()\"\r\n                    [attr.aria-label]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                    [title]=\"'table.header.addElement' | uiT: 'Add element'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">add</span>\r\n                  </button>\r\n\r\n                  @if (headerCenterAddMenuOpen()) {\r\n                    <div class=\"table-toolbar__add-menu\">\r\n                      @for (option of headerCenterAddOptions; track option.type) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__add-menu-item\"\r\n                          (click)=\"addHeaderCenterElementByType(option.type, $event)\"\r\n                        >\r\n                          {{ option.labelKey | uiT: option.fallbackLabel }}\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              @if (hasHeaderCenterElements()) {\r\n                <div class=\"table-toolbar__drop-items\">\r\n                  @for (headerElement of headerCenterElements(); track headerElement.name) {\r\n                    <div\r\n                      class=\"table-toolbar__drop-item\"\r\n                      [class.table-toolbar__drop-item--editor]=\"isEditor()\"\r\n                      [class.table-toolbar__drop-item--focused]=\"\r\n                        isHeaderCenterElementFocused(headerElement.name)\r\n                      \"\r\n                      [attr.data-nvb-header-center-name]=\"headerElement.name\"\r\n                      (mousedown)=\"focusHeaderCenterElementByName(headerElement.name, $event)\"\r\n                    >\r\n                      <runtime-lazy-element-outlet [model]=\"headerElement\" />\r\n                      @if (isEditor()) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"table-toolbar__drop-remove\"\r\n                          (click)=\"removeHeaderCenterElement(headerElement.name, $event)\"\r\n                          [attr.aria-label]=\"\r\n                            'table.header.removeCenterElement' | uiT: 'Remove center element'\r\n                          \"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">close</span>\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n\r\n          <ng-template #headerActionsTemplate>\r\n            @if (visibleHeaderActions(); as headerActions) {\r\n              @if (headerActions.length > 0) {\r\n                @if (renderHeaderActionsAsDropdown()) {\r\n                  <nvb-select\r\n                    class=\"table-toolbar__select\"\r\n                    [ngModel]=\"headerActionDropdownValue()\"\r\n                    (ngModelChange)=\"onHeaderActionDropdownChange($event)\"\r\n                    (blur)=\"onHeaderActionDropdownBlur()\"\r\n                    [attr.aria-label]=\"headerActionsDropdownPlaceholder()\"\r\n                  >\r\n                    <option value=\"\">{{ headerActionsDropdownPlaceholder() }}</option>\r\n                    @for (option of headerActionDropdownOptions(); track option.value) {\r\n                      <option [value]=\"option.value\">{{ option.label }}</option>\r\n                    }\r\n                  </nvb-select>\r\n                } @else {\r\n                  <div class=\"table-toolbar__actions\">\r\n                    @for (action of headerActions; track action.id || $index) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        [class.table-toolbar__button--icon-only]=\"actionHidesText(action)\"\r\n                        [attr.title]=\"resolveActionLabel(action)\"\r\n                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                        (click)=\"runHeaderAction(action, $event)\"\r\n                      >\r\n                        @if (resolveActionIcon(action); as actionIcon) {\r\n                          <nvb-icon class=\"table-action-icon\" [name]=\"actionIcon\"></nvb-icon>\r\n                        }\r\n                        @if (!actionHidesText(action)) {\r\n                          <span>{{ resolveActionLabel(action) }}</span>\r\n                        }\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          </ng-template>\r\n        }\r\n\r\n        @if (detailedSearchEnabled() && showDetailedSearchPanel()) {\r\n          <div class=\"table-detailed-search\">\r\n            <div class=\"table-detailed-search__rows\">\r\n              @for (filter of detailedFilters(); track filter.id) {\r\n                <div class=\"table-detailed-search__row\">\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.key\"\r\n                    (ngModelChange)=\"updateDetailedFilterKey(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.field' | uiT: 'Field'\"\r\n                  >\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <option [value]=\"column.key\">{{ resolveColumnLabel(column) }}</option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  <nvb-select\r\n                    [ngModel]=\"filter.operator\"\r\n                    (ngModelChange)=\"updateDetailedFilterOperator(filter.id, $event)\"\r\n                    [attr.aria-label]=\"'table.search.operator' | uiT: 'Operator'\"\r\n                  >\r\n                    @for (operator of getFilterOperators(filter); track operator.value) {\r\n                      <option [value]=\"operator.value\">\r\n                        {{ operator.label | uiT: operator.value }}\r\n                      </option>\r\n                    }\r\n                  </nvb-select>\r\n\r\n                  @if (isSelectFilter(filter)) {\r\n                    <nvb-select\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    >\r\n                      <option value=\"\">\r\n                        {{\r\n                          resolveDetailedFilterOptions(filter).length > 0\r\n                            ? ('table.search.value' | uiT: 'Value')\r\n                            : ('table.search.emptyOptions' | uiT: 'No options')\r\n                        }}\r\n                      </option>\r\n                      @for (option of resolveDetailedFilterOptions(filter); track option.value) {\r\n                        <option [value]=\"option.value\">{{ option.label }}</option>\r\n                      }\r\n                    </nvb-select>\r\n                  } @else if (isMultiSelectFilter(filter)) {\r\n                    <div\r\n                      class=\"table-detailed-search__multi-select\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__multi-select-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterMultiSelectOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterMultiSelectMenu(filter.id, $event)\"\r\n                      >\r\n                        @if (hasDetailedFilterSelectedOptions(filter)) {\r\n                          <span>{{ resolveDetailedFilterMultiSelectLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__multi-select-placeholder\">{{\r\n                            resolveDetailedFilterOptions(filter).length > 0\r\n                              ? ('table.search.value' | uiT: 'Value')\r\n                              : ('table.search.emptyOptions' | uiT: 'No options')\r\n                          }}</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">\r\n                          {{\r\n                            isDetailedFilterMultiSelectOpen(filter.id)\r\n                              ? 'expand_less'\r\n                              : 'expand_more'\r\n                          }}\r\n                        </span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterMultiSelectOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__multi-select-menu\">\r\n                          @if (resolveDetailedFilterOptions(filter).length === 0) {\r\n                            <div class=\"table-detailed-search__multi-select-empty\">\r\n                              {{ 'table.search.emptyOptions' | uiT: 'No options' }}\r\n                            </div>\r\n                          } @else {\r\n                            @for (\r\n                              option of resolveDetailedFilterOptions(filter);\r\n                              track option.value\r\n                            ) {\r\n                              <label class=\"table-detailed-search__multi-select-option\">\r\n                                <input\r\n                                  type=\"checkbox\"\r\n                                  class=\"nvb-control__checkbox-input\"\r\n                                  [checked]=\"isFilterOptionSelected(filter, option.value)\"\r\n                                  (change)=\"\r\n                                    onDetailedFilterMultiSelectOptionToggle(\r\n                                      filter.id,\r\n                                      option.value,\r\n                                      $any($event.target).checked\r\n                                    )\r\n                                  \"\r\n                                />\r\n                                <span>{{ option.label }}</span>\r\n                              </label>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isToggleFilter(filter)) {\r\n                    <label\r\n                      class=\"table-detailed-search__toggle table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-toggle-switch__input\"\r\n                        [checked]=\"isToggleFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedToggleFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span class=\"nvb-toggle-switch__track\">\r\n                        <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                      </span>\r\n                      <span>{{ filterValueAsString(filter.value) }}</span>\r\n                    </label>\r\n                  } @else if (isCheckboxFilter(filter) || isBooleanFilter(filter)) {\r\n                    <label class=\"table-detailed-search__boolean-toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isFilterValueTrue(filter)\"\r\n                        (change)=\"\r\n                          updateDetailedFilterValue(\r\n                            filter.id,\r\n                            $any($event.target).checked ? 'true' : 'false'\r\n                          )\r\n                        \"\r\n                      />\r\n                      <span>{{\r\n                        isFilterValueTrue(filter)\r\n                          ? ('table.search.boolean.true' | uiT: 'True')\r\n                          : ('table.search.boolean.false' | uiT: 'False')\r\n                      }}</span>\r\n                    </label>\r\n                  } @else if (isNumericFilter(filter)) {\r\n                    <input\r\n                      type=\"number\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else if (isDateFilter(filter)) {\r\n                    <div class=\"table-detailed-search__date\" (click)=\"$event.stopPropagation()\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-detailed-search__date-trigger\"\r\n                        [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                        [attr.aria-expanded]=\"isDetailedFilterDatePickerOpen(filter.id)\"\r\n                        (click)=\"toggleDetailedFilterDatePicker(filter, $event)\"\r\n                      >\r\n                        @if (resolveDetailedFilterDateLabel(filter)) {\r\n                          <span>{{ resolveDetailedFilterDateLabel(filter) }}</span>\r\n                        } @else {\r\n                          <span class=\"table-detailed-search__date-placeholder\">0000-00-00</span>\r\n                        }\r\n                        <span class=\"material-symbols-outlined\">calendar_month</span>\r\n                      </button>\r\n\r\n                      @if (isDetailedFilterDatePickerOpen(filter.id)) {\r\n                        <div class=\"table-detailed-search__date-menu\">\r\n                          <div class=\"table-detailed-search__date-header\">\r\n                            <button type=\"button\" (click)=\"previousDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                            </button>\r\n                            <span>{{ resolveDetailedFilterDateMonthLabel() }}</span>\r\n                            <button type=\"button\" (click)=\"nextDetailedFilterDateMonth($event)\">\r\n                              <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                            </button>\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-weekdays\">\r\n                            @for (\r\n                              weekday of resolveDetailedFilterDateWeekdays();\r\n                              track weekday + $index\r\n                            ) {\r\n                              <span>{{ weekday }}</span>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-days\">\r\n                            @for (day of resolveDetailedFilterDateDays(filter); track day.key) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"table-detailed-search__date-day\"\r\n                                [class.table-detailed-search__date-day--outside]=\"day.outsideMonth\"\r\n                                [class.table-detailed-search__date-day--today]=\"day.isToday\"\r\n                                [class.table-detailed-search__date-day--selected]=\"day.isSelected\"\r\n                                (click)=\"selectDetailedFilterDate(filter.id, day.iso, $event)\"\r\n                              >\r\n                                {{ day.day }}\r\n                              </button>\r\n                            }\r\n                          </div>\r\n\r\n                          <div class=\"table-detailed-search__date-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              (click)=\"clearDetailedFilterDate(filter.id, $event)\"\r\n                            >\r\n                              {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\r\n                            </button>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  } @else if (isDateTimeFilter(filter)) {\r\n                    <input\r\n                      type=\"datetime-local\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  } @else {\r\n                    <input\r\n                      type=\"text\"\r\n                      [ngModel]=\"filter.value\"\r\n                      (ngModelChange)=\"updateDetailedFilterValue(filter.id, $event)\"\r\n                      [placeholder]=\"'table.search.value' | uiT: 'Value'\"\r\n                      [attr.aria-label]=\"'table.search.value' | uiT: 'Value'\"\r\n                    />\r\n                  }\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-detailed-search__remove\"\r\n                    (click)=\"removeDetailedFilter(filter.id)\"\r\n                    [attr.aria-label]=\"'table.search.removeFilter' | uiT: 'Remove filter'\"\r\n                  >\r\n                    <span class=\"material-symbols-outlined\">delete</span>\r\n                  </button>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"table-detailed-search__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"addDetailedFilter()\">\r\n                <span class=\"material-symbols-outlined\">add</span>\r\n                <span>{{ 'table.search.addFilter' | uiT: 'Add filter' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"clearDetailedSearch()\">\r\n                <span class=\"material-symbols-outlined\">ink_eraser</span>\r\n                <span>{{ 'table.search.clear' | uiT: 'Clear' }}</span>\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-toolbar__button table-toolbar__button--primary\"\r\n                (click)=\"applyDetailedSearch()\"\r\n              >\r\n                <span class=\"material-symbols-outlined\">check</span>\r\n                <span>{{ 'table.search.apply' | uiT: 'Apply' }}</span>\r\n              </button>\r\n              @if (savedFiltersEnabled()) {\r\n                <button type=\"button\" class=\"table-toolbar__button\" (click)=\"openSavedFilters()\">\r\n                  <span class=\"material-symbols-outlined\">bookmark</span>\r\n                  <span>{{ 'table.search.saved' | uiT: 'Saved filters' }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (stickyHeaderCloneVisible()) {\r\n          <div class=\"table-sticky-clone\">\r\n            <div class=\"table-sticky-clone__viewport\">\r\n              <table\r\n                class=\"nvb-table table-sticky-clone__table\"\r\n                [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n                [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n                [style.width.px]=\"stickyHeaderTableWidth() || null\"\r\n                [style.transform]=\"'translateX(' + -stickyHeaderScrollLeft() + 'px)'\"\r\n              >\r\n                <thead>\r\n                  <tr class=\"table-sticky-clone__row\">\r\n                    @if (showExpandChevronColumn()) {\r\n                      <th\r\n                        class=\"expand-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                        [style.min-width.px]=\"stickyHeaderCellWidthAt(0)\"\r\n                      ></th>\r\n                    }\r\n                    @if (selectionEnabled()) {\r\n                      <th\r\n                        class=\"select-column\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(showExpandChevronColumn() ? 1 : 0)\r\n                        \"\r\n                      >\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          class=\"nvb-control__checkbox-input\"\r\n                          [checked]=\"allVisibleSelected()\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"toggleSelectAllVisible($event)\"\r\n                          [attr.aria-label]=\"\r\n                            model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                          \"\r\n                        />\r\n                      </th>\r\n                    }\r\n\r\n                    @for (\r\n                      column of dataColumns();\r\n                      track column.id || column.key;\r\n                      let columnIndex = $index\r\n                    ) {\r\n                      <th\r\n                        [class]=\"columnAlignClass(column)\"\r\n                        [class.sortable]=\"column.sortable\"\r\n                        [class.sorted-active]=\"isSortedColumn(column)\"\r\n                        [style.width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderDataColumnStartIndex() + columnIndex)\r\n                        \"\r\n                        (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                      >\r\n                        @if (showColumnHeaderLabel(column)) {\r\n                          <span>{{ resolveColumnLabel(column) }}</span>\r\n                        }\r\n                        @if (column.sortable) {\r\n                          <span\r\n                            class=\"material-symbols-outlined sort-icon\"\r\n                            [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                          >\r\n                            {{ sortIndicator(column) }}\r\n                          </span>\r\n                        }\r\n                      </th>\r\n                    }\r\n\r\n                    @if (hasRowActions()) {\r\n                      <th\r\n                        class=\"action-column\"\r\n                        [style.width.px]=\"stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\"\r\n                        [style.min-width.px]=\"\r\n                          stickyHeaderCellWidthAt(stickyHeaderActionColumnIndex())\r\n                        \"\r\n                      >\r\n                        <div class=\"action-header\">\r\n                          @if (showActionsHeaderLabel()) {\r\n                            <span class=\"action-header__label\">{{\r\n                              model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                            }}</span>\r\n                          }\r\n                        </div>\r\n                      </th>\r\n                    }\r\n                  </tr>\r\n                </thead>\r\n              </table>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      class=\"table-frame\"\r\n      [class.table-frame--with-toolbar]=\"showToolbar() && !flatHeaderSurface()\"\r\n      [class.table-frame--with-paginator]=\"model().paginator && !flatFooterSurface()\"\r\n      [class.table-frame--with-detail-panel]=\"activeExpandedPanelContext() !== null\"\r\n    >\r\n      <div\r\n        #tableScrollerRef\r\n        class=\"table-frame__scroller\"\r\n        [class.table-frame__scroller--virtual]=\"virtualScrollEnabled()\"\r\n        [style.max-height.px]=\"virtualScrollEnabled() ? virtualScrollViewportHeight() : null\"\r\n        (scroll)=\"onTableScroll($event)\"\r\n      >\r\n        <table\r\n          class=\"nvb-table\"\r\n          [class.nvb-table--auto-stack]=\"model().responsiveMode === 'auto'\"\r\n          [class.nvb-table--force-stack]=\"model().responsiveMode === 'stack'\"\r\n          [class.nvb-table--grid]=\"tableStyle() === 'grid'\"\r\n          [class.nvb-table--striped]=\"tableStyle() === 'striped'\"\r\n          [class.nvb-table--row-hover]=\"rowHoverEnabled()\"\r\n          [class.nvb-table--sticky-header]=\"stickyHeaderEnabled()\"\r\n          [class.nvb-table--virtual-scroll]=\"virtualScrollEnabled()\"\r\n          data-testid=\"table-element-root\"\r\n        >\r\n          <thead>\r\n            <tr #mainHeaderRowRef>\r\n              @if (showExpandChevronColumn()) {\r\n                <th class=\"expand-column\"></th>\r\n              }\r\n              @if (selectionEnabled()) {\r\n                <th class=\"select-column\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"nvb-control__checkbox-input\"\r\n                    [checked]=\"allVisibleSelected()\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"toggleSelectAllVisible($event)\"\r\n                    [attr.aria-label]=\"\r\n                      model().selectAllLabel || ('table.selectAll' | uiT: 'Select all')\r\n                    \"\r\n                  />\r\n                </th>\r\n              }\r\n\r\n              @for (\r\n                column of dataColumns();\r\n                track column.id || column.key;\r\n                let columnIndex = $index\r\n              ) {\r\n                <th\r\n                  [class]=\"columnAlignClass(column)\"\r\n                  [class.sortable]=\"column.sortable\"\r\n                  [class.column-focused]=\"isColumnFocused(column, columnIndex)\"\r\n                  [class.sorted-active]=\"isSortedColumn(column)\"\r\n                  [style.width]=\"columnWidthStyle(column)\"\r\n                  [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                  (focus)=\"onColumnHeaderFocus(column, columnIndex)\"\r\n                  (click)=\"onColumnHeaderClick(column, columnIndex, $event)\"\r\n                >\r\n                  @if (showColumnHeaderLabel(column)) {\r\n                    <span>{{ resolveColumnLabel(column) }}</span>\r\n                  }\r\n                  @if (column.sortable) {\r\n                    <span\r\n                      class=\"material-symbols-outlined sort-icon\"\r\n                      [class.sort-icon--active]=\"isSortedColumn(column)\"\r\n                    >\r\n                      {{ sortIndicator(column) }}\r\n                    </span>\r\n                  }\r\n                </th>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <th class=\"action-column\">\r\n                  <div class=\"action-header\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      <span class=\"action-header__label\">{{\r\n                        model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                      }}</span>\r\n                    }\r\n\r\n                    @if (hasSelectionActions() && selectedRowsCount() > 0) {\r\n                      @if (visibleSelectionActions(); as selectionActions) {\r\n                        @if (selectionActions.length > 0) {\r\n                          <div class=\"selection-actions\">\r\n                            <button\r\n                              type=\"button\"\r\n                              class=\"selection-actions__toggle\"\r\n                              (click)=\"toggleSelectionActionMenu(selectionActions.length, $event)\"\r\n                              [attr.aria-label]=\"\r\n                                selectionActionsLabel() | uiT: selectionActionsLabel()\r\n                              \"\r\n                            >\r\n                              <span class=\"material-symbols-outlined\">checklist</span>\r\n                              <span class=\"selection-actions__count\">{{\r\n                                selectedRowsCount()\r\n                              }}</span>\r\n                            </button>\r\n\r\n                            @if (openSelectionActionMenu()) {\r\n                              <div\r\n                                class=\"selection-actions__menu\"\r\n                                [class.selection-actions__menu--top]=\"\r\n                                  selectionActionMenuPosition() === 'top'\r\n                                \"\r\n                                [ngStyle]=\"selectionActionMenuStyle()\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @for (action of selectionActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    (click)=\"runSelectionAction(action, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  </button>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      }\r\n                    }\r\n                  </div>\r\n                </th>\r\n              }\r\n            </tr>\r\n          </thead>\r\n\r\n          <tbody>\r\n            @if (showInitialSkeleton()) {\r\n              @for (rowIndex of initialSkeletonRows(); track rowIndex) {\r\n                <tr class=\"table-skeleton__row\" aria-hidden=\"true\">\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td class=\"select-cell\">\r\n                      <span class=\"table-skeleton__dot\"></span>\r\n                    </td>\r\n                  }\r\n                  @for (\r\n                    column of dataColumns();\r\n                    track column.id || column.key;\r\n                    let columnIndex = $index\r\n                  ) {\r\n                    <td [class]=\"columnAlignClass(column)\">\r\n                      <span\r\n                        class=\"table-skeleton__line\"\r\n                        [style.width]=\"initialSkeletonCellWidth(rowIndex, columnIndex)\"\r\n                      ></span>\r\n                    </td>\r\n                  }\r\n                  @if (hasRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      <span class=\"table-skeleton__dot table-skeleton__dot--action\"></span>\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n            } @else {\r\n              @if (!loading() && visibleRows().length === 0) {\r\n                <tr>\r\n                  <td\r\n                    class=\"empty-cell\"\r\n                    [attr.colspan]=\"\r\n                      dataColumns().length +\r\n                      (hasRowActions() ? 1 : 0) +\r\n                      (selectionEnabled() ? 1 : 0) +\r\n                      (showExpandChevronColumn() ? 1 : 0)\r\n                    \"\r\n                  >\r\n                    {{ model().emptyMessage || ('table.empty' | uiT: 'No data') }}\r\n                  </td>\r\n                </tr>\r\n                @if (expandedUsesInline() && editorExpandedPreviewContext(); as expandedContext) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualTopSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualTopSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n\r\n              @for (\r\n                renderedRow of renderedRows();\r\n                track rowTrackKey(renderedRow.row, renderedRow.visibleIndex)\r\n              ) {\r\n                @let row = renderedRow.row;\r\n                @let rowIndex = renderedRow.visibleIndex;\r\n                <tr\r\n                  [class.nvb-table__row--active]=\"isRowActive(row, rowIndex)\"\r\n                  [class.nvb-table__row--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                  [class.nvb-table__row--editing]=\"isInlineEditRow(row, rowIndex)\"\r\n                  (click)=\"onRowClick(row, rowIndex, $event)\"\r\n                  (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n                >\r\n                  @if (showExpandChevronColumn()) {\r\n                    <td class=\"expand-cell\">\r\n                      @if (showExpandToggle(row, rowIndex)) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"expand-toggle\"\r\n                          [class.expand-toggle--expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                          (click)=\"toggleRowExpand(row, rowIndex, $event)\"\r\n                          [attr.aria-label]=\"resolveExpandToggleLabel(row, rowIndex)\"\r\n                          [attr.aria-expanded]=\"isRowExpanded(row, rowIndex)\"\r\n                        >\r\n                          <span class=\"material-symbols-outlined\">{{\r\n                            resolveExpandToggleIcon(row, rowIndex)\r\n                          }}</span>\r\n                        </button>\r\n                      }\r\n                    </td>\r\n                  }\r\n                  @if (selectionEnabled()) {\r\n                    <td\r\n                      class=\"select-cell\"\r\n                      [attr.data-label]=\"model().selectLabel || ('table.select' | uiT: 'Select')\"\r\n                    >\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"isRowSelected(row, rowIndex)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (change)=\"toggleRowSelection(row, rowIndex, $event)\"\r\n                        [attr.aria-label]=\"\r\n                          model().selectRowLabel || ('table.selectRow' | uiT: 'Select row')\r\n                        \"\r\n                      />\r\n                    </td>\r\n                  }\r\n\r\n                  @if (rowTemplateEnabled()) {\r\n                    <td\r\n                      class=\"table-row-template-cell\"\r\n                      data-label=\"\"\r\n                      [attr.colspan]=\"rowTemplateColspan()\"\r\n                    >\r\n                      <div\r\n                        class=\"table-row-template-host\"\r\n                        [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                        [innerHTML]=\"resolveRowTemplateHtml(row, rowIndex) || ''\"\r\n                        (click)=\"onTemplateContentClick($event, row, row)\"\r\n                      ></div>\r\n                    </td>\r\n                  } @else {\r\n                    @for (column of dataColumns(); track column.id || column.key) {\r\n                      <td\r\n                        [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                        [class]=\"columnAlignClass(column)\"\r\n                      >\r\n                        <div class=\"table-cell-content\">\r\n                          <div class=\"table-cell-content__value\">\r\n                            @if (isInlineEditRow(row, rowIndex) && isInlineEditableColumn(column)) {\r\n                              @switch (resolveInlineEditorType(column)) {\r\n                                @case ('textarea') {\r\n                                  <textarea\r\n                                    class=\"table-inline-edit table-inline-edit--textarea\"\r\n                                    rows=\"2\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  ></textarea>\r\n                                }\r\n                                @case ('number') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"number\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('date') {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"date\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                                @case ('checkbox') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                  </label>\r\n                                }\r\n                                @case ('toggle') {\r\n                                  <label\r\n                                    class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <input\r\n                                      class=\"nvb-toggle-switch__input\"\r\n                                      type=\"checkbox\"\r\n                                      [checked]=\"!!resolveInlineEditorValue(column)\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      (change)=\"\r\n                                        updateInlineEditValue(\r\n                                          column,\r\n                                          $any($event.target).checked,\r\n                                          $event\r\n                                        )\r\n                                      \"\r\n                                    />\r\n                                    <span class=\"nvb-toggle-switch__track\">\r\n                                      <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                    </span>\r\n                                  </label>\r\n                                }\r\n                                @case ('select') {\r\n                                  <select\r\n                                    class=\"table-inline-edit\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                  >\r\n                                    <option [ngValue]=\"null\">\r\n                                      {{\r\n                                        resolveInlineEditorPlaceholder(column) ||\r\n                                          ('table.inlineEdit.select' | uiT: 'Select')\r\n                                      }}\r\n                                    </option>\r\n                                    @for (\r\n                                      option of resolveInlineSelectOptions(column);\r\n                                      track $index\r\n                                    ) {\r\n                                      <option [ngValue]=\"option.rawValue\">\r\n                                        {{ option.label }}\r\n                                      </option>\r\n                                    }\r\n                                  </select>\r\n                                }\r\n                                @default {\r\n                                  <input\r\n                                    class=\"table-inline-edit\"\r\n                                    type=\"text\"\r\n                                    [ngModel]=\"resolveInlineEditorValue(column)\"\r\n                                    (ngModelChange)=\"updateInlineEditValue(column, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    [placeholder]=\"resolveInlineEditorPlaceholder(column)\"\r\n                                  />\r\n                                }\r\n                              }\r\n                            } @else if (isToggleSwitchColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                                [class.nvb-toggle-switch--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-toggle-switch__input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                                <span class=\"nvb-toggle-switch__track\">\r\n                                  <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                                </span>\r\n                              </label>\r\n                            } @else if (isSingleCheckboxColumn(column)) {\r\n                              <label\r\n                                class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                                [class.nvb-single-checkbox--disabled]=\"\r\n                                  !isInteractiveColumnEnabled(row, column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                <input\r\n                                  class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                  type=\"checkbox\"\r\n                                  [checked]=\"resolveInteractiveColumnChecked(row, column)\"\r\n                                  [disabled]=\"!isInteractiveColumnEnabled(row, column)\"\r\n                                  [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                  (change)=\"onInteractiveColumnChange(row, column, $event)\"\r\n                                />\r\n                              </label>\r\n                            } @else if (resolveStatusBadge(row, column); as statusBadge) {\r\n                              <span\r\n                                class=\"status-pill\"\r\n                                [class]=\"'status-pill status-pill--' + statusBadge.tone\"\r\n                                [class.status-pill--rounded]=\"statusBadge.rounded\"\r\n                              >\r\n                                @if (statusBadge.icon) {\r\n                                  <nvb-icon\r\n                                    class=\"status-pill__icon\"\r\n                                    [name]=\"statusBadge.icon\"\r\n                                  ></nvb-icon>\r\n                                }\r\n                                {{ statusBadge.label }}\r\n                              </span>\r\n                            } @else if (resolveCellHtml(row, column); as cellHtml) {\r\n                              <div\r\n                                class=\"table-template-host\"\r\n                                [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                                [innerHTML]=\"cellHtml\"\r\n                                (click)=\"\r\n                                  onTemplateContentClick($event, row, resolveCellValue(row, column))\r\n                                \"\r\n                              ></div>\r\n                            } @else {\r\n                              {{ resolveCellText(row, column) }}\r\n                            }\r\n                          </div>\r\n\r\n                          @if (!isInteractiveColumn(column)) {\r\n                            @if (visibleColumnCellActions(row, column); as columnActions) {\r\n                              @if (columnActions.length > 0) {\r\n                                <div\r\n                                  class=\"table-cell-actions\"\r\n                                  [class.table-cell-actions--icon]=\"\r\n                                    columnCellActionsUseIconButtons(column)\r\n                                  \"\r\n                                  (click)=\"$event.stopPropagation()\"\r\n                                >\r\n                                  @if (columnCellActionsUseDropdown(column)) {\r\n                                    <nvb-select\r\n                                      class=\"table-cell-actions__select\"\r\n                                      (change)=\"onColumnCellActionSelect(row, column, $event)\"\r\n                                    >\r\n                                      <option value=\"\">\r\n                                        {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                      </option>\r\n                                      @for (action of columnActions; track action.id || $index) {\r\n                                        <option [value]=\"'id:' + (action.id || $index)\">\r\n                                          {{ resolveActionLabel(action) }}\r\n                                        </option>\r\n                                      }\r\n                                    </nvb-select>\r\n                                  } @else {\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <button\r\n                                        type=\"button\"\r\n                                        class=\"table-cell-actions__button\"\r\n                                        [class.table-cell-actions__button--icon-only]=\"\r\n                                          columnCellActionsUseIconButtons(column) ||\r\n                                          actionHidesText(action)\r\n                                        \"\r\n                                        [attr.title]=\"resolveActionLabel(action)\"\r\n                                        [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                        (click)=\"runColumnCellAction(action, row, $event, column)\"\r\n                                      >\r\n                                        @if (resolveActionIcon(action); as actionIcon) {\r\n                                          <nvb-icon\r\n                                            class=\"table-action-icon\"\r\n                                            [name]=\"actionIcon\"\r\n                                          ></nvb-icon>\r\n                                        }\r\n                                        @if (\r\n                                          actionRendersText(\r\n                                            action,\r\n                                            columnCellActionsUseButtons(column)\r\n                                          )\r\n                                        ) {\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        }\r\n                                      </button>\r\n                                    }\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </td>\r\n                    }\r\n                  }\r\n\r\n                  @if (hasRowActions()) {\r\n                    <td\r\n                      class=\"action-cell\"\r\n                      [attr.data-label]=\"model().actionsLabel || ('table.actions' | uiT: 'Actions')\"\r\n                    >\r\n                      @if (visibleRowActions(row); as rowActions) {\r\n                        @let rowEditing = isInlineEditRow(row, rowIndex);\r\n                        @let inlineActionsEnabled =\r\n                          inlineEditEnabled() && hasInlineEditableColumns();\r\n                        @if (inlineActionsEnabled || rowActions.length > 0) {\r\n                          <div class=\"row-actions row-actions--inline\">\r\n                            @if (inlineActionsEnabled) {\r\n                              @if (rowEditing) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"saveInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">save</span>\r\n                                  <span>{{\r\n                                    isInlineEditBusy(row, rowIndex)\r\n                                      ? ('table.inlineEdit.saving' | uiT: 'Saving')\r\n                                      : ('table.inlineEdit.save' | uiT: 'Save')\r\n                                  }}</span>\r\n                                </button>\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  [disabled]=\"isInlineEditBusy(row, rowIndex)\"\r\n                                  (click)=\"cancelInlineEdit($event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">close</span>\r\n                                  <span>{{ 'table.inlineEdit.cancel' | uiT: 'Cancel' }}</span>\r\n                                </button>\r\n                              } @else {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"row-actions__inline-button\"\r\n                                  (click)=\"startInlineEdit(row, rowIndex, $event)\"\r\n                                >\r\n                                  <span class=\"material-symbols-outlined\">edit</span>\r\n                                  <span>{{ 'table.inlineEdit.edit' | uiT: 'Edit' }}</span>\r\n                                </button>\r\n                              }\r\n                            }\r\n\r\n                            @if (!rowEditing && rowActions.length > 0) {\r\n                              @if (rowActionsUseDropdown()) {\r\n                                <div class=\"row-actions\">\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__toggle\"\r\n                                    [class.row-actions__toggle--borderless]=\"\r\n                                      rowActionsUseBorderlessDropdownToggle()\r\n                                    \"\r\n                                    (click)=\"toggleActionMenu(rowIndex, rowActions.length, $event)\"\r\n                                    [attr.aria-label]=\"\r\n                                      model().actionsLabel || ('table.actions' | uiT: 'Actions')\r\n                                    \"\r\n                                  >\r\n                                    <span class=\"material-symbols-outlined\">more_vert</span>\r\n                                  </button>\r\n\r\n                                  @if (openActionMenuRow() === rowIndex) {\r\n                                    <div\r\n                                      class=\"row-actions__menu\"\r\n                                      [class.row-actions__menu--top]=\"\r\n                                        rowActionMenuPosition() === 'top'\r\n                                      \"\r\n                                      [ngStyle]=\"rowActionMenuStyle()\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                    >\r\n                                      @for (action of rowActions; track action.id || $index) {\r\n                                        <button\r\n                                          type=\"button\"\r\n                                          (click)=\"runRowAction(action, row, $event)\"\r\n                                        >\r\n                                          @if (resolveActionIcon(action); as actionIcon) {\r\n                                            <nvb-icon\r\n                                              class=\"table-action-icon\"\r\n                                              [name]=\"actionIcon\"\r\n                                            ></nvb-icon>\r\n                                          }\r\n                                          <span>{{ resolveActionLabel(action) }}</span>\r\n                                        </button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              } @else {\r\n                                @for (action of rowActions; track action.id || $index) {\r\n                                  <button\r\n                                    type=\"button\"\r\n                                    class=\"row-actions__inline-button\"\r\n                                    [class.row-actions__inline-button--icon-only]=\"\r\n                                      rowActionsUseIconButtons() || actionHidesText(action)\r\n                                    \"\r\n                                    [attr.title]=\"resolveActionLabel(action)\"\r\n                                    [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                    (click)=\"runRowAction(action, row, $event)\"\r\n                                  >\r\n                                    @if (resolveActionIcon(action); as actionIcon) {\r\n                                      <nvb-icon\r\n                                        class=\"table-action-icon\"\r\n                                        [name]=\"actionIcon\"\r\n                                      ></nvb-icon>\r\n                                    }\r\n                                    @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                      <span>{{ resolveActionLabel(action) }}</span>\r\n                                    }\r\n                                  </button>\r\n                                }\r\n                              }\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n                @if (expandedUsesInline() && isRowExpanded(row, rowIndex)) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row\"\r\n                    [attr.data-row-key]=\"resolveRowExpansionKey(row, rowIndex)\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                            expandedContext: {\r\n                              key: resolveRowExpansionKey(row, rowIndex),\r\n                              row: row,\r\n                              rowIndex: rowIndex,\r\n                            },\r\n                          }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n                @if (\r\n                  expandedUsesInline() &&\r\n                    isEditor() &&\r\n                    rowIndex === 0 &&\r\n                    !isRowExpanded(row, rowIndex) &&\r\n                    editorExpandedPreviewContext();\r\n                  as expandedContext\r\n                ) {\r\n                  <tr\r\n                    class=\"table-expanded-inline-row table-expanded-inline-row--preview\"\r\n                    [attr.data-row-key]=\"expandedContext.key\"\r\n                  >\r\n                    <td\r\n                      class=\"table-expanded-inline-row__cell\"\r\n                      [attr.colspan]=\"expandedInlineColspan()\"\r\n                    >\r\n                      <div class=\"table-expanded-inline-row__content\">\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n                          [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n                        />\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                }\r\n              }\r\n\r\n              @if (virtualScrollEnabled() && virtualBottomSpacerHeight() > 0) {\r\n                <tr class=\"table-virtual-spacer-row\" aria-hidden=\"true\">\r\n                  <td\r\n                    class=\"table-virtual-spacer-cell\"\r\n                    [attr.colspan]=\"expandedInlineColspan()\"\r\n                    [style.height.px]=\"virtualBottomSpacerHeight()\"\r\n                  ></td>\r\n                </tr>\r\n              }\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <ng-template #expandedContentTemplate let-expandedContext=\"expandedContext\">\r\n        @if (\r\n          expansionEnabled() && isExpandedRowsLoading(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          <div class=\"expanded-row__loading\">\r\n            {{ resolveExpandedLoadingMessage() | uiT: 'Loading details...' }}\r\n          </div>\r\n        } @else if (\r\n          resolveExpandedRowsError(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedError\r\n        ) {\r\n          <div class=\"expanded-row__error\">\r\n            {{ expandedError | uiT: 'Failed to load details.' }}\r\n          </div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n            resolveExpandedTemplateHtml(expandedContext.row, expandedContext.rowIndex);\r\n          as expandedTemplateHtml\r\n        ) {\r\n          <div\r\n            class=\"expanded-row__template\"\r\n            [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n            [innerHTML]=\"expandedTemplateHtml\"\r\n            (click)=\"\r\n              onTemplateContentClick(\r\n                $event,\r\n                expandedContext.row,\r\n                resolveExpandedRows(expandedContext.row, expandedContext.rowIndex),\r\n                expandedContext.row\r\n              )\r\n            \"\r\n          ></div>\r\n        } @else if (\r\n          expansionEnabled() &&\r\n          shouldRenderExpandedNestedTable(expandedContext.row, expandedContext.rowIndex)\r\n        ) {\r\n          @let expandedRows = resolveExpandedRows(expandedContext.row, expandedContext.rowIndex);\r\n          <table class=\"nested-table\">\r\n            <thead>\r\n              <tr>\r\n                @for (\r\n                  column of expandedDataColumns();\r\n                  track column.id || column.key;\r\n                  let columnIndex = $index\r\n                ) {\r\n                  <th\r\n                    [class]=\"columnAlignClass(column)\"\r\n                    [class.column-focused]=\"isExpandedColumnFocused(column, columnIndex)\"\r\n                    [class.nested-table__header--focusable]=\"isEditor()\"\r\n                    [style.width]=\"columnWidthStyle(column)\"\r\n                    [tabIndex]=\"isEditor() ? 0 : -1\"\r\n                    (focus)=\"onExpandedColumnHeaderFocus(column, columnIndex)\"\r\n                    (click)=\"onExpandedColumnHeaderClick(column, columnIndex, $event)\"\r\n                  >\r\n                    @if (showColumnHeaderLabel(column)) {\r\n                      {{ resolveColumnLabel(column) }}\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (hasExpandedRowActions()) {\r\n                  <th class=\"action-column\">\r\n                    @if (showActionsHeaderLabel()) {\r\n                      {{ model().actionsLabel || ('table.actions' | uiT: 'Actions') }}\r\n                    }\r\n                  </th>\r\n                }\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (expandedRow of expandedRows; track $index) {\r\n                <tr>\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td\r\n                      [attr.data-label]=\"resolveColumnDataLabel(column)\"\r\n                      [class]=\"columnAlignClass(column)\"\r\n                    >\r\n                      <div class=\"table-cell-content\">\r\n                        <div class=\"table-cell-content__value\">\r\n                          @if (isToggleSwitchColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--toggle nvb-toggle-switch\"\r\n                              [class.nvb-toggle-switch--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-toggle-switch__input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                              <span class=\"nvb-toggle-switch__track\">\r\n                                <span class=\"nvb-toggle-switch__thumb\"></span>\r\n                              </span>\r\n                            </label>\r\n                          } @else if (isSingleCheckboxColumn(column)) {\r\n                            <label\r\n                              class=\"table-interactive-control table-interactive-control--checkbox nvb-single-checkbox\"\r\n                              [class.nvb-single-checkbox--disabled]=\"\r\n                                !isInteractiveColumnEnabled(\r\n                                  expandedRow,\r\n                                  column,\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                              (click)=\"$event.stopPropagation()\"\r\n                            >\r\n                              <input\r\n                                class=\"nvb-single-checkbox__input nvb-control__checkbox-input\"\r\n                                type=\"checkbox\"\r\n                                [checked]=\"\r\n                                  resolveInteractiveColumnChecked(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [disabled]=\"\r\n                                  !isInteractiveColumnEnabled(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                                [attr.aria-label]=\"resolveInteractiveColumnAriaLabel(column)\"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"\r\n                                  onInteractiveColumnChange(\r\n                                    expandedRow,\r\n                                    column,\r\n                                    $event,\r\n                                    expandedContext.row\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </label>\r\n                          } @else if (\r\n                            resolveStatusBadge(expandedRow, column);\r\n                            as expandedStatusBadge\r\n                          ) {\r\n                            <span\r\n                              class=\"status-pill\"\r\n                              [class]=\"'status-pill status-pill--' + expandedStatusBadge.tone\"\r\n                              [class.status-pill--rounded]=\"expandedStatusBadge.rounded\"\r\n                            >\r\n                              @if (expandedStatusBadge.icon) {\r\n                                <nvb-icon\r\n                                  class=\"status-pill__icon\"\r\n                                  [name]=\"expandedStatusBadge.icon\"\r\n                                ></nvb-icon>\r\n                              }\r\n                              {{ expandedStatusBadge.label }}\r\n                            </span>\r\n                          } @else if (resolveCellHtml(expandedRow, column); as expandedCellHtml) {\r\n                            <div\r\n                              class=\"table-template-host\"\r\n                              [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                              [innerHTML]=\"expandedCellHtml\"\r\n                              (click)=\"\r\n                                onTemplateContentClick(\r\n                                  $event,\r\n                                  expandedRow,\r\n                                  resolveCellValue(expandedRow, column),\r\n                                  expandedContext.row\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          } @else {\r\n                            {{ resolveCellText(expandedRow, column) }}\r\n                          }\r\n                        </div>\r\n\r\n                        @if (!isInteractiveColumn(column)) {\r\n                          @if (\r\n                            visibleColumnCellActions(expandedRow, column, expandedContext.row);\r\n                            as columnActions\r\n                          ) {\r\n                            @if (columnActions.length > 0) {\r\n                              <div\r\n                                class=\"table-cell-actions\"\r\n                                [class.table-cell-actions--icon]=\"\r\n                                  columnCellActionsUseIconButtons(column)\r\n                                \"\r\n                                (click)=\"$event.stopPropagation()\"\r\n                              >\r\n                                @if (columnCellActionsUseDropdown(column)) {\r\n                                  <nvb-select\r\n                                    class=\"table-cell-actions__select\"\r\n                                    (change)=\"\r\n                                      onColumnCellActionSelect(\r\n                                        expandedRow,\r\n                                        column,\r\n                                        $event,\r\n                                        expandedContext.row\r\n                                      )\r\n                                    \"\r\n                                  >\r\n                                    <option value=\"\">\r\n                                      {{ resolveColumnCellActionsPlaceholder(column) }}\r\n                                    </option>\r\n                                    @for (action of columnActions; track action.id || $index) {\r\n                                      <option [value]=\"'id:' + (action.id || $index)\">\r\n                                        {{ resolveActionLabel(action) }}\r\n                                      </option>\r\n                                    }\r\n                                  </nvb-select>\r\n                                } @else {\r\n                                  @for (action of columnActions; track action.id || $index) {\r\n                                    <button\r\n                                      type=\"button\"\r\n                                      class=\"table-cell-actions__button\"\r\n                                      [class.table-cell-actions__button--icon-only]=\"\r\n                                        columnCellActionsUseIconButtons(column) ||\r\n                                        actionHidesText(action)\r\n                                      \"\r\n                                      [attr.title]=\"resolveActionLabel(action)\"\r\n                                      [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                      (click)=\"\r\n                                        runColumnCellAction(\r\n                                          action,\r\n                                          expandedRow,\r\n                                          $event,\r\n                                          column,\r\n                                          expandedContext.row\r\n                                        )\r\n                                      \"\r\n                                    >\r\n                                      @if (resolveActionIcon(action); as actionIcon) {\r\n                                        <nvb-icon\r\n                                          class=\"table-action-icon\"\r\n                                          [name]=\"actionIcon\"\r\n                                        ></nvb-icon>\r\n                                      }\r\n                                      @if (\r\n                                        actionRendersText(\r\n                                          action,\r\n                                          columnCellActionsUseButtons(column)\r\n                                        )\r\n                                      ) {\r\n                                        <span>{{ resolveActionLabel(action) }}</span>\r\n                                      }\r\n                                    </button>\r\n                                  }\r\n                                }\r\n                              </div>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">\r\n                      @if (\r\n                        visibleExpandedRowActions(expandedContext.row, expandedRow);\r\n                        as expandedActions\r\n                      ) {\r\n                        @if (expandedActions.length > 0) {\r\n                          @if (rowActionsUseDropdown()) {\r\n                            <nvb-select\r\n                              class=\"table-cell-actions__select\"\r\n                              (change)=\"\r\n                                onExpandedRowActionSelect(expandedContext.row, expandedRow, $event)\r\n                              \"\r\n                            >\r\n                              <option value=\"\">\r\n                                {{ resolveExpandedRowActionsPlaceholder() }}\r\n                              </option>\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <option [value]=\"'id:' + (action.id || $index)\">\r\n                                  {{ resolveActionLabel(action) }}\r\n                                </option>\r\n                              }\r\n                            </nvb-select>\r\n                          } @else {\r\n                            <div\r\n                              class=\"expanded-row__actions\"\r\n                              [class.table-cell-actions--icon]=\"rowActionsUseIconButtons()\"\r\n                            >\r\n                              @for (action of expandedActions; track action.id || $index) {\r\n                                <button\r\n                                  type=\"button\"\r\n                                  class=\"expanded-row__action\"\r\n                                  [class.expanded-row__action--icon-only]=\"\r\n                                    rowActionsUseIconButtons() || actionHidesText(action)\r\n                                  \"\r\n                                  [attr.title]=\"resolveActionLabel(action)\"\r\n                                  [attr.aria-label]=\"resolveActionLabel(action)\"\r\n                                  (click)=\"\r\n                                    runExpandedRowAction(\r\n                                      action,\r\n                                      expandedContext.row,\r\n                                      expandedRow,\r\n                                      $event\r\n                                    )\r\n                                  \"\r\n                                >\r\n                                  @if (resolveActionIcon(action); as actionIcon) {\r\n                                    <nvb-icon\r\n                                      class=\"table-action-icon\"\r\n                                      [name]=\"actionIcon\"\r\n                                    ></nvb-icon>\r\n                                  }\r\n                                  @if (actionRendersText(action, rowActionsUseButtons())) {\r\n                                    <span>{{ resolveActionLabel(action) }}</span>\r\n                                  }\r\n                                </button>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        } @else {\r\n                          <span class=\"row-actions__empty\">-</span>\r\n                        }\r\n                      }\r\n                    </td>\r\n                  }\r\n                </tr>\r\n              }\r\n              @if (isEditor() && expandedContext.rowIndex < 0 && expandedRows.length === 0) {\r\n                <tr class=\"nested-table__placeholder-row\" aria-hidden=\"true\">\r\n                  @for (column of expandedDataColumns(); track column.id || column.key) {\r\n                    <td [class]=\"columnAlignClass(column)\">&nbsp;</td>\r\n                  }\r\n                  @if (hasExpandedRowActions()) {\r\n                    <td class=\"action-cell\">&nbsp;</td>\r\n                  }\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        } @else if (detailColumns().length > 0) {\r\n          <div class=\"expanded-row__details\">\r\n            @for (column of detailColumns(); track column.id || column.key) {\r\n              <div class=\"expanded-row__detail-item\">\r\n                <div class=\"expanded-row__detail-label\">{{ resolveDetailLabel(column) }}</div>\r\n                <div class=\"expanded-row__detail-value\">\r\n                  @if (resolveStatusBadge(expandedContext.row, column); as detailStatusBadge) {\r\n                    <span\r\n                      class=\"status-pill\"\r\n                      [class]=\"'status-pill status-pill--' + detailStatusBadge.tone\"\r\n                      [class.status-pill--rounded]=\"detailStatusBadge.rounded\"\r\n                    >\r\n                      @if (detailStatusBadge.icon) {\r\n                        <nvb-icon\r\n                          class=\"status-pill__icon\"\r\n                          [name]=\"detailStatusBadge.icon\"\r\n                        ></nvb-icon>\r\n                      }\r\n                      {{ detailStatusBadge.label }}\r\n                    </span>\r\n                  } @else if (resolveCellHtml(expandedContext.row, column); as detailCellHtml) {\r\n                    <div\r\n                      class=\"table-template-host\"\r\n                      [attr.data-nvb-template-scope]=\"templateScopeId\"\r\n                      [innerHTML]=\"detailCellHtml\"\r\n                      (click)=\"\r\n                        onTemplateContentClick(\r\n                          $event,\r\n                          expandedContext.row,\r\n                          resolveCellValue(expandedContext.row, column),\r\n                          expandedContext.row\r\n                        )\r\n                      \"\r\n                    ></div>\r\n                  } @else {\r\n                    {{ resolveCellText(expandedContext.row, column) }}\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"expanded-row__empty\">\r\n            {{ resolveExpandedEmptyMessage() | uiT: 'No nested rows' }}\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      @if (expandedUsesSidePanel() && activeExpandedPanelContext(); as expandedContext) {\r\n        <aside class=\"table-detail-panel\" [attr.data-row-key]=\"expandedContext.key\">\r\n          <div class=\"table-detail-panel__header\">\r\n            <strong class=\"table-detail-panel__title\">{{\r\n              resolveDetailsPanelTitle() | uiT: 'Detailed info'\r\n            }}</strong>\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-detail-panel__close\"\r\n              (click)=\"closeExpandedRowPanel($event)\"\r\n              [attr.aria-label]=\"'table.closeDetails' | uiT: 'Close details'\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">close</span>\r\n            </button>\r\n          </div>\r\n\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"expandedContentTemplate\"\r\n            [ngTemplateOutletContext]=\"{ expandedContext: expandedContext }\"\r\n          />\r\n        </aside>\r\n      }\r\n    </div>\r\n\r\n    @if (model().paginator) {\r\n      <div\r\n        class=\"table-paginator\"\r\n        role=\"navigation\"\r\n        [attr.aria-label]=\"'table.pagination.label' | uiT: 'Table pagination'\"\r\n        [class.table-paginator--flat]=\"flatFooterSurface()\"\r\n        [class.table-paginator--compact]=\"paginatorStyle() === 'compact'\"\r\n        [class.table-paginator--segmented]=\"paginatorStyle() === 'segmented'\"\r\n        [class.table-paginator--align-start]=\"paginatorAlign() === 'start'\"\r\n        [class.table-paginator--align-center]=\"paginatorAlign() === 'center'\"\r\n      >\r\n        <div class=\"table-paginator__content\">\r\n          <div class=\"table-paginator__controls\">\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"firstPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.pagination.first' | uiT: 'First page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">first_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_left</span>\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pageIndex() <= 0\"\r\n                [attr.aria-label]=\"'table.prev' | uiT: 'Prev'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_left</span>\r\n                } @else {\r\n                  {{ model().prevLabel || ('table.prev' | uiT: 'Prev') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showNumericPaginator()) {\r\n              <div class=\"table-paginator__pages\">\r\n                @for (page of visiblePageNumbers(); track page) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-paginator__page\"\r\n                    [class.table-paginator__page--active]=\"page === pageIndex()\"\r\n                    (click)=\"goToPage(page)\"\r\n                    [disabled]=\"page === pageIndex()\"\r\n                    [attr.aria-label]=\"'Page ' + (page + 1)\"\r\n                    [attr.aria-current]=\"page === pageIndex() ? 'page' : null\"\r\n                  >\r\n                    {{ page + 1 }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (showPrevNextPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav\"\r\n                [class.table-paginator__nav--icon]=\"useIconOnlyPaginatorNav()\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.next' | uiT: 'Next'\"\r\n              >\r\n                @if (useIconOnlyPaginatorNav()) {\r\n                  <span class=\"material-symbols-outlined\">chevron_right</span>\r\n                } @else {\r\n                  {{ model().nextLabel || ('table.next' | uiT: 'Next') }}\r\n                }\r\n              </button>\r\n            }\r\n\r\n            @if (showFirstLastPaginator()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"table-paginator__nav table-paginator__nav--icon\"\r\n                (click)=\"lastPage()\"\r\n                [disabled]=\"pageIndex() >= totalPages() - 1\"\r\n                [attr.aria-label]=\"'table.pagination.last' | uiT: 'Last page'\"\r\n              >\r\n                @if (paginatorStyle() === 'default') {\r\n                  <span class=\"material-symbols-outlined\">last_page</span>\r\n                } @else {\r\n                  <span class=\"material-symbols-outlined\">keyboard_double_arrow_right</span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n\r\n          @if (showPageMeta()) {\r\n            <span class=\"table-paginator__meta\">{{ pageMeta() }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (showPageSizeSelector()) {\r\n          <div class=\"table-paginator__size\">\r\n            <nvb-select\r\n              class=\"table-paginator__size-select\"\r\n              [ngModel]=\"pageSize()\"\r\n              (ngModelChange)=\"setPageSize($event)\"\r\n              [attr.aria-label]=\"'table.pagination.pageSize' | uiT: 'Rows per page'\"\r\n            >\r\n              @for (size of pageSizeOptions(); track size) {\r\n                <option [ngValue]=\"size\">{{ size }}</option>\r\n              }\r\n            </nvb-select>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (openExportDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeExportSelectionDialog()\"></div>\r\n      <section\r\n        class=\"table-dialog\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-export-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-export-dialog-title\">\r\n            {{ 'table.export.dialog.title' | uiT: 'Export columns' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeExportSelectionDialog()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <label class=\"table-export__scope\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"exportScope() === 'all'\"\r\n              (change)=\"onExportScopeToggle($event)\"\r\n            />\r\n            <span>{{ 'table.export.scope.all' | uiT: 'All data' }}</span>\r\n          </label>\r\n\r\n          <label class=\"table-dialog__select-all\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"nvb-control__checkbox-input\"\r\n              [checked]=\"allExportColumnsSelected()\"\r\n              (change)=\"toggleAllExportColumns($event)\"\r\n            />\r\n            <span>{{ 'table.export.columns.all' | uiT: 'Select all columns' }}</span>\r\n          </label>\r\n\r\n          <div class=\"table-export__columns\">\r\n            @for (column of exportColumns(); track column.id || column.key) {\r\n              <label class=\"table-export__column\">\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"nvb-control__checkbox-input\"\r\n                  [checked]=\"isExportColumnSelected(column)\"\r\n                  (change)=\"onExportColumnSelectionChange(column, $event)\"\r\n                />\r\n                <span>{{ resolveColumnLabel(column) }}</span>\r\n              </label>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('csv', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">description</span>\r\n            <span>{{ 'table.export.csv' | uiT: 'CSV' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('excel', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">table_view</span>\r\n            <span>{{ 'table.export.excel' | uiT: 'Excel' }}</span>\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-export__action\"\r\n            [disabled]=\"exportBusy() || selectedExportColumns().length === 0\"\r\n            (click)=\"runExportFromDialog('pdf', $event)\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">picture_as_pdf</span>\r\n            <span>{{ 'table.export.pdf' | uiT: 'PDF' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openColumnSettingsDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeColumnSettings()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--column-settings\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-column-settings-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-column-settings-dialog-title\">\r\n            {{ columnSettingsDialogTitle() | uiT: 'Columns settings' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeColumnSettings()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          <div class=\"table-column-settings\">\r\n            <div class=\"table-column-settings__actions\">\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"showAllColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"visibility\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.showAll' | uiT: 'Show all' }}</span>\r\n              </button>\r\n              <button type=\"button\" class=\"table-toolbar__button\" (click)=\"resetColumnSettings()\">\r\n                <nvb-icon class=\"table-action-icon\" name=\"restart_alt\"></nvb-icon>\r\n                <span>{{ 'table.columns.settings.reset' | uiT: 'Reset' }}</span>\r\n              </button>\r\n            </div>\r\n\r\n            <div\r\n              class=\"table-column-settings__list\"\r\n              cdkDropList\r\n              [cdkDropListData]=\"columnSettingsDraft()\"\r\n              (cdkDropListDropped)=\"reorderColumnSettingsRows($event)\"\r\n            >\r\n              @for (column of columnSettingsDraft(); track column.key) {\r\n                <article class=\"table-column-settings__item\" cdkDrag>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"table-column-settings__drag\"\r\n                    cdkDragHandle\r\n                    [attr.aria-label]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                    [attr.title]=\"'table.columns.settings.reorder' | uiT: 'Reorder column'\"\r\n                  >\r\n                    <nvb-icon class=\"table-action-icon\" name=\"drag_indicator\"></nvb-icon>\r\n                  </button>\r\n                  <div class=\"table-column-settings__content\">\r\n                    <label class=\"table-column-settings__toggle\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        class=\"nvb-control__checkbox-input\"\r\n                        [checked]=\"column.visible\"\r\n                        (change)=\"\r\n                          setColumnSettingsVisibility(column.key, $any($event.target).checked)\r\n                        \"\r\n                      />\r\n                      <span>{{ column.label || column.key }}</span>\r\n                    </label>\r\n\r\n                    <label class=\"table-column-settings__width\">\r\n                      <div class=\"table-column-settings__width-header\">\r\n                        <span>{{ 'table.columns.settings.width' | uiT: 'Plotis' }}</span>\r\n                        <div class=\"table-column-settings__width-meta\">\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"table-column-settings__width-reset\"\r\n                            [class.table-column-settings__width-reset--active]=\"\r\n                              !hasColumnSettingsCustomWidth(column)\r\n                            \"\r\n                            (click)=\"resetColumnSettingsWidth(column.key)\"\r\n                          >\r\n                            {{ 'table.columns.settings.auto' | uiT: 'Automatinis' }}\r\n                          </button>\r\n                          <span class=\"table-column-settings__width-value\">\r\n                            {{ resolveColumnSettingsWidthDisplay(column) }}\r\n                          </span>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"table-column-settings__width-range\">\r\n                        <input\r\n                          type=\"range\"\r\n                          [min]=\"columnSettingsWidthMin\"\r\n                          [max]=\"columnSettingsWidthMax\"\r\n                          [step]=\"columnSettingsWidthStep\"\r\n                          [value]=\"resolveColumnSettingsWidthSliderValue(column)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (input)=\"setColumnSettingsWidth(column.key, $any($event.target).value)\"\r\n                        />\r\n                      </div>\r\n                    </label>\r\n                  </div>\r\n\r\n                  <div class=\"table-column-settings__order\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowFirst(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, -1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveUp' | uiT: 'Move up'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_upward\"></nvb-icon>\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"table-column-settings__move\"\r\n                      [disabled]=\"isColumnSettingsRowLast(column.key)\"\r\n                      (click)=\"moveColumnSettingsRow(column.key, 1)\"\r\n                      [attr.aria-label]=\"'table.columns.settings.moveDown' | uiT: 'Move down'\"\r\n                    >\r\n                      <nvb-icon class=\"table-action-icon\" name=\"arrow_downward\"></nvb-icon>\r\n                    </button>\r\n                  </div>\r\n                </article>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <footer class=\"table-dialog__footer\">\r\n          <button type=\"button\" class=\"table-toolbar__button\" (click)=\"closeColumnSettings()\">\r\n            {{ 'table.columns.settings.cancel' | uiT: 'Cancel' }}\r\n          </button>\r\n          @if (showColumnSettingsSaveAction()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button\"\r\n              (click)=\"saveColumnSettings($event)\"\r\n            >\r\n              <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n              <span>{{ 'table.columns.settings.save' | uiT: 'Save settings' }}</span>\r\n            </button>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-toolbar__button table-toolbar__button--primary\"\r\n            (click)=\"applyColumnSettings($event)\"\r\n          >\r\n            <nvb-icon class=\"table-action-icon\" name=\"save\"></nvb-icon>\r\n            <span>{{ 'table.columns.settings.apply' | uiT: 'Apply settings' }}</span>\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    }\r\n\r\n    @if (openSavedFiltersDialog()) {\r\n      <div class=\"table-dialog-backdrop\" (click)=\"closeSavedFilters()\"></div>\r\n      <section\r\n        class=\"table-dialog table-dialog--filters\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"table-saved-filters-dialog-title\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <header class=\"table-dialog__header\">\r\n          <h4 id=\"table-saved-filters-dialog-title\">\r\n            {{ 'table.filters.dialog.title' | uiT: 'Saved filters' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__close\"\r\n            (click)=\"closeSavedFilters()\"\r\n            [attr.aria-label]=\"'common.close' | uiT: 'Close'\"\r\n          >\r\n            <span class=\"material-symbols-outlined\">close</span>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"table-dialog__tabs\" role=\"tablist\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'create'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'create'\"\r\n            (click)=\"setSavedFilterDialogTab('create')\"\r\n          >\r\n            {{ 'table.filters.dialog.new' | uiT: 'Create new' }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"table-dialog__tab\"\r\n            role=\"tab\"\r\n            [class.table-dialog__tab--active]=\"savedFilterDialogTab() === 'list'\"\r\n            [attr.aria-selected]=\"savedFilterDialogTab() === 'list'\"\r\n            (click)=\"setSavedFilterDialogTab('list')\"\r\n          >\r\n            {{ 'table.filters.dialog.list' | uiT: 'Filter list' }}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"table-dialog__body\">\r\n          @if (savedFilterDialogTab() === 'create') {\r\n            <div class=\"table-filter-form\">\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.name' | uiT: 'Name' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterName()\"\r\n                  (ngModelChange)=\"savedFilterName.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.description' | uiT: 'Description' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterDescription()\"\r\n                  (ngModelChange)=\"savedFilterDescription.set($event)\"\r\n                />\r\n              </label>\r\n\r\n              <label class=\"table-filter-form__row\">\r\n                <span>{{ 'table.filters.code' | uiT: 'Code' }}</span>\r\n                <input\r\n                  type=\"text\"\r\n                  [ngModel]=\"savedFilterCode()\"\r\n                  (ngModelChange)=\"savedFilterCode.set($event)\"\r\n                />\r\n              </label>\r\n            </div>\r\n          } @else {\r\n            <div class=\"table-filter-list\">\r\n              @if (savedFiltersLoading()) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.loading' | uiT: 'Loading...' }}\r\n                </div>\r\n              } @else if (savedFilters().length === 0) {\r\n                <div class=\"table-filter-list__empty\">\r\n                  {{ 'table.filters.empty' | uiT: 'No saved filters' }}\r\n                </div>\r\n              } @else {\r\n                @for (savedFilter of savedFilters(); track savedFilter.id) {\r\n                  <article class=\"table-filter-list__item\">\r\n                    <div class=\"table-filter-list__meta\">\r\n                      <strong>{{ savedFilter.name }}</strong>\r\n                      @if (savedFilter.description) {\r\n                        <span>{{ savedFilter.description }}</span>\r\n                      }\r\n                      @if (savedFilter.code) {\r\n                        <small>{{ savedFilter.code }}</small>\r\n                      }\r\n                    </div>\r\n                    <div class=\"table-filter-list__actions\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"applySavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.apply' | uiT: 'Apply' }}\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"table-toolbar__button\"\r\n                        (click)=\"deleteSavedFilter(savedFilter, $event)\"\r\n                      >\r\n                        {{ 'table.filters.delete' | uiT: 'Delete' }}\r\n                      </button>\r\n                    </div>\r\n                  </article>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (savedFilterDialogTab() === 'create') {\r\n          <footer class=\"table-dialog__footer table-dialog__footer--single\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"table-toolbar__button table-toolbar__button--primary\"\r\n              [disabled]=\"savedFilterBusy() || !savedFilterName().trim()\"\r\n              (click)=\"saveCurrentFilter($event)\"\r\n            >\r\n              <span class=\"material-symbols-outlined\">save</span>\r\n              <span>{{ 'table.filters.save' | uiT: 'Save filter' }}</span>\r\n            </button>\r\n          </footer>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</element-wrapper>\r\n", styles: [":host{display:block;width:100%}.table-shell{--table-control-height: 32px;--table-control-radius: var(--nvb-control-radius, 4px);--table-control-font-size: 13px;--table-control-padding-x: 10px;--table-surface-border: color-mix( in oklab, var(--color-neutral-300) 78%, var(--color-surface-mix-target, white) );--table-surface-border-strong: color-mix( in oklab, var(--color-neutral-300) 92%, var(--color-surface-mix-target, white) );--table-surface-radius: var(--nvb-table-radius, var(--nvb-card-radius, var(--radius-md, 4px)));--table-sticky-header-offset: 0px;position:relative;background:transparent;container-type:inline-size;display:flex;flex-direction:column;gap:0;font-family:var(--nvb-font-family)}.table-shell--editor .table-toolbar{z-index:1}.table-shell--editor .table-quick-search,.table-shell--editor .table-toolbar__button--detailed-toggle,.table-shell--editor .table-export,.table-shell--editor .table-header-menu,.table-shell--editor .table-header-actions,.table-shell--editor .table-detailed-search{pointer-events:none}.table-shell--editor .table-toolbar__add-element,.table-shell--editor .table-toolbar__drop-item--editor{pointer-events:auto}.table-sticky-header{display:flex;flex-direction:column;gap:0}.table-sticky-header--enabled{position:sticky;top:0;z-index:38}.table-sticky-header--enabled.table-sticky-header--pinned{background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8)}.table-sticky-header--enabled.table-sticky-header--pinned .table-toolbar--flat{background:var(--color-neutral-000)}.table-sticky-clone{position:absolute;inset-inline:0;top:100%;z-index:37;pointer-events:none}.table-sticky-clone__viewport{overflow:hidden;background:var(--color-neutral-000);border:1px solid var(--table-surface-border);border-top:none;box-shadow:var(--nvb-shadow-8)}.table-sticky-clone__table{margin:0;width:max-content;min-width:100%;transform:translate(0)}.table-sticky-clone__table thead th{position:static;top:auto;z-index:auto}.table-sticky-clone__row th{cursor:default}.table-sticky-clone__row th.sortable{cursor:pointer}.table-frame{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);overflow:hidden;background:var(--color-neutral-000);display:flex;align-items:stretch;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent),inset 0 1px color-mix(in oklab,var(--color-neutral-000) 84%,transparent)}.table-frame__scroller{flex:1 1 auto;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden}.table-frame__scroller--virtual{overflow-y:auto;overscroll-behavior:contain}.table-frame--with-toolbar{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.table-frame--with-paginator{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.table-toolbar{display:flex;position:relative;z-index:32;justify-content:space-between;align-items:center;gap:8px;padding:8px;border:1px solid var(--table-surface-border);border-bottom:none;border-top-left-radius:var(--table-surface-radius);border-top-right-radius:var(--table-surface-radius);background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));flex-wrap:wrap}.table-toolbar--flat{padding:0 0 8px;border:none;border-radius:0;background:transparent}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__center{flex:1 1 260px;min-width:180px}.table-toolbar__center--controls-only{justify-content:flex-end}.table-toolbar__right{justify-content:flex-end;flex:0 0 auto;margin-left:auto}.table-toolbar__actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-toolbar__button,.table-export__action,.table-cell-actions__button,.row-actions__inline-button,.row-actions__toggle,.selection-actions__toggle,.table-detailed-search__remove,.table-quick-search__apply,.table-quick-search__clear,.table-detailed-search__multi-select-trigger,.table-detailed-search__date-trigger,.table-detailed-search__date-header>button,.table-detailed-search__date-actions>button{font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500);line-height:1.3;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease;outline:0}.table-toolbar__button:focus-visible,.table-export__action:focus-visible,.table-cell-actions__button:focus-visible,.row-actions__inline-button:focus-visible,.row-actions__toggle:focus-visible,.selection-actions__toggle:focus-visible,.table-detailed-search__remove:focus-visible,.table-quick-search__apply:focus-visible,.table-quick-search__clear:focus-visible,.table-detailed-search__multi-select-trigger:focus-visible,.table-detailed-search__date-trigger:focus-visible,.table-detailed-search__date-header>button:focus-visible,.table-detailed-search__date-actions>button:focus-visible{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-toolbar,.table-detailed-search,.table-paginator{--nvb-input-height: var(--table-control-height);--nvb-input-radius: var(--table-control-radius);--nvb-select-trigger-border-color: var(--table-surface-border-strong);--nvb-select-trigger-padding-inline-start: var(--table-control-padding-x);--nvb-select-trigger-padding-inline-end: 26px;--nvb-select-arrow-inset-inline-end: 9px;--nvb-select-menu-border: var(--table-surface-border-strong);--nvb-select-menu-radius: var(--table-control-radius);--nvb-select-option-min-height: 28px;--nvb-select-option-padding-block: 5px;font-size:var(--table-control-font-size)}.table-toolbar__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-toolbar__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-toolbar__button--header-action{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-300);background:var(--color-neutral-000);color:var(--color-neutral-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary{border-color:var(--color-primary-300);background:var(--color-neutral-000);color:var(--color-primary-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050);border-color:var(--color-primary-400)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk{border-color:var(--color-risk-300);background:var(--color-neutral-000);color:var(--color-risk-700)}.table-toolbar__button--outlined.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050);border-color:var(--color-risk-400)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-neutral:hover{border-color:var(--color-neutral-800);background:var(--color-neutral-800)}.table-toolbar__button--filled.table-toolbar__button--tone-primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-primary:hover{border-color:var(--color-primary-600);background:var(--color-primary-600)}.table-toolbar__button--filled.table-toolbar__button--tone-risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.table-toolbar__button--filled.table-toolbar__button--tone-risk:hover{border-color:var(--color-risk-600);background:var(--color-risk-600)}.table-toolbar__button--text{border-color:transparent;background:transparent;box-shadow:none}.table-toolbar__button--text.table-toolbar__button--tone-neutral{color:var(--color-neutral-700)}.table-toolbar__button--text.table-toolbar__button--tone-neutral:hover{background:var(--color-neutral-100)}.table-toolbar__button--text.table-toolbar__button--tone-primary{color:var(--color-primary-700)}.table-toolbar__button--text.table-toolbar__button--tone-primary:hover{background:var(--color-primary-050)}.table-toolbar__button--text.table-toolbar__button--tone-risk{color:var(--color-risk-700)}.table-toolbar__button--text.table-toolbar__button--tone-risk:hover{background:var(--color-risk-050)}.table-toolbar__button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.table-toolbar__button span.material-symbols-outlined{font-size:16px;line-height:1}.table-action-icon{font-size:16px}.table-toolbar__button--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-neutral-000)}.table-toolbar__button--primary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)}.table-toolbar__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-toolbar__badge{min-width:16px;height:16px;border-radius:999px;background:var(--color-primary-500);color:var(--color-neutral-000);display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 4px}.table-toolbar__custom{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.table-toolbar__dropzone{position:relative;z-index:24;width:auto;max-width:100%;flex:0 1 auto;min-width:0;min-height:var(--table-control-height);display:flex;align-items:center;gap:6px;overflow:visible}.table-toolbar__dropzone--center{width:100%;flex:1 1 auto}.table-toolbar__center--controls-only .table-toolbar__dropzone--center{width:auto;flex:0 0 auto}.table-toolbar__add-element{position:relative;display:inline-flex;align-items:center;max-width:none}.table-toolbar__button--add-element{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;justify-content:center}.table-toolbar__button--add-element span{font-size:16px}.table-toolbar__add-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;max-height:280px;overflow:auto;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:4px;z-index:42}.table-toolbar__add-menu-item{width:100%;border:none;background:transparent;border-radius:6px;padding:8px 10px;text-align:left;color:var(--color-neutral-700);font-size:13px;cursor:pointer}.table-toolbar__add-menu-item:hover{background:color-mix(in oklab,var(--color-primary-050) 70%,var(--color-surface-mix-target, white))}.table-toolbar__drop-items{width:auto;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow:visible}.table-toolbar__center--controls-only .table-toolbar__drop-items{flex:0 0 auto}.table-toolbar__drop-item{position:relative;min-width:0;max-width:none;flex:0 0 auto;border:none;border-radius:0;background:transparent;padding:0}.table-toolbar__drop-item runtime-lazy-element-outlet{display:block;width:auto;min-width:0}.table-toolbar__drop-item--editor{cursor:pointer;padding:5px 27px 5px 5px}.table-toolbar__drop-item--editor .table-toolbar__drop-remove{right:5px}.table-toolbar__drop-item--focused{border-radius:var(--table-control-radius);background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-primary-500) 46%,transparent)}.table-toolbar__drop-item--editor runtime-lazy-element-outlet{pointer-events:none}.table-toolbar__drop-remove{position:absolute;top:50%;right:0;transform:translateY(-50%);width:18px;min-width:18px;height:18px;border:1px solid var(--color-neutral-200);border-radius:5px;background:var(--color-neutral-000);color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-toolbar__drop-remove span{font-size:14px}.table-toolbar__drop-remove:hover{border-color:var(--color-risk-300);color:var(--color-risk-600);background:var(--color-risk-050)}.table-toolbar__drop-placeholder{width:100%;font-size:12px;color:var(--color-neutral-500);padding:2px 4px 4px}.table-toolbar__drop-item ::ng-deep .field{gap:0}.table-toolbar__drop-item ::ng-deep .field__text-warpper{display:none}.table-toolbar__drop-item ::ng-deep .field__description{display:none}.table-header-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.table-header-menu{min-width:220px;display:inline-flex;align-items:center}.table-header-menu--actions{min-width:min(300px,100%)}.table-header-menu__select{width:100%}.table-quick-search{min-width:216px;border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));background:var(--nvb-input-bg, var(--color-neutral-000));border-radius:var(--table-control-radius);min-height:var(--table-control-height);display:inline-flex;align-items:center;padding:0 5px;gap:2px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-quick-search:focus-within{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring)}.table-quick-search input{border:none;outline:none;background:transparent;width:100%;min-height:calc(var(--table-control-height) - 2px);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);color:var(--nvb-input-text-color, var(--color-neutral-700));padding:0 5px}.table-quick-search input:focus{outline:none;box-shadow:none}.table-quick-search input::placeholder{color:var(--nvb-input-placeholder-color, var(--color-neutral-500))}.table-quick-search__clear,.table-quick-search__apply{width:24px;min-width:24px;height:24px;border:1px solid transparent;border-radius:var(--table-control-radius);background:transparent;color:var(--color-neutral-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-quick-search__apply span{font-size:16px}.table-quick-search__apply:hover{background:var(--color-neutral-100)}.table-quick-search__clear span{font-size:16px}.table-quick-search__clear:hover{background:var(--color-neutral-100)}.table-export{position:relative;display:inline-flex;align-items:center;justify-content:flex-end}.table-export__chevron{font-size:16px}.table-export__menu{position:fixed;z-index:var(--nvb-floating-overlay-z-index, 2147483000);top:0;left:0;min-width:268px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);padding:8px;display:flex;flex-direction:column;gap:8px}.table-export__menu--top{transform:translateY(calc(-100% - 6px))}.table-export__scope{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-neutral-700)}.table-export__scope input{width:16px;height:16px}.table-export__actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.table-export__action{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:auto;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.table-export__action span.material-symbols-outlined{font-size:16px}.table-export__action:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-export__action:disabled{opacity:.55;cursor:not-allowed}.table-detailed-search{border:1px solid var(--table-surface-border);border-radius:var(--table-surface-radius);background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;box-shadow:0 1px 2px color-mix(in oklab,var(--color-neutral-900) 4%,transparent)}.table-detailed-search__rows{display:flex;flex-direction:column;gap:8px}.table-detailed-search__row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr) auto;gap:8px;align-items:stretch}.table-detailed-search__row select,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]){border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);padding:0 var(--table-control-padding-x);width:100%;min-width:0;line-height:1.3;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.table-detailed-search__row select:focus,.table-detailed-search__row input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--nvb-input-focus-border-color, var(--color-primary-500));box-shadow:var(--nvb-focus-ring);outline:0}.table-detailed-search__row>*{min-width:0}.table-detailed-search__boolean-toggle{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);display:inline-flex;align-items:center;gap:8px;padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);font-family:var(--nvb-font-family);-webkit-user-select:none;user-select:none}.table-detailed-search__boolean-toggle .nvb-control__checkbox-input{margin:0}.table-detailed-search__remove{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--color-risk-600);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;align-self:stretch}.table-detailed-search__remove span{font-size:16px}.table-detailed-search__remove:hover{background:var(--color-risk-050);border-color:var(--color-risk-300)}.table-detailed-search__actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.table-detailed-search__multi-select{position:relative;min-width:0}.table-detailed-search__multi-select-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__multi-select-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__multi-select-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__multi-select-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__multi-select-placeholder{color:var(--color-neutral-500)}.table-detailed-search__multi-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);max-height:240px;overflow:auto;z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:6px;display:flex;flex-direction:column;gap:2px}.table-detailed-search__multi-select-option{border-radius:var(--nvb-control-radius);min-height:32px;padding:6px 8px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-neutral-700);font-size:13px}.table-detailed-search__multi-select-option:hover{background:var(--color-neutral-100)}.table-detailed-search__multi-select-empty{color:var(--color-neutral-500);font-size:12px;padding:8px}.table-detailed-search__date{position:relative;min-width:0}.table-detailed-search__date-trigger{border:var(--nvb-input-border-width, 1px) solid var(--nvb-input-border-color, var(--table-surface-border-strong));border-radius:var(--table-control-radius);background:var(--nvb-input-bg, var(--color-neutral-000));color:var(--nvb-input-text-color, var(--color-neutral-700));min-height:var(--table-control-height);width:100%;padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.table-detailed-search__date-trigger:hover{background:color-mix(in oklab,var(--nvb-input-bg, white) 88%,var(--color-neutral-050))}.table-detailed-search__date-trigger:focus-visible{background:var(--nvb-input-bg, var(--color-neutral-000))}.table-detailed-search__date-trigger span.material-symbols-outlined{font-size:16px;color:var(--color-neutral-500)}.table-detailed-search__date-placeholder{color:var(--color-neutral-500)}.table-detailed-search__date-menu{position:absolute;top:calc(100% + 4px);left:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-8);width:280px;max-width:min(92vw,320px);z-index:var(--nvb-floating-overlay-z-index, 2147483000);padding:8px;display:flex;flex-direction:column;gap:8px}.table-detailed-search__date-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detailed-search__date-header>span{font-size:13px;font-weight:600;color:var(--color-neutral-700);text-transform:capitalize}.table-detailed-search__date-header>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));border-radius:var(--nvb-control-radius);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detailed-search__date-header>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-detailed-search__date-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-weekdays>span{text-align:center;font-size:11px;color:var(--color-neutral-500);text-transform:uppercase}.table-detailed-search__date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.table-detailed-search__date-day{border:1px solid transparent;border-radius:6px;background:transparent;color:var(--color-neutral-700);min-height:30px;font-size:12px;cursor:pointer}.table-detailed-search__date-day:hover{background:var(--color-neutral-100)}.table-detailed-search__date-day--outside{color:var(--color-neutral-400)}.table-detailed-search__date-day--today{border-color:var(--color-primary-300)}.table-detailed-search__date-day--selected{background:var(--color-primary-500);color:var(--color-neutral-000)}.table-detailed-search__date-actions{display:flex;justify-content:flex-end}.table-detailed-search__date-actions>button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--color-neutral-300));border-radius:6px;background:var(--nvb-control-button-bg, var(--color-neutral-050));color:var(--nvb-control-button-text-color, var(--color-primary-700));min-height:30px;padding:0 10px;cursor:pointer}.table-detailed-search__date-actions>button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.nvb-table{width:100%;border-collapse:collapse;table-layout:auto;background:var(--color-neutral-000)}.nvb-table th,.nvb-table td{border-bottom:1px solid var(--table-surface-border);padding:7px 10px;font-size:13px;line-height:18px;vertical-align:middle}.table-cell-content{display:flex;flex-direction:column;gap:6px;min-width:0}.table-cell-content__value{min-width:0;word-break:break-word}.table-interactive-control{display:inline-flex;align-items:center;justify-content:flex-start;min-height:24px;cursor:pointer}.table-interactive-control--toggle.nvb-toggle-switch,.table-interactive-control--checkbox.nvb-single-checkbox{gap:0;min-height:24px}.table-interactive-control--toggle.nvb-toggle-switch--disabled,.table-interactive-control--checkbox.nvb-single-checkbox--disabled{opacity:.6;cursor:not-allowed}.table-interactive-control--checkbox .nvb-single-checkbox__input{margin:0}.table-interactive-control--toggle .nvb-toggle-switch__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.table-interactive-control--toggle .nvb-toggle-switch__track{position:relative;width:36px;height:20px;border-radius:999px;border:1px solid var(--color-neutral-300);background:var(--color-neutral-100);transition:border-color .16s ease,background-color .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:999px;background:var(--color-neutral-000);box-shadow:0 1px 3px #0003;transition:transform .16s ease}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track{border-color:var(--color-primary-500);background:var(--color-primary-500)}.table-interactive-control--toggle .nvb-toggle-switch__input:checked+.nvb-toggle-switch__track .nvb-toggle-switch__thumb{transform:translate(16px)}.table-template-host{display:block;min-width:0}.table-row-template-cell{min-width:0}.table-row-template-host{display:block;width:100%;min-width:0}.table-cell-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.table-cell-actions__select{min-width:170px}.table-cell-actions__button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;align-items:center;gap:6px;cursor:pointer}.table-cell-actions__button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.table-cell-actions__button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0;justify-content:center}.table-cell-actions__button span.material-symbols-outlined{font-size:16px}.nvb-table th{background:color-mix(in oklab,var(--color-neutral-050) 34%,var(--color-neutral-000));color:var(--color-neutral-800);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}.nvb-table--sticky-header.nvb-table--virtual-scroll thead th{position:sticky;top:var(--table-sticky-header-offset, 0px);z-index:26;background-clip:padding-box}.table-frame--with-toolbar .nvb-table thead th{border-top:1px solid var(--table-surface-border)}.nvb-table th.sorted-active{color:var(--color-primary-700);background:color-mix(in oklab,var(--color-primary-500) 7%,var(--color-surface-mix-target, white))}.nvb-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nvb-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.nvb-table th.sortable:hover{background:color-mix(in oklab,var(--color-neutral-100) 80%,var(--color-surface-mix-target, white))}.sort-icon{font-size:16px;margin-left:4px;vertical-align:middle;color:var(--color-neutral-500)}.sort-icon--active{color:var(--color-primary-600)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.empty-cell{text-align:center;color:var(--color-neutral-500);padding:14px 10px}.action-column,.action-cell{min-width:56px;width:auto;text-align:right}.action-header{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;position:relative}.action-header__label{display:inline-flex;align-items:center;gap:4px}.expand-column,.expand-cell{width:32px;min-width:32px;text-align:center}.expand-toggle{border:1px solid color-mix(in oklab,var(--color-neutral-300) 82%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,var(--color-primary-050) 4%);border-radius:var(--nvb-button-radius, var(--nvb-control-radius, 4px));width:28px;min-width:28px;height:28px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;color:var(--color-neutral-600);box-shadow:0 1px 2px #0000000a}.expand-toggle:hover{border-color:color-mix(in oklab,var(--color-primary-300) 70%,transparent);background:color-mix(in oklab,var(--color-primary-050) 92%,white);color:var(--color-primary-700)}.expand-toggle span{font-size:16px;transition:transform .16s ease}.expand-toggle--expanded span{transform:rotate(90deg)}.expand-toggle--expanded{border-color:color-mix(in oklab,var(--color-primary-300) 78%,transparent);background:color-mix(in oklab,var(--color-primary-050) 88%,white);color:var(--color-primary-700)}.select-column,.select-cell{width:42px;text-align:center}.select-column input,.select-cell input{width:16px;min-width:16px;height:16px;min-height:16px;cursor:pointer}.row-actions{position:relative;display:inline-flex;justify-content:flex-end}.row-actions--inline{gap:6px;flex-wrap:wrap}.row-actions__inline-button{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);display:inline-flex;justify-content:center;align-items:center;gap:6px;cursor:pointer}.row-actions__inline-button:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__inline-button:disabled,.row-actions__toggle:disabled{opacity:.65;cursor:wait}.row-actions__inline-button--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);padding:0}.row-actions__inline-button span.material-symbols-outlined{font-size:16px}.row-actions__toggle{border:var(--nvb-control-button-border-width, 1px) solid var(--nvb-control-button-border-color, var(--table-surface-border-strong));background:var(--nvb-control-button-bg, var(--color-neutral-000));color:var(--nvb-control-button-text-color, var(--color-neutral-700));border-radius:var(--table-control-radius);width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.row-actions__toggle--borderless{border-color:transparent;background:transparent;color:var(--color-neutral-600);box-shadow:none}.row-actions__toggle span{font-size:16px}.row-actions__toggle:hover{border-color:var(--nvb-control-button-hover-border-color, var(--color-primary-300));background:var(--nvb-control-button-hover-bg, var(--color-primary-050));color:var(--nvb-control-button-hover-text-color, var(--color-primary-800))}.row-actions__toggle--borderless:hover{border-color:transparent;background:var(--color-neutral-100);color:var(--color-neutral-800)}.row-actions__menu{position:fixed;top:0;left:0;min-width:160px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.row-actions__menu--top{transform:translateY(calc(-100% - 6px))}.row-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.row-actions__menu button:hover{background:var(--color-neutral-100)}.row-actions__menu button span.material-symbols-outlined{font-size:16px}.row-actions__empty{font-size:11px;color:var(--color-neutral-400)}.nvb-table__row--editing>td{background:color-mix(in srgb,var(--color-primary-050) 72%,white)}.table-inline-edit{width:100%;min-height:34px;border:1px solid var(--color-primary-300);border-radius:var(--nvb-input-radius, var(--radius-md));background:var(--color-neutral-000);color:var(--color-neutral-900);font:inherit;padding:6px 10px}.table-inline-edit--textarea{resize:vertical;min-height:72px}.table-inline-edit:focus{outline:0;border-color:var(--color-primary-500);box-shadow:var(--nvb-focus-ring)}.table-virtual-spacer-row td{padding:0;border:0;background:transparent}.table-virtual-spacer-cell{height:0}.selection-actions{position:relative;display:inline-flex;align-items:center}.selection-actions__toggle{min-width:var(--table-control-height);min-height:var(--table-control-height);border:1px solid var(--color-primary-300);border-radius:var(--table-control-radius);background:var(--color-primary-050);color:var(--color-primary-700);display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 var(--table-control-padding-x);cursor:pointer}.selection-actions__toggle span.material-symbols-outlined{font-size:16px}.selection-actions__count{min-width:16px;height:16px;border-radius:999px;font-size:10px;font-weight:600;color:var(--color-neutral-000);background:var(--color-primary-600);display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.selection-actions__menu{position:fixed;top:0;left:0;min-width:190px;z-index:var(--nvb-floating-overlay-z-index, 2147483000);background:var(--color-neutral-000);border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-menu-radius, var(--nvb-input-radius));box-shadow:var(--nvb-shadow-8);padding:4px;display:flex;flex-direction:column;gap:2px}.selection-actions__menu--top{transform:translateY(calc(-100% - 6px))}.selection-actions__menu button{width:100%;border:none;background:transparent;border-radius:var(--table-control-radius);display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;text-align:left;cursor:pointer;color:var(--color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--table-control-font-size);font-weight:var(--nvb-control-font-weight, 500)}.selection-actions__menu button:hover{background:var(--color-neutral-100)}.selection-actions__menu button span.material-symbols-outlined{font-size:16px}.status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:20px;gap:4px;border-radius:var(--table-control-radius);padding:2px 8px;font-size:11px;line-height:1.2;border:1px solid transparent}.status-pill--rounded{border-radius:999px}.status-pill__icon{font-size:14px}.status-pill--neutral{background:var(--color-neutral-100);color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.status-pill--success{background:color-mix(in oklab,var(--color-success-500) 14%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-success-500) 80%,black);border-color:color-mix(in oklab,var(--color-success-500) 28%,var(--color-surface-mix-target, white))}.status-pill--danger,.status-pill--risk{background:var(--color-risk-050);color:var(--color-risk-700);border-color:var(--color-risk-300)}.status-pill--warning{background:color-mix(in oklab,var(--color-warning-500) 18%,var(--color-surface-mix-target, white));color:color-mix(in oklab,var(--color-warning-500) 80%,black);border-color:color-mix(in oklab,var(--color-warning-500) 36%,var(--color-surface-mix-target, white))}.status-pill--info,.status-pill--primary{background:color-mix(in oklab,var(--color-primary-500) 14%,var(--color-surface-mix-target, white));color:var(--color-primary-700);border-color:color-mix(in oklab,var(--color-primary-500) 30%,var(--color-surface-mix-target, white))}.nvb-table__row--expanded td{background:color-mix(in oklab,var(--color-primary-500) 6%,var(--color-surface-mix-target, white))}.table-expanded-inline-row__cell{padding:0!important;background:transparent}.table-expanded-inline-row__content{padding:12px;background:color-mix(in oklab,var(--color-primary-500) 4%,var(--color-surface-mix-target, white));border-top:1px solid var(--color-neutral-200)}.table-detail-panel{flex:0 0 clamp(260px,34%,420px);min-width:260px;max-width:420px;border-left:1px solid var(--color-neutral-200);background:color-mix(in oklab,var(--color-neutral-000) 94%,var(--color-surface-mix-target, white));padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}.table-detail-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-detail-panel__title{font-size:13px;color:var(--color-neutral-700)}.table-detail-panel__close{width:24px;min-width:24px;height:24px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-detail-panel__close span{font-size:16px}.table-detail-panel__close:hover{border-color:var(--color-neutral-400);background:color-mix(in oklab,var(--color-neutral-100) 88%,var(--color-surface-mix-target, white))}.expanded-row__template{color:var(--color-neutral-700);font-size:13px}.expanded-row__loading,.expanded-row__error,.expanded-row__empty{border:1px dashed var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-050);padding:10px 12px;font-size:12px}.expanded-row__loading,.expanded-row__empty{color:var(--color-neutral-500)}.expanded-row__error{color:var(--color-risk-700);border-color:var(--color-risk-300);background:var(--color-risk-050)}.expanded-row__details{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.expanded-row__detail-item{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-000);padding:8px;display:flex;flex-direction:column;gap:4px}.expanded-row__detail-label{font-size:11px;color:var(--color-neutral-500);font-weight:600}.expanded-row__detail-value{font-size:13px;color:var(--color-neutral-700);word-break:break-word}.nested-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--color-neutral-200);border-radius:6px;overflow:hidden}.nested-table th,.nested-table td{border-bottom:1px solid var(--color-neutral-200);padding:6px 8px;font-size:12px}.nested-table th{background:var(--color-neutral-050);color:var(--color-neutral-700)}.nested-table th.column-focused{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:color-mix(in oklab,var(--color-primary-050) 75%,var(--color-surface-mix-target, white))}.nested-table__header--focusable{cursor:pointer}.nested-table__placeholder-row td{color:transparent;min-height:32px}.nested-table tr:last-child td{border-bottom:none}.expanded-row__actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.expanded-row__action{border:1px solid var(--color-neutral-300);background:#fff;border-radius:6px;padding:4px 6px;display:inline-flex;align-items:center;gap:4px;color:var(--color-neutral-700);cursor:pointer;font-size:11px}.expanded-row__action--icon-only{width:var(--table-control-height);min-width:var(--table-control-height);height:var(--table-control-height);padding:0;justify-content:center}.expanded-row__action span.material-symbols-outlined{font-size:14px}.table-skeleton__row td{padding-top:10px;padding-bottom:10px}.table-skeleton__line{display:block;height:12px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-skeleton__dot{display:inline-block;width:16px;height:16px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-200) 88%,var(--color-surface-mix-target, white));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-neutral-300) 75%,transparent)}.table-skeleton__dot--action{width:22px;height:22px;border-radius:8px}.table-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:stretch;padding:12px;font-size:13px;background:color-mix(in oklab,var(--color-neutral-000) 90%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--color-neutral-700);z-index:5;animation:table-loading-fade .16s ease-out}.table-loading__skeleton{width:min(100%,980px);margin:0 auto;display:grid;gap:10px;padding:12px;border-radius:10px;border:1px solid color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-000) 96%,transparent);box-shadow:0 1px color-mix(in oklab,var(--color-neutral-100) 80%,transparent),0 12px 24px color-mix(in oklab,var(--color-neutral-900) 8%,transparent)}.table-loading__row{height:16px;border-radius:999px;background:linear-gradient(90deg,color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-200) 95%,var(--color-surface-mix-target, white)),color-mix(in oklab,var(--color-neutral-100) 92%,var(--color-surface-mix-target, white)));background-size:240% 100%;animation:table-loading-shimmer 1.05s ease-in-out infinite}.table-loading__row:first-child{height:22px;width:96%;border-radius:8px}.table-loading__row:nth-child(2){width:90%}.table-loading__row:nth-child(3){width:94%}.table-loading__row:nth-child(4){width:86%}.table-loading__row:nth-child(5){width:92%}.table-loading__label{align-self:center;font-size:11px;font-weight:500;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 86%,transparent);border:1px solid color-mix(in oklab,var(--color-neutral-300) 66%,transparent);color:var(--color-neutral-600)}.table-paginator{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 10px;background:color-mix(in oklab,var(--color-neutral-050) 52%,var(--color-neutral-000));border:1px solid var(--table-surface-border);border-top:none;border-bottom-left-radius:var(--table-surface-radius);border-bottom-right-radius:var(--table-surface-radius);flex-wrap:wrap}.table-paginator__content,.table-paginator__controls{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.table-paginator--align-start{justify-content:flex-start}.table-paginator--align-center{justify-content:center}.table-paginator__size{display:inline-flex;align-items:center;min-width:0;margin-inline-start:auto}.table-paginator--align-start .table-paginator__size,.table-paginator--align-center .table-paginator__size{margin-inline-start:0}.table-paginator__nav,.table-paginator__page{border:1px solid var(--table-surface-border-strong);background:var(--color-neutral-000);color:var(--color-neutral-700);border-radius:var(--table-control-radius);min-width:var(--table-control-height);min-height:var(--table-control-height);padding:0 var(--table-control-padding-x);font-size:var(--table-control-font-size);cursor:pointer;transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease;box-shadow:0 1px 1px color-mix(in oklab,var(--color-neutral-900) 3%,transparent)}.table-paginator__nav{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.table-paginator__nav:not(:disabled):hover,.table-paginator__page:not(:disabled):hover{border-color:var(--color-primary-300);background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator__nav--icon{min-width:var(--table-control-height);width:var(--table-control-height);padding:0}.table-paginator__nav--icon span{font-size:16px;color:inherit}.table-paginator__pages{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}.table-paginator__size-select{width:84px;min-width:84px}.table-paginator__nav:disabled,.table-paginator__page:disabled{opacity:1;cursor:not-allowed;background:color-mix(in oklab,var(--color-neutral-100) 58%,var(--color-surface-mix-target, white));border-color:color-mix(in oklab,var(--color-neutral-300) 54%,var(--color-surface-mix-target, white));color:var(--color-neutral-400);box-shadow:none}.table-paginator__page--active,.table-paginator__page--active:disabled{opacity:1;border-color:var(--color-primary-500);background:color-mix(in oklab,var(--color-primary-500) 12%,var(--color-surface-mix-target, white));color:var(--color-primary-700);font-weight:600}.table-paginator__meta{font-size:12px;color:var(--color-neutral-600)}.table-paginator--compact{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--compact .table-paginator__content,.table-paginator--compact .table-paginator__controls,.table-paginator--compact .table-paginator__pages{gap:6px}.table-paginator--compact .table-paginator__nav,.table-paginator--compact .table-paginator__page{min-width:30px;min-height:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);box-shadow:none}.table-paginator--compact .table-paginator__nav--icon{width:30px;padding:0}.table-paginator--compact .table-paginator__nav:not(:disabled):hover,.table-paginator--compact .table-paginator__page:not(:disabled):hover{border-color:color-mix(in oklab,var(--color-neutral-300) 72%,transparent);background:color-mix(in oklab,var(--color-neutral-100) 78%,var(--color-surface-mix-target, white));color:var(--color-neutral-900)}.table-paginator--compact .table-paginator__page--active,.table-paginator--compact .table-paginator__page--active:disabled{border-color:var(--color-neutral-950);background:var(--color-neutral-950);color:var(--color-neutral-000);font-weight:700}.table-paginator--compact .table-paginator__nav:disabled,.table-paginator--compact .table-paginator__page:disabled{opacity:.4;background:transparent;border-color:transparent;color:var(--color-neutral-400)}.table-paginator--compact .table-paginator__meta{padding:0 6px}.table-paginator--compact .table-paginator__size{margin-inline-start:auto}.table-paginator--compact .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--segmented{gap:10px;padding:8px 10px;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__content{gap:10px}.table-paginator--segmented .table-paginator__controls{gap:0;border:1px solid var(--table-surface-border-strong);border-radius:var(--table-control-radius);overflow:hidden;background:var(--color-neutral-000)}.table-paginator--segmented .table-paginator__pages{gap:0}.table-paginator--segmented .table-paginator__nav,.table-paginator--segmented .table-paginator__page{min-width:32px;min-height:32px;height:32px;padding:0 10px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);box-shadow:none}.table-paginator--segmented .table-paginator__nav--icon{width:32px;padding:0}.table-paginator--segmented .table-paginator__nav+.table-paginator__nav,.table-paginator--segmented .table-paginator__nav+.table-paginator__pages,.table-paginator--segmented .table-paginator__pages+.table-paginator__nav,.table-paginator--segmented .table-paginator__pages+.table-paginator__pages,.table-paginator--segmented .table-paginator__page+.table-paginator__page{border-inline-start:1px solid color-mix(in oklab,var(--color-neutral-300) 86%,transparent)}.table-paginator--segmented .table-paginator__nav:not(:disabled):hover,.table-paginator--segmented .table-paginator__page:not(:disabled):hover{background:color-mix(in oklab,var(--color-primary-500) 10%,var(--color-surface-mix-target, white));color:var(--color-primary-700)}.table-paginator--segmented .table-paginator__page--active,.table-paginator--segmented .table-paginator__page--active:disabled{background:var(--color-primary-600);color:var(--color-neutral-000);font-weight:700}.table-paginator--segmented .table-paginator__nav:disabled,.table-paginator--segmented .table-paginator__page:disabled{opacity:1;background:transparent;color:var(--color-neutral-400);border-color:transparent}.table-paginator--segmented .table-paginator__size-select{width:84px;min-width:84px}.table-paginator--compact.table-paginator--flat,.table-paginator--segmented.table-paginator--flat{padding:8px 0 0;border:none;border-radius:0;background:transparent}.nvb-table--grid th,.nvb-table--grid td{border-right:1px solid var(--table-surface-border)}.nvb-table--grid th:last-child,.nvb-table--grid td:last-child{border-right:none}.nvb-table--striped tbody tr:nth-child(2n){background:color-mix(in oklab,var(--color-neutral-050) 74%,var(--color-surface-mix-target, white))}.nvb-table--row-hover tbody>tr:not(.expanded-row):hover>td{background:color-mix(in oklab,var(--color-primary-500) 5%,var(--color-surface-mix-target, white))}.nvb-table__row--active>td{background:color-mix(in oklab,var(--color-primary-500) 8%,var(--color-surface-mix-target, white))}.nvb-table--force-stack thead{display:none}.nvb-table--force-stack,.nvb-table--force-stack tbody,.nvb-table--force-stack tr,.nvb-table--force-stack td{display:block;width:100%}.nvb-table--force-stack tr{display:block;width:100%;border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--force-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--force-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--force-stack .action-cell{justify-items:end}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--force-stack .expand-cell:before,.nvb-table--force-stack .table-expanded-inline-row__cell:before,.nvb-table--force-stack .table-row-template-cell:before{content:none}.nvb-table--force-stack .expand-cell,.nvb-table--force-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--force-stack .table-expanded-inline-row__content{width:100%}.table-dialog-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:1500}.table-dialog{--nvb-floating-overlay-z-index: 1520;--nvb-page-margin-bottom: 0px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,760px);max-height:84vh;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);z-index:1510;overflow:hidden;min-height:0;outline:0}.table-dialog--filters{width:min(92vw,680px)}.table-dialog--column-settings{width:min(92vw,620px)}.table-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);flex-shrink:0}.table-dialog__header h4{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900)}.table-dialog__close{width:32px;height:32px;border:1px solid var(--table-surface-border-strong);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.table-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.table-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.table-dialog__close span{font-size:18px}.table-dialog__body{padding:16px 24px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1 1 auto;min-height:0}.table-dialog__select-all{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-dialog__footer{border-top:1px solid var(--color-neutral-200);padding:16px 24px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0}.table-dialog__footer .table-export__action,.table-dialog__footer .table-toolbar__button{width:100%;justify-content:center}.table-dialog__footer--single{grid-template-columns:1fr}.table-dialog__tabs{display:flex;align-items:center;gap:4px;padding:0 24px;border-bottom:1px solid var(--color-neutral-200)}.table-dialog__tab{position:relative;min-height:40px;border:none;border-radius:0;background:transparent;color:var(--color-neutral-700);font-size:13px;line-height:20px;font-weight:600;padding:0 12px;cursor:pointer}.table-dialog__tab:hover{color:var(--color-neutral-900);background:color-mix(in oklab,var(--color-neutral-100) 72%,transparent)}.table-dialog__tab--active{color:var(--color-primary-700)}.table-dialog__tab--active:after{content:\"\";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:999px;background:var(--color-primary-600)}.table-dialog__tab:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.table-export__columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.table-column-settings{display:flex;flex-direction:column;gap:10px}.table-column-settings__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.table-column-settings__list{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,520px);overflow:auto;padding-right:2px}.table-column-settings__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:6px 8px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;background:var(--color-neutral-000)}.table-column-settings__content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,180px);gap:10px;align-items:center}.table-column-settings__drag{width:32px;min-width:32px;height:32px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:grab;flex:0 0 auto}.table-column-settings__drag:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__drag:active{cursor:grabbing}.table-column-settings__list.cdk-drop-list-dragging .table-column-settings__item:not(.cdk-drag-placeholder){transition:transform .16s ease}.table-column-settings__item.cdk-drag-preview{box-sizing:border-box;background:var(--color-neutral-000);border:1px solid var(--color-primary-300);border-radius:8px;box-shadow:0 14px 28px #0f172a29}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px}::ng-deep .table-column-settings__item.cdk-drag-preview .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__item.cdk-drag-placeholder{opacity:.35;border-style:dashed;background:var(--color-primary-050)}.table-column-settings__item.cdk-drag-animating{transition:transform .18s ease}.table-column-settings__toggle{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;font-size:12px;color:var(--color-neutral-800);font-weight:500}.table-column-settings__toggle .nvb-control__checkbox-input{width:16px;height:16px;margin:0;appearance:none;accent-color:var(--color-primary-600);border:1px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-neutral-000);background-repeat:no-repeat;background-position:center;background-size:12px 12px;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}.table-column-settings__toggle .nvb-control__checkbox-input:hover{border-color:var(--color-primary-500)}.table-column-settings__toggle .nvb-control__checkbox-input:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary-500) 20%,transparent)}.table-column-settings__toggle .nvb-control__checkbox-input:checked{border-color:var(--color-primary-600);background-color:var(--color-primary-600);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E\")}.table-column-settings__toggle span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}.table-column-settings__width{display:flex;flex-direction:column;gap:6px;min-width:0}.table-column-settings__width-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.table-column-settings__width-header>span{font-size:11px;line-height:1.2;color:var(--color-neutral-600)}.table-column-settings__width-meta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.table-column-settings__width-reset{min-height:24px;border:1px solid var(--color-neutral-300);border-radius:999px;background:var(--color-neutral-050);color:var(--color-neutral-700);font:inherit;font-size:11px;padding:0 10px;cursor:pointer}.table-column-settings__width-reset:hover{border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__width-reset--active{border-color:var(--color-primary-300);background:var(--color-primary-100);color:var(--color-primary-800)}.table-column-settings__width-range{display:block}.table-column-settings__width-range input[type=range]{width:100%;margin:0;accent-color:var(--color-primary-600);cursor:pointer}.table-column-settings__width-value{min-width:92px;min-height:28px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-800);display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:12px;font-weight:600}.table-column-settings__order{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.table-column-settings__move{width:30px;height:30px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-050);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.table-column-settings__move:hover:not(:disabled){border-color:var(--color-primary-300);background:var(--color-primary-050);color:var(--color-primary-700)}.table-column-settings__move:disabled{opacity:.5;cursor:not-allowed}@media(max-width:720px){.table-column-settings__content{grid-template-columns:minmax(0,1fr)}}.table-dialog--column-settings .table-dialog__footer{grid-template-columns:repeat(2,minmax(0,1fr))}.table-export__column{border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form{display:flex;flex-direction:column;gap:10px}.table-filter-form__row{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-neutral-700)}.table-filter-form__row input{border:1px solid var(--color-neutral-300);border-radius:7px;min-height:34px;padding:0 10px;font-size:12px;color:var(--color-neutral-700)}.table-filter-list{display:flex;flex-direction:column;gap:8px}.table-filter-list__item{border:1px solid var(--color-neutral-200);border-radius:8px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.table-filter-list__meta{min-width:0;display:flex;flex-direction:column;gap:2px}.table-filter-list__meta strong{font-size:13px;color:var(--color-neutral-800)}.table-filter-list__meta span,.table-filter-list__meta small{font-size:11px;color:var(--color-neutral-600)}.table-filter-list__actions{display:inline-flex;align-items:center;gap:6px}.table-filter-list__empty{font-size:12px;color:var(--color-neutral-500);padding:6px 0}@keyframes table-loading-fade{0%{opacity:0}to{opacity:1}}@keyframes table-loading-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@container (max-width: 768px){.table-sticky-clone{display:none}.table-toolbar{flex-direction:column;align-items:stretch}.table-toolbar__left,.table-toolbar__center,.table-toolbar__right{width:100%;justify-content:flex-start;flex:0 0 auto}.table-toolbar__center{min-width:0}.table-toolbar__center--controls-only{justify-content:flex-start}.table-toolbar__right{margin-left:0}.table-toolbar__dropzone--center{flex:0 0 auto}.table-toolbar__drop-item{min-width:0;max-width:none;width:100%;flex-basis:100%}.table-toolbar__add-menu{position:static;width:100%;min-width:0;max-height:220px;margin-top:6px;box-shadow:none}.table-toolbar__button--detailed-toggle{width:100%;justify-content:space-between}.table-quick-search,.table-export{width:100%}.table-header-menu{width:100%;min-width:0}.table-export>.table-toolbar__button{width:100%;justify-content:space-between}.table-export__menu{left:0;right:auto;width:min(100%,280px)}.table-detailed-search__row{grid-template-columns:1fr}.table-detailed-search__remove,.table-detailed-search__actions{width:100%}.table-detailed-search__actions .table-toolbar__button{width:100%;justify-content:center}.table-cell-actions{width:100%}.table-frame{flex-direction:column}.table-detail-panel{width:100%;min-width:0;max-width:none;border-left:none;border-top:1px solid var(--color-neutral-200)}.table-cell-actions__select{width:100%;min-width:0}.table-dialog{width:min(94vw,720px);max-height:88vh}.table-dialog__footer{grid-template-columns:1fr}.table-filter-list__item{flex-direction:column;align-items:stretch}.table-filter-list__actions{width:100%}.table-filter-list__actions .table-toolbar__button{flex:1 1 0;justify-content:center}.nvb-table--auto-stack thead{display:none}.nvb-table--auto-stack,.nvb-table--auto-stack tbody,.nvb-table--auto-stack tr,.nvb-table--auto-stack td{display:block;width:100%}.nvb-table--auto-stack tr{border-bottom:1px solid var(--color-neutral-200);padding:6px 0}.nvb-table--auto-stack td{border:none;display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px;padding:6px 10px;text-align:left}.nvb-table--auto-stack td:before{content:attr(data-label);font-size:11px;color:var(--color-neutral-500);font-weight:600}.nvb-table--auto-stack .action-cell{justify-items:end}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-expanded-inline-row__cell{grid-template-columns:1fr}.nvb-table--auto-stack .expand-cell:before,.nvb-table--auto-stack .table-expanded-inline-row__cell:before,.nvb-table--auto-stack .table-row-template-cell:before{content:none}.nvb-table--auto-stack .expand-cell,.nvb-table--auto-stack .table-row-template-cell{justify-items:start;grid-template-columns:1fr}.nvb-table--auto-stack .table-expanded-inline-row__content{width:100%}}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], tableShellRef: [{ type: i0.ViewChild, args: ['tableShellRef', { isSignal: true }] }], stickyHeaderRef: [{ type: i0.ViewChild, args: ['stickyHeaderRef', { isSignal: true }] }], tableScrollerRef: [{ type: i0.ViewChild, args: ['tableScrollerRef', { isSignal: true }] }], mainHeaderRowRef: [{ type: i0.ViewChild, args: ['mainHeaderRowRef', { isSignal: true }] }], closeActionMenu: [{
                 type: HostListener,
                 args: ['document:click']
@@ -59849,7 +59849,7 @@ class RuntimePreview {
         return String(settings[key] ?? '').trim();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RuntimePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RuntimePreview, isStandalone: true, selector: "runtime-preview", inputs: { viewportSettings: { classPropertyName: "viewportSettings", publicName: "viewportSettings", isSignal: true, isRequired: false, transformFunction: null }, runtimePreviewSettings: { classPropertyName: "runtimePreviewSettings", publicName: "runtimePreviewSettings", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "previewContentHost", first: true, predicate: ["previewContentHost"], descendants: true }, { propertyName: "previewFrameShell", first: true, predicate: ["previewFrameShell"], descendants: true }], ngImport: i0, template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <runtime-content-header [model]=\"headerModel()\"></runtime-content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <runtime-container-outlet\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: page.rows, parentElement: pageElement }\"\r\n              ></runtime-container-outlet>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (isContainerElement(element.type)) {\r\n              <runtime-container-outlet\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: column.rows, parentElement: element }\"\r\n              ></runtime-container-outlet>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <runtime-lazy-element-outlet [model]=\"element\"></runtime-lazy-element-outlet>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);animation:nvb-validation-panel-in .18s ease-out}@keyframes nvb-validation-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-validation-panel{animation:none}}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain;animation:nvb-preview-dialog-shell-in .18s ease-out}.preview-dialog-shell--closing{animation:nvb-preview-dialog-shell-in .18s ease-in reverse}@keyframes nvb-preview-dialog-shell-in{0%{background-color:transparent}to{background-color:#0f172a5c}}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0;animation:nvb-preview-dialog-in .18s ease-out}.preview-dialog-shell--closing .preview-dialog{animation:nvb-preview-dialog-in .16s ease-in reverse}@keyframes nvb-preview-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-dialog-shell--open,.preview-dialog{animation:none}}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: RuntimeContainerOutlet, selector: "runtime-container-outlet", inputs: ["model", "column", "pageRows", "pageIsEmpty", "isMobileView", "rowsTemplate", "projectedContext"] }, { kind: "component", type: RuntimeContentHeader, selector: "runtime-content-header", inputs: ["model"] }, { kind: "component", type: RuntimeLazyElementOutlet, selector: "runtime-lazy-element-outlet", inputs: ["model"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RuntimePreview, isStandalone: true, selector: "runtime-preview", inputs: { viewportSettings: { classPropertyName: "viewportSettings", publicName: "viewportSettings", isSignal: true, isRequired: false, transformFunction: null }, runtimePreviewSettings: { classPropertyName: "runtimePreviewSettings", publicName: "runtimePreviewSettings", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "previewContentHost", first: true, predicate: ["previewContentHost"], descendants: true }, { propertyName: "previewFrameShell", first: true, predicate: ["previewFrameShell"], descendants: true }], ngImport: i0, template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <runtime-content-header [model]=\"headerModel()\"></runtime-content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <runtime-container-outlet\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: page.rows, parentElement: pageElement }\"\r\n              ></runtime-container-outlet>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (isContainerElement(element.type)) {\r\n              <runtime-container-outlet\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: column.rows, parentElement: element }\"\r\n              ></runtime-container-outlet>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <runtime-lazy-element-outlet [model]=\"element\"></runtime-lazy-element-outlet>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: RuntimeContainerOutlet, selector: "runtime-container-outlet", inputs: ["model", "column", "pageRows", "pageIsEmpty", "isMobileView", "rowsTemplate", "projectedContext"] }, { kind: "component", type: RuntimeContentHeader, selector: "runtime-content-header", inputs: ["model"] }, { kind: "component", type: RuntimeLazyElementOutlet, selector: "runtime-lazy-element-outlet", inputs: ["model"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RuntimePreview, decorators: [{
             type: Component,
@@ -59864,7 +59864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         RuntimeLazyElementOutlet,
                         UiTranslatePipe,
                         DynamicTextPipe,
-                    ], template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <runtime-content-header [model]=\"headerModel()\"></runtime-content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <runtime-container-outlet\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: page.rows, parentElement: pageElement }\"\r\n              ></runtime-container-outlet>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (isContainerElement(element.type)) {\r\n              <runtime-container-outlet\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: column.rows, parentElement: element }\"\r\n              ></runtime-container-outlet>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <runtime-lazy-element-outlet [model]=\"element\"></runtime-lazy-element-outlet>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);animation:nvb-validation-panel-in .18s ease-out}@keyframes nvb-validation-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-validation-panel{animation:none}}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain;animation:nvb-preview-dialog-shell-in .18s ease-out}.preview-dialog-shell--closing{animation:nvb-preview-dialog-shell-in .18s ease-in reverse}@keyframes nvb-preview-dialog-shell-in{0%{background-color:transparent}to{background-color:#0f172a5c}}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0;animation:nvb-preview-dialog-in .18s ease-out}.preview-dialog-shell--closing .preview-dialog{animation:nvb-preview-dialog-in .16s ease-in reverse}@keyframes nvb-preview-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-dialog-shell--open,.preview-dialog{animation:none}}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"] }]
+                    ], template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <runtime-content-header [model]=\"headerModel()\"></runtime-content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <runtime-container-outlet\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: page.rows, parentElement: pageElement }\"\r\n              ></runtime-container-outlet>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (isContainerElement(element.type)) {\r\n              <runtime-container-outlet\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n                [projectedContext]=\"{ rows: column.rows, parentElement: element }\"\r\n              ></runtime-container-outlet>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <runtime-lazy-element-outlet [model]=\"element\"></runtime-lazy-element-outlet>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"] }]
         }], propDecorators: { viewportSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportSettings", required: false }] }], runtimePreviewSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "runtimePreviewSettings", required: false }] }], previewContentHost: [{
                 type: ViewChild,
                 args: ['previewContentHost']
@@ -60350,11 +60350,11 @@ class ConfirmDialog {
         this.confirmDialogService.confirm();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfirmDialog, isStandalone: true, selector: "confirm-dialog", host: { listeners: { "document:keydown.escape": "onEscapePressed()" } }, ngImport: i0, template: "@if (state()?.isVisible) {\r\n  <div class=\"confirm-backdrop\" [class.confirm-backdrop--closing]=\"isClosing()\" (click)=\"onBackdropClick()\">\r\n    <section\r\n      class=\"confirm-dialog\"\r\n      [class.confirm-dialog--closing]=\"isClosing()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"nvb-confirm-dialog-title\"\r\n      aria-describedby=\"nvb-confirm-dialog-message\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <header class=\"confirm-dialog__header\" id=\"nvb-confirm-dialog-title\">\r\n        {{ state()?.title || ('confirm.title' | uiT: 'Confirmation') }}\r\n      </header>\r\n\r\n      <div class=\"confirm-dialog__body\" id=\"nvb-confirm-dialog-message\">\r\n        {{ state()?.message || ('confirm.message' | uiT: 'Are you sure you want to continue?') }}\r\n      </div>\r\n\r\n      <footer class=\"confirm-dialog__actions\">\r\n        <button type=\"button\" class=\"confirm-dialog__button\" (click)=\"onCancelClick()\">\r\n          {{ state()?.cancelLabel || ('confirm.cancel' | uiT: 'Cancel') }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"confirm-dialog__button confirm-dialog__button--primary\"\r\n          (click)=\"onConfirmClick()\"\r\n        >\r\n          {{ state()?.confirmLabel || ('confirm.confirm' | uiT: 'Continue') }}\r\n        </button>\r\n      </footer>\r\n    </section>\r\n  </div>\r\n}\r\n", styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:2147483601}.confirm-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto;animation:nvb-confirm-backdrop-in .16s ease-out}.confirm-backdrop--closing{animation:nvb-confirm-backdrop-in .16s ease-in reverse}.confirm-dialog{--nvb-floating-overlay-z-index: 2147483610;width:min(100%,480px);max-height:min(80vh,100vh - 32px);min-height:0;border-radius:var(--nvb-dialog-radius);border:1px solid var(--color-neutral-200);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;display:flex;flex-direction:column;animation:nvb-confirm-dialog-in .16s ease-out}.confirm-dialog--closing{animation:nvb-confirm-dialog-in .14s ease-in reverse}@keyframes nvb-confirm-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes nvb-confirm-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.confirm-backdrop,.confirm-dialog{animation:none}}.confirm-dialog__header{padding:20px 24px 8px;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900);flex-shrink:0}.confirm-dialog__body{padding:0 24px 20px;color:var(--color-neutral-600);font-size:13px;line-height:18px;overflow:auto;flex:1 1 auto;min-height:0}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 24px;flex-shrink:0}.confirm-dialog__button{min-width:96px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-button-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);padding:0 12px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.confirm-dialog__button:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.confirm-dialog__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.confirm-dialog__button--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.confirm-dialog__button--primary:hover{border-color:var(--color-primary-700);background:var(--color-primary-700)}\n"], dependencies: [{ kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfirmDialog, isStandalone: true, selector: "confirm-dialog", host: { listeners: { "document:keydown.escape": "onEscapePressed()" } }, ngImport: i0, template: "@if (state()?.isVisible) {\r\n  <div class=\"confirm-backdrop\" [class.confirm-backdrop--closing]=\"isClosing()\" (click)=\"onBackdropClick()\">\r\n    <section\r\n      class=\"confirm-dialog\"\r\n      [class.confirm-dialog--closing]=\"isClosing()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"nvb-confirm-dialog-title\"\r\n      aria-describedby=\"nvb-confirm-dialog-message\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <header class=\"confirm-dialog__header\" id=\"nvb-confirm-dialog-title\">\r\n        {{ state()?.title || ('confirm.title' | uiT: 'Confirmation') }}\r\n      </header>\r\n\r\n      <div class=\"confirm-dialog__body\" id=\"nvb-confirm-dialog-message\">\r\n        {{ state()?.message || ('confirm.message' | uiT: 'Are you sure you want to continue?') }}\r\n      </div>\r\n\r\n      <footer class=\"confirm-dialog__actions\">\r\n        <button type=\"button\" class=\"confirm-dialog__button\" (click)=\"onCancelClick()\">\r\n          {{ state()?.cancelLabel || ('confirm.cancel' | uiT: 'Cancel') }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"confirm-dialog__button confirm-dialog__button--primary\"\r\n          (click)=\"onConfirmClick()\"\r\n        >\r\n          {{ state()?.confirmLabel || ('confirm.confirm' | uiT: 'Continue') }}\r\n        </button>\r\n      </footer>\r\n    </section>\r\n  </div>\r\n}\r\n", styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:2147483601}.confirm-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto}.confirm-dialog{--nvb-floating-overlay-z-index: 2147483610;width:min(100%,480px);max-height:min(80vh,100vh - 32px);min-height:0;border-radius:var(--nvb-dialog-radius);border:1px solid var(--color-neutral-200);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;display:flex;flex-direction:column}.confirm-dialog__header{padding:20px 24px 8px;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900);flex-shrink:0}.confirm-dialog__body{padding:0 24px 20px;color:var(--color-neutral-600);font-size:13px;line-height:18px;overflow:auto;flex:1 1 auto;min-height:0}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 24px;flex-shrink:0}.confirm-dialog__button{min-width:96px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-button-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);padding:0 12px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.confirm-dialog__button:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.confirm-dialog__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.confirm-dialog__button--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.confirm-dialog__button--primary:hover{border-color:var(--color-primary-700);background:var(--color-primary-700)}\n"], dependencies: [{ kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'confirm-dialog', imports: [UiTranslatePipe], template: "@if (state()?.isVisible) {\r\n  <div class=\"confirm-backdrop\" [class.confirm-backdrop--closing]=\"isClosing()\" (click)=\"onBackdropClick()\">\r\n    <section\r\n      class=\"confirm-dialog\"\r\n      [class.confirm-dialog--closing]=\"isClosing()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"nvb-confirm-dialog-title\"\r\n      aria-describedby=\"nvb-confirm-dialog-message\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <header class=\"confirm-dialog__header\" id=\"nvb-confirm-dialog-title\">\r\n        {{ state()?.title || ('confirm.title' | uiT: 'Confirmation') }}\r\n      </header>\r\n\r\n      <div class=\"confirm-dialog__body\" id=\"nvb-confirm-dialog-message\">\r\n        {{ state()?.message || ('confirm.message' | uiT: 'Are you sure you want to continue?') }}\r\n      </div>\r\n\r\n      <footer class=\"confirm-dialog__actions\">\r\n        <button type=\"button\" class=\"confirm-dialog__button\" (click)=\"onCancelClick()\">\r\n          {{ state()?.cancelLabel || ('confirm.cancel' | uiT: 'Cancel') }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"confirm-dialog__button confirm-dialog__button--primary\"\r\n          (click)=\"onConfirmClick()\"\r\n        >\r\n          {{ state()?.confirmLabel || ('confirm.confirm' | uiT: 'Continue') }}\r\n        </button>\r\n      </footer>\r\n    </section>\r\n  </div>\r\n}\r\n", styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:2147483601}.confirm-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto;animation:nvb-confirm-backdrop-in .16s ease-out}.confirm-backdrop--closing{animation:nvb-confirm-backdrop-in .16s ease-in reverse}.confirm-dialog{--nvb-floating-overlay-z-index: 2147483610;width:min(100%,480px);max-height:min(80vh,100vh - 32px);min-height:0;border-radius:var(--nvb-dialog-radius);border:1px solid var(--color-neutral-200);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;display:flex;flex-direction:column;animation:nvb-confirm-dialog-in .16s ease-out}.confirm-dialog--closing{animation:nvb-confirm-dialog-in .14s ease-in reverse}@keyframes nvb-confirm-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes nvb-confirm-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.confirm-backdrop,.confirm-dialog{animation:none}}.confirm-dialog__header{padding:20px 24px 8px;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900);flex-shrink:0}.confirm-dialog__body{padding:0 24px 20px;color:var(--color-neutral-600);font-size:13px;line-height:18px;overflow:auto;flex:1 1 auto;min-height:0}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 24px;flex-shrink:0}.confirm-dialog__button{min-width:96px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-button-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);padding:0 12px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.confirm-dialog__button:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.confirm-dialog__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.confirm-dialog__button--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.confirm-dialog__button--primary:hover{border-color:var(--color-primary-700);background:var(--color-primary-700)}\n"] }]
+            args: [{ selector: 'confirm-dialog', imports: [UiTranslatePipe], template: "@if (state()?.isVisible) {\r\n  <div class=\"confirm-backdrop\" [class.confirm-backdrop--closing]=\"isClosing()\" (click)=\"onBackdropClick()\">\r\n    <section\r\n      class=\"confirm-dialog\"\r\n      [class.confirm-dialog--closing]=\"isClosing()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"nvb-confirm-dialog-title\"\r\n      aria-describedby=\"nvb-confirm-dialog-message\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <header class=\"confirm-dialog__header\" id=\"nvb-confirm-dialog-title\">\r\n        {{ state()?.title || ('confirm.title' | uiT: 'Confirmation') }}\r\n      </header>\r\n\r\n      <div class=\"confirm-dialog__body\" id=\"nvb-confirm-dialog-message\">\r\n        {{ state()?.message || ('confirm.message' | uiT: 'Are you sure you want to continue?') }}\r\n      </div>\r\n\r\n      <footer class=\"confirm-dialog__actions\">\r\n        <button type=\"button\" class=\"confirm-dialog__button\" (click)=\"onCancelClick()\">\r\n          {{ state()?.cancelLabel || ('confirm.cancel' | uiT: 'Cancel') }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"confirm-dialog__button confirm-dialog__button--primary\"\r\n          (click)=\"onConfirmClick()\"\r\n        >\r\n          {{ state()?.confirmLabel || ('confirm.confirm' | uiT: 'Continue') }}\r\n        </button>\r\n      </footer>\r\n    </section>\r\n  </div>\r\n}\r\n", styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:2147483601}.confirm-backdrop{position:fixed;inset:0;background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto}.confirm-dialog{--nvb-floating-overlay-z-index: 2147483610;width:min(100%,480px);max-height:min(80vh,100vh - 32px);min-height:0;border-radius:var(--nvb-dialog-radius);border:1px solid var(--color-neutral-200);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;display:flex;flex-direction:column}.confirm-dialog__header{padding:20px 24px 8px;font-size:16px;line-height:22px;font-weight:600;color:var(--color-neutral-900);flex-shrink:0}.confirm-dialog__body{padding:0 24px 20px;color:var(--color-neutral-600);font-size:13px;line-height:18px;overflow:auto;flex:1 1 auto;min-height:0}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 24px;flex-shrink:0}.confirm-dialog__button{min-width:96px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-button-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);padding:0 12px;cursor:pointer;font-size:13px;font-weight:600;line-height:20px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.confirm-dialog__button:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400)}.confirm-dialog__button:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.confirm-dialog__button--primary{border-color:var(--color-primary-600);background:var(--color-primary-600);color:var(--color-neutral-000)}.confirm-dialog__button--primary:hover{border-color:var(--color-primary-700);background:var(--color-primary-700)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onEscapePressed: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -69955,11 +69955,11 @@ class TextAttribute {
         this.clearHelpHideTimeout();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextAttribute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextAttribute, isStandalone: true, selector: "text-attribute", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, propertyKey: { classPropertyName: "propertyKey", publicName: "propertyKey", isSignal: true, isRequired: false, transformFunction: null }, ownerFocusKey: { classPropertyName: "ownerFocusKey", publicName: "ownerFocusKey", isSignal: true, isRequired: false, transformFunction: null }, ownerElement: { classPropertyName: "ownerElement", publicName: "ownerElement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "@if (isCodeProperty()) {\r\n  <div class=\"attribute-code-header\">\r\n    <div class=\"attribute-code-actions\">\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.edit' | uiT: 'Redaguoti koda'\"\r\n        icon=\"edit_note\"\r\n        tone=\"subtle\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        (clicked)=\"openCodeEditor()\"\r\n      />\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.builder.clear' | uiT: 'Isvalyti'\"\r\n        icon=\"ink_eraser\"\r\n        tone=\"neutral\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        [disabled]=\"!hasCodeValue()\"\r\n        (clicked)=\"clearCodeValue()\"\r\n      />\r\n    </div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"attribute-code-help\"\r\n      (mouseenter)=\"showExpressionHelp($event)\"\r\n      (mouseleave)=\"hideExpressionHelp()\"\r\n      aria-label=\"{{ 'code.help' | uiT: 'Israisku pagalba' }}\"\r\n      title=\"{{ 'code.help' | uiT: 'Israisku pagalba' }}\"\r\n    >\r\n      <nvb-icon name=\"help\"></nvb-icon>\r\n    </button>\r\n  </div>\r\n  @if (expressionHelpVisible()) {\r\n    <app-tooltip\r\n      [text]=\"expressionHelpText()\"\r\n      [metaText]=\"expressionHelpMetaText()\"\r\n      [top]=\"expressionHelpTop()\"\r\n      [left]=\"expressionHelpLeft()\"\r\n      [interactive]=\"true\"\r\n      (mouseEntered)=\"keepExpressionHelpVisible()\"\r\n      (mouseLeft)=\"hideExpressionHelp()\"\r\n    />\r\n  }\r\n  <div class=\"code-preview\" [class.code-preview--empty]=\"!hasCodeValue()\">\r\n    <code>{{ property().value || ('code.empty' | uiT: 'Tuscia israiska') }}</code>\r\n  </div>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    class=\"nvb-control__attribute-input\"\r\n    [spellcheck]=\"false\"\r\n    [value]=\"property().value\"\r\n    [attr.list]=\"shouldShowPlaceholderSuggestions() ? getSuggestionListId() : null\"\r\n    (input)=\"onInputValue($event.target.value)\"\r\n    (blur)=\"onBlurValue($event.target.value)\"\r\n  />\r\n\r\n  @if (shouldShowPlaceholderSuggestions()) {\r\n    <datalist [id]=\"getSuggestionListId()\">\r\n      @for (token of getPlaceholderSuggestions(); track token) {\r\n        <option [value]=\"token\"></option>\r\n      }\r\n    </datalist>\r\n  }\r\n}\r\n@if (property().error) {\r\n  <span class=\"error-message\">{{ property().error }}</span>\r\n}\r\n", styles: [".error-message{color:red;font-size:11px}.attribute-code-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.attribute-code-actions{display:inline-flex;gap:6px;flex-wrap:wrap}.attribute-code-button-item{flex:0 0 auto}.attribute-code-help{flex:0 0 auto;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutral-500);cursor:pointer}.attribute-code-help:hover{color:var(--color-primary-700)}.code-preview{display:block;margin-top:6px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-neutral-050) 80%,transparent);padding:8px 10px;max-height:94px;overflow:auto}.code-preview code{display:block;color:var(--color-neutral-700);font-size:11px;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Courier New,monospace;line-height:1.35}.code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-700) 46%,var(--color-neutral-000));font-style:italic}:host-context([data-theme=dark]) .code-preview--empty,:host-context(.nvb-root.dark) .code-preview--empty,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty,:host-context(.dark) .code-preview--empty{background:color-mix(in oklch,var(--color-neutral-900) 72%,var(--color-neutral-700));border-color:color-mix(in oklch,var(--color-neutral-600) 68%,var(--color-neutral-700))}:host-context([data-theme=dark]) .code-preview--empty code,:host-context(.nvb-root.dark) .code-preview--empty code,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty code,:host-context(.dark) .code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-100) 68%,var(--color-neutral-400))}\n"], dependencies: [{ 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: 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: "pipe", type: UiTranslatePipe, name: "uiT" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextAttribute, isStandalone: true, selector: "text-attribute", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, propertyKey: { classPropertyName: "propertyKey", publicName: "propertyKey", isSignal: true, isRequired: false, transformFunction: null }, ownerFocusKey: { classPropertyName: "ownerFocusKey", publicName: "ownerFocusKey", isSignal: true, isRequired: false, transformFunction: null }, ownerElement: { classPropertyName: "ownerElement", publicName: "ownerElement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "@if (isCodeProperty()) {\r\n  <div class=\"attribute-code-header\">\r\n    <div class=\"attribute-code-actions\">\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.edit' | uiT: 'Edit code'\"\r\n        icon=\"edit_note\"\r\n        tone=\"subtle\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        (clicked)=\"openCodeEditor()\"\r\n      />\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.builder.clear' | uiT: 'Clear'\"\r\n        icon=\"ink_eraser\"\r\n        tone=\"neutral\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        [disabled]=\"!hasCodeValue()\"\r\n        (clicked)=\"clearCodeValue()\"\r\n      />\r\n    </div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"attribute-code-help\"\r\n      (mouseenter)=\"showExpressionHelp($event)\"\r\n      (mouseleave)=\"hideExpressionHelp()\"\r\n      aria-label=\"{{ 'code.help' | uiT: 'Expression help' }}\"\r\n      title=\"{{ 'code.help' | uiT: 'Expression help' }}\"\r\n    >\r\n      <nvb-icon name=\"help\"></nvb-icon>\r\n    </button>\r\n  </div>\r\n  @if (expressionHelpVisible()) {\r\n    <app-tooltip\r\n      [text]=\"expressionHelpText()\"\r\n      [metaText]=\"expressionHelpMetaText()\"\r\n      [top]=\"expressionHelpTop()\"\r\n      [left]=\"expressionHelpLeft()\"\r\n      [interactive]=\"true\"\r\n      (mouseEntered)=\"keepExpressionHelpVisible()\"\r\n      (mouseLeft)=\"hideExpressionHelp()\"\r\n    />\r\n  }\r\n  <div class=\"code-preview\" [class.code-preview--empty]=\"!hasCodeValue()\">\r\n    <code>{{ property().value || ('code.empty' | uiT: 'Empty expression') }}</code>\r\n  </div>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    class=\"nvb-control__attribute-input\"\r\n    [spellcheck]=\"false\"\r\n    [value]=\"property().value\"\r\n    [attr.list]=\"shouldShowPlaceholderSuggestions() ? getSuggestionListId() : null\"\r\n    (input)=\"onInputValue($event.target.value)\"\r\n    (blur)=\"onBlurValue($event.target.value)\"\r\n  />\r\n\r\n  @if (shouldShowPlaceholderSuggestions()) {\r\n    <datalist [id]=\"getSuggestionListId()\">\r\n      @for (token of getPlaceholderSuggestions(); track token) {\r\n        <option [value]=\"token\"></option>\r\n      }\r\n    </datalist>\r\n  }\r\n}\r\n@if (property().error) {\r\n  <span class=\"error-message\">{{ property().error }}</span>\r\n}\r\n", styles: [".error-message{color:red;font-size:11px}.attribute-code-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.attribute-code-actions{display:inline-flex;gap:6px;flex-wrap:wrap}.attribute-code-button-item{flex:0 0 auto}.attribute-code-help{flex:0 0 auto;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutral-500);cursor:pointer}.attribute-code-help:hover{color:var(--color-primary-700)}.code-preview{display:block;margin-top:6px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-neutral-050) 80%,transparent);padding:8px 10px;max-height:94px;overflow:auto}.code-preview code{display:block;color:var(--color-neutral-700);font-size:11px;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Courier New,monospace;line-height:1.35}.code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-700) 46%,var(--color-neutral-000));font-style:italic}:host-context([data-theme=dark]) .code-preview--empty,:host-context(.nvb-root.dark) .code-preview--empty,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty,:host-context(.dark) .code-preview--empty{background:color-mix(in oklch,var(--color-neutral-900) 72%,var(--color-neutral-700));border-color:color-mix(in oklch,var(--color-neutral-600) 68%,var(--color-neutral-700))}:host-context([data-theme=dark]) .code-preview--empty code,:host-context(.nvb-root.dark) .code-preview--empty code,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty code,:host-context(.dark) .code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-100) 68%,var(--color-neutral-400))}\n"], dependencies: [{ 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: 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: "pipe", type: UiTranslatePipe, name: "uiT" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'text-attribute', imports: [UiTranslatePipe, BuilderActionButton, NvbIcon, TooltipComponent], template: "@if (isCodeProperty()) {\r\n  <div class=\"attribute-code-header\">\r\n    <div class=\"attribute-code-actions\">\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.edit' | uiT: 'Redaguoti koda'\"\r\n        icon=\"edit_note\"\r\n        tone=\"subtle\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        (clicked)=\"openCodeEditor()\"\r\n      />\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.builder.clear' | uiT: 'Isvalyti'\"\r\n        icon=\"ink_eraser\"\r\n        tone=\"neutral\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        [disabled]=\"!hasCodeValue()\"\r\n        (clicked)=\"clearCodeValue()\"\r\n      />\r\n    </div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"attribute-code-help\"\r\n      (mouseenter)=\"showExpressionHelp($event)\"\r\n      (mouseleave)=\"hideExpressionHelp()\"\r\n      aria-label=\"{{ 'code.help' | uiT: 'Israisku pagalba' }}\"\r\n      title=\"{{ 'code.help' | uiT: 'Israisku pagalba' }}\"\r\n    >\r\n      <nvb-icon name=\"help\"></nvb-icon>\r\n    </button>\r\n  </div>\r\n  @if (expressionHelpVisible()) {\r\n    <app-tooltip\r\n      [text]=\"expressionHelpText()\"\r\n      [metaText]=\"expressionHelpMetaText()\"\r\n      [top]=\"expressionHelpTop()\"\r\n      [left]=\"expressionHelpLeft()\"\r\n      [interactive]=\"true\"\r\n      (mouseEntered)=\"keepExpressionHelpVisible()\"\r\n      (mouseLeft)=\"hideExpressionHelp()\"\r\n    />\r\n  }\r\n  <div class=\"code-preview\" [class.code-preview--empty]=\"!hasCodeValue()\">\r\n    <code>{{ property().value || ('code.empty' | uiT: 'Tuscia israiska') }}</code>\r\n  </div>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    class=\"nvb-control__attribute-input\"\r\n    [spellcheck]=\"false\"\r\n    [value]=\"property().value\"\r\n    [attr.list]=\"shouldShowPlaceholderSuggestions() ? getSuggestionListId() : null\"\r\n    (input)=\"onInputValue($event.target.value)\"\r\n    (blur)=\"onBlurValue($event.target.value)\"\r\n  />\r\n\r\n  @if (shouldShowPlaceholderSuggestions()) {\r\n    <datalist [id]=\"getSuggestionListId()\">\r\n      @for (token of getPlaceholderSuggestions(); track token) {\r\n        <option [value]=\"token\"></option>\r\n      }\r\n    </datalist>\r\n  }\r\n}\r\n@if (property().error) {\r\n  <span class=\"error-message\">{{ property().error }}</span>\r\n}\r\n", styles: [".error-message{color:red;font-size:11px}.attribute-code-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.attribute-code-actions{display:inline-flex;gap:6px;flex-wrap:wrap}.attribute-code-button-item{flex:0 0 auto}.attribute-code-help{flex:0 0 auto;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutral-500);cursor:pointer}.attribute-code-help:hover{color:var(--color-primary-700)}.code-preview{display:block;margin-top:6px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-neutral-050) 80%,transparent);padding:8px 10px;max-height:94px;overflow:auto}.code-preview code{display:block;color:var(--color-neutral-700);font-size:11px;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Courier New,monospace;line-height:1.35}.code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-700) 46%,var(--color-neutral-000));font-style:italic}:host-context([data-theme=dark]) .code-preview--empty,:host-context(.nvb-root.dark) .code-preview--empty,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty,:host-context(.dark) .code-preview--empty{background:color-mix(in oklch,var(--color-neutral-900) 72%,var(--color-neutral-700));border-color:color-mix(in oklch,var(--color-neutral-600) 68%,var(--color-neutral-700))}:host-context([data-theme=dark]) .code-preview--empty code,:host-context(.nvb-root.dark) .code-preview--empty code,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty code,:host-context(.dark) .code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-100) 68%,var(--color-neutral-400))}\n"] }]
+            args: [{ selector: 'text-attribute', imports: [UiTranslatePipe, BuilderActionButton, NvbIcon, TooltipComponent], template: "@if (isCodeProperty()) {\r\n  <div class=\"attribute-code-header\">\r\n    <div class=\"attribute-code-actions\">\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.edit' | uiT: 'Edit code'\"\r\n        icon=\"edit_note\"\r\n        tone=\"subtle\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        (clicked)=\"openCodeEditor()\"\r\n      />\r\n      <builder-action-button\r\n        class=\"attribute-code-button-item\"\r\n        [label]=\"'code.builder.clear' | uiT: 'Clear'\"\r\n        icon=\"ink_eraser\"\r\n        tone=\"neutral\"\r\n        align=\"left\"\r\n        [fullWidth]=\"false\"\r\n        [disabled]=\"!hasCodeValue()\"\r\n        (clicked)=\"clearCodeValue()\"\r\n      />\r\n    </div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"attribute-code-help\"\r\n      (mouseenter)=\"showExpressionHelp($event)\"\r\n      (mouseleave)=\"hideExpressionHelp()\"\r\n      aria-label=\"{{ 'code.help' | uiT: 'Expression help' }}\"\r\n      title=\"{{ 'code.help' | uiT: 'Expression help' }}\"\r\n    >\r\n      <nvb-icon name=\"help\"></nvb-icon>\r\n    </button>\r\n  </div>\r\n  @if (expressionHelpVisible()) {\r\n    <app-tooltip\r\n      [text]=\"expressionHelpText()\"\r\n      [metaText]=\"expressionHelpMetaText()\"\r\n      [top]=\"expressionHelpTop()\"\r\n      [left]=\"expressionHelpLeft()\"\r\n      [interactive]=\"true\"\r\n      (mouseEntered)=\"keepExpressionHelpVisible()\"\r\n      (mouseLeft)=\"hideExpressionHelp()\"\r\n    />\r\n  }\r\n  <div class=\"code-preview\" [class.code-preview--empty]=\"!hasCodeValue()\">\r\n    <code>{{ property().value || ('code.empty' | uiT: 'Empty expression') }}</code>\r\n  </div>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    class=\"nvb-control__attribute-input\"\r\n    [spellcheck]=\"false\"\r\n    [value]=\"property().value\"\r\n    [attr.list]=\"shouldShowPlaceholderSuggestions() ? getSuggestionListId() : null\"\r\n    (input)=\"onInputValue($event.target.value)\"\r\n    (blur)=\"onBlurValue($event.target.value)\"\r\n  />\r\n\r\n  @if (shouldShowPlaceholderSuggestions()) {\r\n    <datalist [id]=\"getSuggestionListId()\">\r\n      @for (token of getPlaceholderSuggestions(); track token) {\r\n        <option [value]=\"token\"></option>\r\n      }\r\n    </datalist>\r\n  }\r\n}\r\n@if (property().error) {\r\n  <span class=\"error-message\">{{ property().error }}</span>\r\n}\r\n", styles: [".error-message{color:red;font-size:11px}.attribute-code-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.attribute-code-actions{display:inline-flex;gap:6px;flex-wrap:wrap}.attribute-code-button-item{flex:0 0 auto}.attribute-code-help{flex:0 0 auto;background:var(--color-neutral-000);color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutral-500);cursor:pointer}.attribute-code-help:hover{color:var(--color-primary-700)}.code-preview{display:block;margin-top:6px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:color-mix(in oklab,var(--color-neutral-050) 80%,transparent);padding:8px 10px;max-height:94px;overflow:auto}.code-preview code{display:block;color:var(--color-neutral-700);font-size:11px;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Courier New,monospace;line-height:1.35}.code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-700) 46%,var(--color-neutral-000));font-style:italic}:host-context([data-theme=dark]) .code-preview--empty,:host-context(.nvb-root.dark) .code-preview--empty,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty,:host-context(.dark) .code-preview--empty{background:color-mix(in oklch,var(--color-neutral-900) 72%,var(--color-neutral-700));border-color:color-mix(in oklch,var(--color-neutral-600) 68%,var(--color-neutral-700))}:host-context([data-theme=dark]) .code-preview--empty code,:host-context(.nvb-root.dark) .code-preview--empty code,:host-context(.nvb-root[data-theme=dark]) .code-preview--empty code,:host-context(.dark) .code-preview--empty code{color:color-mix(in oklch,var(--color-neutral-100) 68%,var(--color-neutral-400))}\n"] }]
         }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: false }] }], propertyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyKey", required: false }] }], ownerFocusKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ownerFocusKey", required: false }] }], ownerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ownerElement", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 class CheckboxAttribute {
@@ -76630,7 +76630,7 @@ class PropertiesSidebar {
         }
         const nameExists = this.structureService.checkNameExist(nextName);
         if (nameExists) {
-            property.error = 'Elemento vardas jau yra naudojamas';
+            property.error = 'Element name is already in use';
             return { shouldEmit: false, changedValue: property.value };
         }
         this.structureService.updateName(this.element()?.name, nextName);
@@ -76659,7 +76659,7 @@ class PropertiesSidebar {
             return;
         }
         if (this.structureService.checkNameExist(nextName)) {
-            property.error = 'Elemento vardas jau yra naudojamas';
+            property.error = 'Element name is already in use';
             return;
         }
         this.structureService.updateName(currentName, nextName);
@@ -79187,7 +79187,7 @@ class DataSource {
         return `${baseName}_${suffix}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DataSource, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DataSource, isStandalone: true, selector: "data-source", host: { listeners: { "input": "onAnyInputChange()", "change": "onAnyControlChange()" } }, ngImport: i0, template: "<div class=\"pages\" [class.pages--resizing]=\"isResizing()\" data-testid=\"data-source-root\">\r\n  <div class=\"pages__table-wrapper\" [style.width.%]=\"leftWidth()\" data-testid=\"data-source-list\">\r\n    @if (sources().length > 0) {\r\n      <table\r\n        class=\"source-list\"\r\n        [attr.aria-label]=\"'sources.table' | uiT: 'Data sources'\"\r\n        data-testid=\"data-source-table\"\r\n      >\r\n        <caption class=\"nvb-sr-only\">{{ 'sources.table' | uiT: 'Data sources' }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th>{{ 'sources.name' | uiT: 'Name' }}</th>\r\n            <th>{{ 'sources.title' | uiT: 'Title' }}</th>\r\n            <th class=\"source-list__actions-col\"></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (source of sources(); track $index) {\r\n            <tr\r\n              class=\"source-list__row\"\r\n              [class.selected-item]=\"$index === selectedIndex()\"\r\n              [tabIndex]=\"0\"\r\n              [attr.aria-selected]=\"$index === selectedIndex()\"\r\n              (click)=\"selectSource(source, $index)\"\r\n              [attr.data-testid]=\"'data-source-select-' + $index\"\r\n            >\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.name\"\r\n                  [placeholder]=\"getDefaultSourceName($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.name' | uiT: 'Name'\"\r\n                  [attr.data-testid]=\"'data-source-name-' + $index\"\r\n                />\r\n              </td>\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.title\"\r\n                  [placeholder]=\"getDefaultSourceTitle($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.title' | uiT: 'Title'\"\r\n                  [attr.data-testid]=\"'data-source-title-' + $index\"\r\n                />\r\n              </td>\r\n              <td class=\"source-list__actions-col\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"source-list__icon-button nvb-icon-button nvb-icon-button--danger nvb-icon-button--sm\"\r\n                  (click)=\"$event.stopPropagation(); deleteSource($index)\"\r\n                  [attr.aria-label]=\"'sources.delete' | uiT: 'Delete source'\"\r\n                  [attr.data-testid]=\"'data-source-delete-' + $index\"\r\n                >\r\n                  <nvb-icon name=\"delete\"></nvb-icon>\r\n                </button>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    } @else {\r\n      <small class=\"empty-sources\">{{\r\n        'sources.empty' | uiT: 'No data sources yet.'\r\n      }}</small>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    class=\"pages__resizer\"\r\n    (mousedown)=\"onMouseDown($event)\"\r\n    data-testid=\"data-source-resizer\"\r\n  ></div>\r\n\r\n  <div class=\"pages__content\" data-testid=\"data-source-editor\">\r\n    @if (selectedSource(); as source) {\r\n      <div class=\"form-wrapper\">\r\n        <attribute-input-wrapper\r\n          [label]=\"'sources.type' | uiT: 'Type'\"\r\n          [tooltip]=\"fieldTooltips['type']\"\r\n        >\r\n          <div class=\"type-warapper\">\r\n            @if (isSourceTypeVisible('rest')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"rest\"\r\n                />\r\n                <label>{{ 'sources.type.rest' | uiT: 'REST' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('route')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"route\"\r\n                />\r\n                <label>{{ 'sources.type.route' | uiT: 'Route data' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('local')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"local\"\r\n                />\r\n                <label>{{ 'sources.type.local' | uiT: 'Local JSON' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('graphql')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"graphql\"\r\n                />\r\n                <label>{{ 'sources.type.graphql' | uiT: 'GraphQL' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('websocket')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"websocket\"\r\n                />\r\n                <label>{{ 'sources.type.websocket' | uiT: 'WebSocket' }}</label>\r\n              </div>\r\n            }\r\n          </div>\r\n        </attribute-input-wrapper>\r\n\r\n        @if (source.type === 'rest') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.method' | uiT: 'Metodas'\"\r\n            [tooltip]=\"fieldTooltips['method']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                  value=\"GET\"\r\n                />\r\n                <label>GET</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"TABLE-POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>TABLE-POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PUT\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PUT</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PATCH\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PATCH</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"DELETE\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>DELETE</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n            @if (isRestUrlMissing(source)) {\r\n              <small class=\"field-hint field-hint--error\">\r\n                {{ 'sources.urlRequired' | uiT: 'REST request URL yra privalomas.' }}\r\n              </small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          @if (shouldShowBodyEditor(source)) {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.body' | uiT: 'Request body (optional)'\"\r\n              [tooltip]=\"fieldTooltips['body']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openBodyJsonObjectCreator()\"\r\n                  data-testid=\"data-source-body-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n                @if (showBodyEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"bodyEditorValue()\"\r\n                    (valueChange)=\"onBodyTemplateChange($event)\"\r\n                    (editorBlur)=\"onBodyTemplateBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (bodyFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ bodyFormatError() }}</small>\r\n              }\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.bodyHint'\r\n                    | uiT\r\n                      : 'Use {...} placeholders, e.g. {id} for the URL or {__table.el1.selectedRows} for the body.'\r\n                }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n\r\n        @if (source.type === 'route') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routeKey' | uiT: 'Route data key'\"\r\n            [tooltip]=\"fieldTooltips['routeKey']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataKey']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routePath' | uiT: 'Data path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['routePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataPath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'graphql') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlQuery' | uiT: 'GraphQL query'\"\r\n            [tooltip]=\"fieldTooltips['graphqlQuery']\"\r\n          >\r\n            <textarea\r\n              class=\"nvb-control__textarea-input\"\r\n              rows=\"8\"\r\n              [(ngModel)]=\"source.params['query']\"\r\n            ></textarea>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlOperationName' | uiT: 'Operation name (optional)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlOperationName']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['operationName']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlVariables' | uiT: 'Variables JSON'\"\r\n            [tooltip]=\"fieldTooltips['graphqlVariables']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openGraphqlVariablesJsonObjectCreator()\"\r\n                data-testid=\"data-source-graphql-variables-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showGraphqlVariablesEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"graphqlVariablesEditorValue()\"\r\n                  (valueChange)=\"onGraphqlVariablesChange($event)\"\r\n                  (editorBlur)=\"onGraphqlVariablesBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (graphqlVariablesFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                graphqlVariablesFormatError()\r\n              }}</small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlResponsePath' | uiT: 'Response path (default: data)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlResponsePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['responsePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'websocket') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketProtocols' | uiT: 'Protocols (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketProtocols']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['protocols']\"\r\n              [placeholder]=\"'json, updates'\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessage' | uiT: 'Connect message (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessage']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openWebsocketMessageJsonObjectCreator()\"\r\n                data-testid=\"data-source-websocket-message-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showWebsocketMessageEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"websocketMessageEditorValue()\"\r\n                  (valueChange)=\"onWebsocketMessageChange($event)\"\r\n                  (editorBlur)=\"onWebsocketMessageBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (websocketMessageFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                websocketMessageFormatError()\r\n              }}</small>\r\n            }\r\n            <small class=\"field-hint\">\r\n              {{\r\n                'sources.websocketMessageHint'\r\n                  | uiT\r\n                    : 'If the text is JSON, it will be sent as an object. Otherwise as raw text.'\r\n              }}\r\n            </small>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessagePath' | uiT: 'Message path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessagePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['messagePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessageMode' | uiT: 'Update mode'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessageMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"replaceCurrent\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.replace'\r\n                    | uiT: 'Replace current value'\r\n                }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"pushValuesInArray\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.push'\r\n                    | uiT: 'Push values in array'\r\n                }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'local') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.localMode' | uiT: 'Local mode'\"\r\n            [tooltip]=\"fieldTooltips['localMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"json\"\r\n                />\r\n                <label>{{ 'sources.localMode.json' | uiT: 'JSON' }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"dataPath\"\r\n                />\r\n                <label>{{ 'sources.localMode.path' | uiT: 'Field value' }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          @if ((source.params['localMode'] || 'json') === 'json') {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localJson' | uiT: 'JSON data'\"\r\n              [tooltip]=\"fieldTooltips['localJson']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openLocalJsonObjectCreator()\"\r\n                  data-testid=\"data-source-local-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--local-json\">\r\n                @if (showLocalJsonEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"localJsonEditorValue()\"\r\n                    (valueChange)=\"onLocalJsonChange($event)\"\r\n                    (editorBlur)=\"onLocalJsonBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (localJsonFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ localJsonFormatError() }}</small>\r\n              }\r\n            </attribute-input-wrapper>\r\n\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localFunction' | uiT: 'Data function (optional)'\"\r\n              [tooltip]=\"fieldTooltips['localFunction']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataFunction']\"\r\n                [placeholder]=\"\r\n                  '{{ collectValuesFrom({orders}, \\&quot;id\\&quot;, true) }} or data'\r\n                \"\r\n              />\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.localFunctionHint'\r\n                    | uiT: 'Supports {{ ... }} expressions in JSON fields and a final dataFunction expression. Context: all fields + data.' }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          } @else {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.dataPath' | uiT: 'Data path'\"\r\n              [tooltip]=\"fieldTooltips['dataPath']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataPath']\"\r\n                list=\"data-source-path-list\"\r\n              />\r\n              <datalist id=\"data-source-path-list\">\r\n                @for (path of allElementPaths(); track path) {\r\n                  <option [value]=\"path\"></option>\r\n                }\r\n              </datalist>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"empty-sources-empty-state\">\r\n        <small>{{ 'sources.emptySelect' | uiT: 'Select a data source to edit.' }}</small>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isBodyJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Request body builder'\"\r\n  [initialJson]=\"bodyJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to request body'\"\r\n  (closed)=\"closeBodyJsonObjectCreator()\"\r\n  (saved)=\"onBodyJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isLocalJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Local JSON builder'\"\r\n  [initialJson]=\"localJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'array'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to JSON'\"\r\n  (closed)=\"closeLocalJsonObjectCreator()\"\r\n  (saved)=\"onLocalJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isGraphqlVariablesJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'GraphQL variables builder'\"\r\n  [initialJson]=\"graphqlVariablesJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to GraphQL variables'\"\r\n  (closed)=\"closeGraphqlVariablesJsonObjectCreator()\"\r\n  (saved)=\"onGraphqlVariablesJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isWebsocketMessageJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'WebSocket message builder'\"\r\n  [initialJson]=\"websocketMessageJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to WebSocket message'\"\r\n  (closed)=\"closeWebsocketMessageJsonObjectCreator()\"\r\n  (saved)=\"onWebsocketMessageJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n", styles: [":host{height:100%;background-color:var(--color-neutral-000)}.pages{display:flex;height:100%;position:relative}.pages__table{height:fit-content;width:100%}.pages__table td{border:1px solid var(--color-neutral-300);color:var(--color-neutral-600);padding:2px}.pages__table-item-config{font-size:14px;display:flex;justify-content:center;align-items:center}.pages__table-item-config span{font-size:16px;color:var(--color-neutral-600)}.pages__table-item-drag{color:var(--color-neutral-600);font-size:16px;display:flex;justify-content:center;align-items:center}.pages__table-wrapper{border-right:1px solid var(--color-neutral-300);background:var(--color-neutral-000);overflow:auto}.pages__resizer{width:4px;background-color:var(--color-neutral-300);cursor:col-resize;flex-shrink:0;position:relative;transition:background-color .2s}.pages__resizer:before{content:\"\";position:absolute;inset:0 -3px;cursor:col-resize}.pages__resizer:hover{background-color:var(--color-primary-500, #4a90e2)}.pages__resizer:active{background-color:var(--color-primary-600, #357abd)}.pages__content{flex:1 1 auto;overflow-y:auto;padding:10px}.pages--resizing .pages__resizer{background-color:var(--color-primary-600, #357abd)}.source-list{width:100%;min-width:360px;border-collapse:collapse;table-layout:fixed}.source-list th,.source-list td{border-bottom:1px solid var(--color-neutral-200);border-right:1px solid var(--color-neutral-200);padding:6px;text-align:left;vertical-align:middle}.source-list th{position:sticky;top:0;z-index:1;background:var(--color-neutral-050);color:var(--color-neutral-700);font-size:12px;font-weight:600}.source-list th:last-child,.source-list td:last-child{border-right:none}.source-list__row{cursor:pointer}.source-list__row:hover td{background:color-mix(in oklab,var(--color-primary-050) 30%,transparent)}.source-list__input{--nvb-input-height: 32px;--nvb-input-font-size: 12px;width:100%;height:32px;min-height:32px;font-size:12px}.source-list__actions-col{width:44px;text-align:center!important}.source-list__icon-button{margin:0 auto}.source-actions{display:flex;flex-direction:row;justify-content:end;padding:8px 8px 0;width:100%}.type-warapper{padding-top:2px;display:flex;gap:14px;flex-wrap:wrap}.radio-wrapper{display:flex;gap:6px;color:var(--color-neutral-600);font-size:13px;align-items:center}.form-wrapper{display:flex;flex-direction:column;gap:12px}.selected-item{outline:1px solid var(--color-primary-600);outline-offset:-1px;cursor:pointer}.source-list__row.selected-item td{background:color-mix(in oklab,var(--color-primary-050) 55%,var(--color-neutral-000))}.text-area{resize:vertical}.code-editor-wrapper{border-radius:8px;overflow:hidden;min-height:200px}.code-editor-wrapper--body{min-height:220px;height:220px}.code-editor-wrapper--local-json{min-height:260px;height:260px}.json-builder-toolbar{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.field-hint{margin-top:4px;display:block;color:var(--color-neutral-500);font-size:11px}.field-hint--error{color:var(--color-risk-700)}.empty-sources{display:block;padding:12px;color:var(--color-neutral-600)}.empty-sources-empty-state{color:var(--color-neutral-600);height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: AttributeInputWrapper, selector: "attribute-input-wrapper", inputs: ["label", "tooltip", "isRequired"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: NativeCodeEditor, selector: "native-code-editor", inputs: ["value", "language", "theme", "readOnly", "completions"], outputs: ["valueChange", "editorBlur"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: NvbJsonObjectCreator, selector: "nvb-json-object-creator", inputs: ["open", "title", "initialJson", "initialRootType", "bindingPaths", "cancelLabel", "saveLabel"], outputs: ["closed", "saved"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DataSource, isStandalone: true, selector: "data-source", host: { listeners: { "input": "onAnyInputChange()", "change": "onAnyControlChange()" } }, ngImport: i0, template: "<div class=\"pages\" [class.pages--resizing]=\"isResizing()\" data-testid=\"data-source-root\">\r\n  <div class=\"pages__table-wrapper\" [style.width.%]=\"leftWidth()\" data-testid=\"data-source-list\">\r\n    @if (sources().length > 0) {\r\n      <table\r\n        class=\"source-list\"\r\n        [attr.aria-label]=\"'sources.table' | uiT: 'Data sources'\"\r\n        data-testid=\"data-source-table\"\r\n      >\r\n        <caption class=\"nvb-sr-only\">{{ 'sources.table' | uiT: 'Data sources' }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th>{{ 'sources.name' | uiT: 'Name' }}</th>\r\n            <th>{{ 'sources.title' | uiT: 'Title' }}</th>\r\n            <th class=\"source-list__actions-col\"></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (source of sources(); track $index) {\r\n            <tr\r\n              class=\"source-list__row\"\r\n              [class.selected-item]=\"$index === selectedIndex()\"\r\n              [tabIndex]=\"0\"\r\n              [attr.aria-selected]=\"$index === selectedIndex()\"\r\n              (click)=\"selectSource(source, $index)\"\r\n              [attr.data-testid]=\"'data-source-select-' + $index\"\r\n            >\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.name\"\r\n                  [placeholder]=\"getDefaultSourceName($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.name' | uiT: 'Name'\"\r\n                  [attr.data-testid]=\"'data-source-name-' + $index\"\r\n                />\r\n              </td>\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.title\"\r\n                  [placeholder]=\"getDefaultSourceTitle($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.title' | uiT: 'Title'\"\r\n                  [attr.data-testid]=\"'data-source-title-' + $index\"\r\n                />\r\n              </td>\r\n              <td class=\"source-list__actions-col\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"source-list__icon-button nvb-icon-button nvb-icon-button--danger nvb-icon-button--sm\"\r\n                  (click)=\"$event.stopPropagation(); deleteSource($index)\"\r\n                  [attr.aria-label]=\"'sources.delete' | uiT: 'Delete source'\"\r\n                  [attr.data-testid]=\"'data-source-delete-' + $index\"\r\n                >\r\n                  <nvb-icon name=\"delete\"></nvb-icon>\r\n                </button>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    } @else {\r\n      <small class=\"empty-sources\">{{\r\n        'sources.empty' | uiT: 'No data sources yet.'\r\n      }}</small>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    class=\"pages__resizer\"\r\n    (mousedown)=\"onMouseDown($event)\"\r\n    data-testid=\"data-source-resizer\"\r\n  ></div>\r\n\r\n  <div class=\"pages__content\" data-testid=\"data-source-editor\">\r\n    @if (selectedSource(); as source) {\r\n      <div class=\"form-wrapper\">\r\n        <attribute-input-wrapper\r\n          [label]=\"'sources.type' | uiT: 'Type'\"\r\n          [tooltip]=\"fieldTooltips['type']\"\r\n        >\r\n          <div class=\"type-warapper\">\r\n            @if (isSourceTypeVisible('rest')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"rest\"\r\n                />\r\n                <label>{{ 'sources.type.rest' | uiT: 'REST' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('route')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"route\"\r\n                />\r\n                <label>{{ 'sources.type.route' | uiT: 'Route data' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('local')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"local\"\r\n                />\r\n                <label>{{ 'sources.type.local' | uiT: 'Local JSON' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('graphql')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"graphql\"\r\n                />\r\n                <label>{{ 'sources.type.graphql' | uiT: 'GraphQL' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('websocket')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"websocket\"\r\n                />\r\n                <label>{{ 'sources.type.websocket' | uiT: 'WebSocket' }}</label>\r\n              </div>\r\n            }\r\n          </div>\r\n        </attribute-input-wrapper>\r\n\r\n        @if (source.type === 'rest') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.method' | uiT: 'Metodas'\"\r\n            [tooltip]=\"fieldTooltips['method']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                  value=\"GET\"\r\n                />\r\n                <label>GET</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"TABLE-POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>TABLE-POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PUT\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PUT</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PATCH\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PATCH</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"DELETE\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>DELETE</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n            @if (isRestUrlMissing(source)) {\r\n              <small class=\"field-hint field-hint--error\">\r\n                {{ 'sources.urlRequired' | uiT: 'REST request URL is required.' }}\r\n              </small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          @if (shouldShowBodyEditor(source)) {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.body' | uiT: 'Request body (optional)'\"\r\n              [tooltip]=\"fieldTooltips['body']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openBodyJsonObjectCreator()\"\r\n                  data-testid=\"data-source-body-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n                @if (showBodyEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"bodyEditorValue()\"\r\n                    (valueChange)=\"onBodyTemplateChange($event)\"\r\n                    (editorBlur)=\"onBodyTemplateBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (bodyFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ bodyFormatError() }}</small>\r\n              }\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.bodyHint'\r\n                    | uiT\r\n                      : 'Use {...} placeholders, e.g. {id} for the URL or {__table.el1.selectedRows} for the body.'\r\n                }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n\r\n        @if (source.type === 'route') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routeKey' | uiT: 'Route data key'\"\r\n            [tooltip]=\"fieldTooltips['routeKey']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataKey']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routePath' | uiT: 'Data path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['routePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataPath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'graphql') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlQuery' | uiT: 'GraphQL query'\"\r\n            [tooltip]=\"fieldTooltips['graphqlQuery']\"\r\n          >\r\n            <textarea\r\n              class=\"nvb-control__textarea-input\"\r\n              rows=\"8\"\r\n              [(ngModel)]=\"source.params['query']\"\r\n            ></textarea>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlOperationName' | uiT: 'Operation name (optional)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlOperationName']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['operationName']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlVariables' | uiT: 'Variables JSON'\"\r\n            [tooltip]=\"fieldTooltips['graphqlVariables']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openGraphqlVariablesJsonObjectCreator()\"\r\n                data-testid=\"data-source-graphql-variables-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showGraphqlVariablesEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"graphqlVariablesEditorValue()\"\r\n                  (valueChange)=\"onGraphqlVariablesChange($event)\"\r\n                  (editorBlur)=\"onGraphqlVariablesBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (graphqlVariablesFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                graphqlVariablesFormatError()\r\n              }}</small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlResponsePath' | uiT: 'Response path (default: data)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlResponsePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['responsePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'websocket') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketProtocols' | uiT: 'Protocols (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketProtocols']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['protocols']\"\r\n              [placeholder]=\"'json, updates'\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessage' | uiT: 'Connect message (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessage']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openWebsocketMessageJsonObjectCreator()\"\r\n                data-testid=\"data-source-websocket-message-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showWebsocketMessageEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"websocketMessageEditorValue()\"\r\n                  (valueChange)=\"onWebsocketMessageChange($event)\"\r\n                  (editorBlur)=\"onWebsocketMessageBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (websocketMessageFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                websocketMessageFormatError()\r\n              }}</small>\r\n            }\r\n            <small class=\"field-hint\">\r\n              {{\r\n                'sources.websocketMessageHint'\r\n                  | uiT\r\n                    : 'If the text is JSON, it will be sent as an object. Otherwise as raw text.'\r\n              }}\r\n            </small>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessagePath' | uiT: 'Message path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessagePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['messagePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessageMode' | uiT: 'Update mode'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessageMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"replaceCurrent\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.replace'\r\n                    | uiT: 'Replace current value'\r\n                }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"pushValuesInArray\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.push'\r\n                    | uiT: 'Push values in array'\r\n                }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'local') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.localMode' | uiT: 'Local mode'\"\r\n            [tooltip]=\"fieldTooltips['localMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"json\"\r\n                />\r\n                <label>{{ 'sources.localMode.json' | uiT: 'JSON' }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"dataPath\"\r\n                />\r\n                <label>{{ 'sources.localMode.path' | uiT: 'Field value' }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          @if ((source.params['localMode'] || 'json') === 'json') {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localJson' | uiT: 'JSON data'\"\r\n              [tooltip]=\"fieldTooltips['localJson']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openLocalJsonObjectCreator()\"\r\n                  data-testid=\"data-source-local-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--local-json\">\r\n                @if (showLocalJsonEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"localJsonEditorValue()\"\r\n                    (valueChange)=\"onLocalJsonChange($event)\"\r\n                    (editorBlur)=\"onLocalJsonBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (localJsonFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ localJsonFormatError() }}</small>\r\n              }\r\n            </attribute-input-wrapper>\r\n\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localFunction' | uiT: 'Data function (optional)'\"\r\n              [tooltip]=\"fieldTooltips['localFunction']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataFunction']\"\r\n                [placeholder]=\"\r\n                  '{{ collectValuesFrom({orders}, \\&quot;id\\&quot;, true) }} or data'\r\n                \"\r\n              />\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.localFunctionHint'\r\n                    | uiT: 'Supports {{ ... }} expressions in JSON fields and a final dataFunction expression. Context: all fields + data.' }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          } @else {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.dataPath' | uiT: 'Data path'\"\r\n              [tooltip]=\"fieldTooltips['dataPath']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataPath']\"\r\n                list=\"data-source-path-list\"\r\n              />\r\n              <datalist id=\"data-source-path-list\">\r\n                @for (path of allElementPaths(); track path) {\r\n                  <option [value]=\"path\"></option>\r\n                }\r\n              </datalist>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"empty-sources-empty-state\">\r\n        <small>{{ 'sources.emptySelect' | uiT: 'Select a data source to edit.' }}</small>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isBodyJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Request body builder'\"\r\n  [initialJson]=\"bodyJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to request body'\"\r\n  (closed)=\"closeBodyJsonObjectCreator()\"\r\n  (saved)=\"onBodyJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isLocalJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Local JSON builder'\"\r\n  [initialJson]=\"localJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'array'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to JSON'\"\r\n  (closed)=\"closeLocalJsonObjectCreator()\"\r\n  (saved)=\"onLocalJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isGraphqlVariablesJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'GraphQL variables builder'\"\r\n  [initialJson]=\"graphqlVariablesJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to GraphQL variables'\"\r\n  (closed)=\"closeGraphqlVariablesJsonObjectCreator()\"\r\n  (saved)=\"onGraphqlVariablesJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isWebsocketMessageJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'WebSocket message builder'\"\r\n  [initialJson]=\"websocketMessageJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to WebSocket message'\"\r\n  (closed)=\"closeWebsocketMessageJsonObjectCreator()\"\r\n  (saved)=\"onWebsocketMessageJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n", styles: [":host{height:100%;background-color:var(--color-neutral-000)}.pages{display:flex;height:100%;position:relative}.pages__table{height:fit-content;width:100%}.pages__table td{border:1px solid var(--color-neutral-300);color:var(--color-neutral-600);padding:2px}.pages__table-item-config{font-size:14px;display:flex;justify-content:center;align-items:center}.pages__table-item-config span{font-size:16px;color:var(--color-neutral-600)}.pages__table-item-drag{color:var(--color-neutral-600);font-size:16px;display:flex;justify-content:center;align-items:center}.pages__table-wrapper{border-right:1px solid var(--color-neutral-300);background:var(--color-neutral-000);overflow:auto}.pages__resizer{width:4px;background-color:var(--color-neutral-300);cursor:col-resize;flex-shrink:0;position:relative;transition:background-color .2s}.pages__resizer:before{content:\"\";position:absolute;inset:0 -3px;cursor:col-resize}.pages__resizer:hover{background-color:var(--color-primary-500, #4a90e2)}.pages__resizer:active{background-color:var(--color-primary-600, #357abd)}.pages__content{flex:1 1 auto;overflow-y:auto;padding:10px}.pages--resizing .pages__resizer{background-color:var(--color-primary-600, #357abd)}.source-list{width:100%;min-width:360px;border-collapse:collapse;table-layout:fixed}.source-list th,.source-list td{border-bottom:1px solid var(--color-neutral-200);border-right:1px solid var(--color-neutral-200);padding:6px;text-align:left;vertical-align:middle}.source-list th{position:sticky;top:0;z-index:1;background:var(--color-neutral-050);color:var(--color-neutral-700);font-size:12px;font-weight:600}.source-list th:last-child,.source-list td:last-child{border-right:none}.source-list__row{cursor:pointer}.source-list__row:hover td{background:color-mix(in oklab,var(--color-primary-050) 30%,transparent)}.source-list__input{--nvb-input-height: 32px;--nvb-input-font-size: 12px;width:100%;height:32px;min-height:32px;font-size:12px}.source-list__actions-col{width:44px;text-align:center!important}.source-list__icon-button{margin:0 auto}.source-actions{display:flex;flex-direction:row;justify-content:end;padding:8px 8px 0;width:100%}.type-warapper{padding-top:2px;display:flex;gap:14px;flex-wrap:wrap}.radio-wrapper{display:flex;gap:6px;color:var(--color-neutral-600);font-size:13px;align-items:center}.form-wrapper{display:flex;flex-direction:column;gap:12px}.selected-item{outline:1px solid var(--color-primary-600);outline-offset:-1px;cursor:pointer}.source-list__row.selected-item td{background:color-mix(in oklab,var(--color-primary-050) 55%,var(--color-neutral-000))}.text-area{resize:vertical}.code-editor-wrapper{border-radius:8px;overflow:hidden;min-height:200px}.code-editor-wrapper--body{min-height:220px;height:220px}.code-editor-wrapper--local-json{min-height:260px;height:260px}.json-builder-toolbar{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.field-hint{margin-top:4px;display:block;color:var(--color-neutral-500);font-size:11px}.field-hint--error{color:var(--color-risk-700)}.empty-sources{display:block;padding:12px;color:var(--color-neutral-600)}.empty-sources-empty-state{color:var(--color-neutral-600);height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: AttributeInputWrapper, selector: "attribute-input-wrapper", inputs: ["label", "tooltip", "isRequired"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: NativeCodeEditor, selector: "native-code-editor", inputs: ["value", "language", "theme", "readOnly", "completions"], outputs: ["valueChange", "editorBlur"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "component", type: NvbJsonObjectCreator, selector: "nvb-json-object-creator", inputs: ["open", "title", "initialJson", "initialRootType", "bindingPaths", "cancelLabel", "saveLabel"], outputs: ["closed", "saved"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DataSource, decorators: [{
             type: Component,
@@ -79198,7 +79198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NativeCodeEditor,
                         NvbIcon,
                         NvbJsonObjectCreator,
-                    ], template: "<div class=\"pages\" [class.pages--resizing]=\"isResizing()\" data-testid=\"data-source-root\">\r\n  <div class=\"pages__table-wrapper\" [style.width.%]=\"leftWidth()\" data-testid=\"data-source-list\">\r\n    @if (sources().length > 0) {\r\n      <table\r\n        class=\"source-list\"\r\n        [attr.aria-label]=\"'sources.table' | uiT: 'Data sources'\"\r\n        data-testid=\"data-source-table\"\r\n      >\r\n        <caption class=\"nvb-sr-only\">{{ 'sources.table' | uiT: 'Data sources' }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th>{{ 'sources.name' | uiT: 'Name' }}</th>\r\n            <th>{{ 'sources.title' | uiT: 'Title' }}</th>\r\n            <th class=\"source-list__actions-col\"></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (source of sources(); track $index) {\r\n            <tr\r\n              class=\"source-list__row\"\r\n              [class.selected-item]=\"$index === selectedIndex()\"\r\n              [tabIndex]=\"0\"\r\n              [attr.aria-selected]=\"$index === selectedIndex()\"\r\n              (click)=\"selectSource(source, $index)\"\r\n              [attr.data-testid]=\"'data-source-select-' + $index\"\r\n            >\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.name\"\r\n                  [placeholder]=\"getDefaultSourceName($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.name' | uiT: 'Name'\"\r\n                  [attr.data-testid]=\"'data-source-name-' + $index\"\r\n                />\r\n              </td>\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.title\"\r\n                  [placeholder]=\"getDefaultSourceTitle($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.title' | uiT: 'Title'\"\r\n                  [attr.data-testid]=\"'data-source-title-' + $index\"\r\n                />\r\n              </td>\r\n              <td class=\"source-list__actions-col\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"source-list__icon-button nvb-icon-button nvb-icon-button--danger nvb-icon-button--sm\"\r\n                  (click)=\"$event.stopPropagation(); deleteSource($index)\"\r\n                  [attr.aria-label]=\"'sources.delete' | uiT: 'Delete source'\"\r\n                  [attr.data-testid]=\"'data-source-delete-' + $index\"\r\n                >\r\n                  <nvb-icon name=\"delete\"></nvb-icon>\r\n                </button>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    } @else {\r\n      <small class=\"empty-sources\">{{\r\n        'sources.empty' | uiT: 'No data sources yet.'\r\n      }}</small>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    class=\"pages__resizer\"\r\n    (mousedown)=\"onMouseDown($event)\"\r\n    data-testid=\"data-source-resizer\"\r\n  ></div>\r\n\r\n  <div class=\"pages__content\" data-testid=\"data-source-editor\">\r\n    @if (selectedSource(); as source) {\r\n      <div class=\"form-wrapper\">\r\n        <attribute-input-wrapper\r\n          [label]=\"'sources.type' | uiT: 'Type'\"\r\n          [tooltip]=\"fieldTooltips['type']\"\r\n        >\r\n          <div class=\"type-warapper\">\r\n            @if (isSourceTypeVisible('rest')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"rest\"\r\n                />\r\n                <label>{{ 'sources.type.rest' | uiT: 'REST' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('route')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"route\"\r\n                />\r\n                <label>{{ 'sources.type.route' | uiT: 'Route data' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('local')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"local\"\r\n                />\r\n                <label>{{ 'sources.type.local' | uiT: 'Local JSON' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('graphql')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"graphql\"\r\n                />\r\n                <label>{{ 'sources.type.graphql' | uiT: 'GraphQL' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('websocket')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"websocket\"\r\n                />\r\n                <label>{{ 'sources.type.websocket' | uiT: 'WebSocket' }}</label>\r\n              </div>\r\n            }\r\n          </div>\r\n        </attribute-input-wrapper>\r\n\r\n        @if (source.type === 'rest') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.method' | uiT: 'Metodas'\"\r\n            [tooltip]=\"fieldTooltips['method']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                  value=\"GET\"\r\n                />\r\n                <label>GET</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"TABLE-POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>TABLE-POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PUT\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PUT</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PATCH\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PATCH</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"DELETE\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>DELETE</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n            @if (isRestUrlMissing(source)) {\r\n              <small class=\"field-hint field-hint--error\">\r\n                {{ 'sources.urlRequired' | uiT: 'REST request URL yra privalomas.' }}\r\n              </small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          @if (shouldShowBodyEditor(source)) {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.body' | uiT: 'Request body (optional)'\"\r\n              [tooltip]=\"fieldTooltips['body']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openBodyJsonObjectCreator()\"\r\n                  data-testid=\"data-source-body-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n                @if (showBodyEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"bodyEditorValue()\"\r\n                    (valueChange)=\"onBodyTemplateChange($event)\"\r\n                    (editorBlur)=\"onBodyTemplateBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (bodyFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ bodyFormatError() }}</small>\r\n              }\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.bodyHint'\r\n                    | uiT\r\n                      : 'Use {...} placeholders, e.g. {id} for the URL or {__table.el1.selectedRows} for the body.'\r\n                }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n\r\n        @if (source.type === 'route') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routeKey' | uiT: 'Route data key'\"\r\n            [tooltip]=\"fieldTooltips['routeKey']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataKey']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routePath' | uiT: 'Data path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['routePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataPath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'graphql') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlQuery' | uiT: 'GraphQL query'\"\r\n            [tooltip]=\"fieldTooltips['graphqlQuery']\"\r\n          >\r\n            <textarea\r\n              class=\"nvb-control__textarea-input\"\r\n              rows=\"8\"\r\n              [(ngModel)]=\"source.params['query']\"\r\n            ></textarea>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlOperationName' | uiT: 'Operation name (optional)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlOperationName']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['operationName']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlVariables' | uiT: 'Variables JSON'\"\r\n            [tooltip]=\"fieldTooltips['graphqlVariables']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openGraphqlVariablesJsonObjectCreator()\"\r\n                data-testid=\"data-source-graphql-variables-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showGraphqlVariablesEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"graphqlVariablesEditorValue()\"\r\n                  (valueChange)=\"onGraphqlVariablesChange($event)\"\r\n                  (editorBlur)=\"onGraphqlVariablesBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (graphqlVariablesFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                graphqlVariablesFormatError()\r\n              }}</small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlResponsePath' | uiT: 'Response path (default: data)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlResponsePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['responsePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'websocket') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketProtocols' | uiT: 'Protocols (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketProtocols']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['protocols']\"\r\n              [placeholder]=\"'json, updates'\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessage' | uiT: 'Connect message (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessage']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openWebsocketMessageJsonObjectCreator()\"\r\n                data-testid=\"data-source-websocket-message-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showWebsocketMessageEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"websocketMessageEditorValue()\"\r\n                  (valueChange)=\"onWebsocketMessageChange($event)\"\r\n                  (editorBlur)=\"onWebsocketMessageBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (websocketMessageFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                websocketMessageFormatError()\r\n              }}</small>\r\n            }\r\n            <small class=\"field-hint\">\r\n              {{\r\n                'sources.websocketMessageHint'\r\n                  | uiT\r\n                    : 'If the text is JSON, it will be sent as an object. Otherwise as raw text.'\r\n              }}\r\n            </small>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessagePath' | uiT: 'Message path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessagePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['messagePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessageMode' | uiT: 'Update mode'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessageMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"replaceCurrent\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.replace'\r\n                    | uiT: 'Replace current value'\r\n                }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"pushValuesInArray\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.push'\r\n                    | uiT: 'Push values in array'\r\n                }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'local') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.localMode' | uiT: 'Local mode'\"\r\n            [tooltip]=\"fieldTooltips['localMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"json\"\r\n                />\r\n                <label>{{ 'sources.localMode.json' | uiT: 'JSON' }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"dataPath\"\r\n                />\r\n                <label>{{ 'sources.localMode.path' | uiT: 'Field value' }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          @if ((source.params['localMode'] || 'json') === 'json') {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localJson' | uiT: 'JSON data'\"\r\n              [tooltip]=\"fieldTooltips['localJson']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openLocalJsonObjectCreator()\"\r\n                  data-testid=\"data-source-local-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--local-json\">\r\n                @if (showLocalJsonEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"localJsonEditorValue()\"\r\n                    (valueChange)=\"onLocalJsonChange($event)\"\r\n                    (editorBlur)=\"onLocalJsonBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (localJsonFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ localJsonFormatError() }}</small>\r\n              }\r\n            </attribute-input-wrapper>\r\n\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localFunction' | uiT: 'Data function (optional)'\"\r\n              [tooltip]=\"fieldTooltips['localFunction']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataFunction']\"\r\n                [placeholder]=\"\r\n                  '{{ collectValuesFrom({orders}, \\&quot;id\\&quot;, true) }} or data'\r\n                \"\r\n              />\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.localFunctionHint'\r\n                    | uiT: 'Supports {{ ... }} expressions in JSON fields and a final dataFunction expression. Context: all fields + data.' }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          } @else {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.dataPath' | uiT: 'Data path'\"\r\n              [tooltip]=\"fieldTooltips['dataPath']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataPath']\"\r\n                list=\"data-source-path-list\"\r\n              />\r\n              <datalist id=\"data-source-path-list\">\r\n                @for (path of allElementPaths(); track path) {\r\n                  <option [value]=\"path\"></option>\r\n                }\r\n              </datalist>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"empty-sources-empty-state\">\r\n        <small>{{ 'sources.emptySelect' | uiT: 'Select a data source to edit.' }}</small>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isBodyJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Request body builder'\"\r\n  [initialJson]=\"bodyJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to request body'\"\r\n  (closed)=\"closeBodyJsonObjectCreator()\"\r\n  (saved)=\"onBodyJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isLocalJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Local JSON builder'\"\r\n  [initialJson]=\"localJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'array'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to JSON'\"\r\n  (closed)=\"closeLocalJsonObjectCreator()\"\r\n  (saved)=\"onLocalJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isGraphqlVariablesJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'GraphQL variables builder'\"\r\n  [initialJson]=\"graphqlVariablesJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to GraphQL variables'\"\r\n  (closed)=\"closeGraphqlVariablesJsonObjectCreator()\"\r\n  (saved)=\"onGraphqlVariablesJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isWebsocketMessageJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'WebSocket message builder'\"\r\n  [initialJson]=\"websocketMessageJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to WebSocket message'\"\r\n  (closed)=\"closeWebsocketMessageJsonObjectCreator()\"\r\n  (saved)=\"onWebsocketMessageJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n", styles: [":host{height:100%;background-color:var(--color-neutral-000)}.pages{display:flex;height:100%;position:relative}.pages__table{height:fit-content;width:100%}.pages__table td{border:1px solid var(--color-neutral-300);color:var(--color-neutral-600);padding:2px}.pages__table-item-config{font-size:14px;display:flex;justify-content:center;align-items:center}.pages__table-item-config span{font-size:16px;color:var(--color-neutral-600)}.pages__table-item-drag{color:var(--color-neutral-600);font-size:16px;display:flex;justify-content:center;align-items:center}.pages__table-wrapper{border-right:1px solid var(--color-neutral-300);background:var(--color-neutral-000);overflow:auto}.pages__resizer{width:4px;background-color:var(--color-neutral-300);cursor:col-resize;flex-shrink:0;position:relative;transition:background-color .2s}.pages__resizer:before{content:\"\";position:absolute;inset:0 -3px;cursor:col-resize}.pages__resizer:hover{background-color:var(--color-primary-500, #4a90e2)}.pages__resizer:active{background-color:var(--color-primary-600, #357abd)}.pages__content{flex:1 1 auto;overflow-y:auto;padding:10px}.pages--resizing .pages__resizer{background-color:var(--color-primary-600, #357abd)}.source-list{width:100%;min-width:360px;border-collapse:collapse;table-layout:fixed}.source-list th,.source-list td{border-bottom:1px solid var(--color-neutral-200);border-right:1px solid var(--color-neutral-200);padding:6px;text-align:left;vertical-align:middle}.source-list th{position:sticky;top:0;z-index:1;background:var(--color-neutral-050);color:var(--color-neutral-700);font-size:12px;font-weight:600}.source-list th:last-child,.source-list td:last-child{border-right:none}.source-list__row{cursor:pointer}.source-list__row:hover td{background:color-mix(in oklab,var(--color-primary-050) 30%,transparent)}.source-list__input{--nvb-input-height: 32px;--nvb-input-font-size: 12px;width:100%;height:32px;min-height:32px;font-size:12px}.source-list__actions-col{width:44px;text-align:center!important}.source-list__icon-button{margin:0 auto}.source-actions{display:flex;flex-direction:row;justify-content:end;padding:8px 8px 0;width:100%}.type-warapper{padding-top:2px;display:flex;gap:14px;flex-wrap:wrap}.radio-wrapper{display:flex;gap:6px;color:var(--color-neutral-600);font-size:13px;align-items:center}.form-wrapper{display:flex;flex-direction:column;gap:12px}.selected-item{outline:1px solid var(--color-primary-600);outline-offset:-1px;cursor:pointer}.source-list__row.selected-item td{background:color-mix(in oklab,var(--color-primary-050) 55%,var(--color-neutral-000))}.text-area{resize:vertical}.code-editor-wrapper{border-radius:8px;overflow:hidden;min-height:200px}.code-editor-wrapper--body{min-height:220px;height:220px}.code-editor-wrapper--local-json{min-height:260px;height:260px}.json-builder-toolbar{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.field-hint{margin-top:4px;display:block;color:var(--color-neutral-500);font-size:11px}.field-hint--error{color:var(--color-risk-700)}.empty-sources{display:block;padding:12px;color:var(--color-neutral-600)}.empty-sources-empty-state{color:var(--color-neutral-600);height:100%;display:flex;align-items:center}\n"] }]
+                    ], template: "<div class=\"pages\" [class.pages--resizing]=\"isResizing()\" data-testid=\"data-source-root\">\r\n  <div class=\"pages__table-wrapper\" [style.width.%]=\"leftWidth()\" data-testid=\"data-source-list\">\r\n    @if (sources().length > 0) {\r\n      <table\r\n        class=\"source-list\"\r\n        [attr.aria-label]=\"'sources.table' | uiT: 'Data sources'\"\r\n        data-testid=\"data-source-table\"\r\n      >\r\n        <caption class=\"nvb-sr-only\">{{ 'sources.table' | uiT: 'Data sources' }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th>{{ 'sources.name' | uiT: 'Name' }}</th>\r\n            <th>{{ 'sources.title' | uiT: 'Title' }}</th>\r\n            <th class=\"source-list__actions-col\"></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (source of sources(); track $index) {\r\n            <tr\r\n              class=\"source-list__row\"\r\n              [class.selected-item]=\"$index === selectedIndex()\"\r\n              [tabIndex]=\"0\"\r\n              [attr.aria-selected]=\"$index === selectedIndex()\"\r\n              (click)=\"selectSource(source, $index)\"\r\n              [attr.data-testid]=\"'data-source-select-' + $index\"\r\n            >\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.name\"\r\n                  [placeholder]=\"getDefaultSourceName($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.name' | uiT: 'Name'\"\r\n                  [attr.data-testid]=\"'data-source-name-' + $index\"\r\n                />\r\n              </td>\r\n              <td>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"source-list__input nvb-control__attribute-input\"\r\n                  [(ngModel)]=\"source.title\"\r\n                  [placeholder]=\"getDefaultSourceTitle($index)\"\r\n                  (focus)=\"selectSource(source, $index)\"\r\n                  (blur)=\"normalizeSourceIdentity(source, $index)\"\r\n                  [attr.aria-label]=\"'sources.title' | uiT: 'Title'\"\r\n                  [attr.data-testid]=\"'data-source-title-' + $index\"\r\n                />\r\n              </td>\r\n              <td class=\"source-list__actions-col\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"source-list__icon-button nvb-icon-button nvb-icon-button--danger nvb-icon-button--sm\"\r\n                  (click)=\"$event.stopPropagation(); deleteSource($index)\"\r\n                  [attr.aria-label]=\"'sources.delete' | uiT: 'Delete source'\"\r\n                  [attr.data-testid]=\"'data-source-delete-' + $index\"\r\n                >\r\n                  <nvb-icon name=\"delete\"></nvb-icon>\r\n                </button>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    } @else {\r\n      <small class=\"empty-sources\">{{\r\n        'sources.empty' | uiT: 'No data sources yet.'\r\n      }}</small>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    class=\"pages__resizer\"\r\n    (mousedown)=\"onMouseDown($event)\"\r\n    data-testid=\"data-source-resizer\"\r\n  ></div>\r\n\r\n  <div class=\"pages__content\" data-testid=\"data-source-editor\">\r\n    @if (selectedSource(); as source) {\r\n      <div class=\"form-wrapper\">\r\n        <attribute-input-wrapper\r\n          [label]=\"'sources.type' | uiT: 'Type'\"\r\n          [tooltip]=\"fieldTooltips['type']\"\r\n        >\r\n          <div class=\"type-warapper\">\r\n            @if (isSourceTypeVisible('rest')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"rest\"\r\n                />\r\n                <label>{{ 'sources.type.rest' | uiT: 'REST' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('route')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"route\"\r\n                />\r\n                <label>{{ 'sources.type.route' | uiT: 'Route data' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('local')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"local\"\r\n                />\r\n                <label>{{ 'sources.type.local' | uiT: 'Local JSON' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('graphql')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"graphql\"\r\n                />\r\n                <label>{{ 'sources.type.graphql' | uiT: 'GraphQL' }}</label>\r\n              </div>\r\n            }\r\n\r\n            @if (isSourceTypeVisible('websocket')) {\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcType-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.type\"\r\n                  (ngModelChange)=\"setSourceType($event)\"\r\n                  value=\"websocket\"\r\n                />\r\n                <label>{{ 'sources.type.websocket' | uiT: 'WebSocket' }}</label>\r\n              </div>\r\n            }\r\n          </div>\r\n        </attribute-input-wrapper>\r\n\r\n        @if (source.type === 'rest') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.method' | uiT: 'Metodas'\"\r\n            [tooltip]=\"fieldTooltips['method']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                  value=\"GET\"\r\n                />\r\n                <label>GET</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"TABLE-POST\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>TABLE-POST</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PUT\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PUT</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"PATCH\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>PATCH</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [name]=\"'srcRestMethod-' + source.name\"\r\n                  value=\"DELETE\"\r\n                  [(ngModel)]=\"source.params['method']\"\r\n                />\r\n                <label>DELETE</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n            @if (isRestUrlMissing(source)) {\r\n              <small class=\"field-hint field-hint--error\">\r\n                {{ 'sources.urlRequired' | uiT: 'REST request URL is required.' }}\r\n              </small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          @if (shouldShowBodyEditor(source)) {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.body' | uiT: 'Request body (optional)'\"\r\n              [tooltip]=\"fieldTooltips['body']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openBodyJsonObjectCreator()\"\r\n                  data-testid=\"data-source-body-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n                @if (showBodyEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"bodyEditorValue()\"\r\n                    (valueChange)=\"onBodyTemplateChange($event)\"\r\n                    (editorBlur)=\"onBodyTemplateBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (bodyFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ bodyFormatError() }}</small>\r\n              }\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.bodyHint'\r\n                    | uiT\r\n                      : 'Use {...} placeholders, e.g. {id} for the URL or {__table.el1.selectedRows} for the body.'\r\n                }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n\r\n        @if (source.type === 'route') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routeKey' | uiT: 'Route data key'\"\r\n            [tooltip]=\"fieldTooltips['routeKey']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataKey']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.routePath' | uiT: 'Data path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['routePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['routeDataPath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'graphql') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlQuery' | uiT: 'GraphQL query'\"\r\n            [tooltip]=\"fieldTooltips['graphqlQuery']\"\r\n          >\r\n            <textarea\r\n              class=\"nvb-control__textarea-input\"\r\n              rows=\"8\"\r\n              [(ngModel)]=\"source.params['query']\"\r\n            ></textarea>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlOperationName' | uiT: 'Operation name (optional)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlOperationName']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['operationName']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlVariables' | uiT: 'Variables JSON'\"\r\n            [tooltip]=\"fieldTooltips['graphqlVariables']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openGraphqlVariablesJsonObjectCreator()\"\r\n                data-testid=\"data-source-graphql-variables-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showGraphqlVariablesEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"graphqlVariablesEditorValue()\"\r\n                  (valueChange)=\"onGraphqlVariablesChange($event)\"\r\n                  (editorBlur)=\"onGraphqlVariablesBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (graphqlVariablesFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                graphqlVariablesFormatError()\r\n              }}</small>\r\n            }\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.graphqlResponsePath' | uiT: 'Response path (default: data)'\"\r\n            [tooltip]=\"fieldTooltips['graphqlResponsePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['responsePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'websocket') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.url' | uiT: 'Url'\"\r\n            [tooltip]=\"fieldTooltips['url']\"\r\n          >\r\n            <input type=\"text\" class=\"nvb-control__text-input\" [(ngModel)]=\"source.params['url']\" />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketProtocols' | uiT: 'Protocols (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketProtocols']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['protocols']\"\r\n              [placeholder]=\"'json, updates'\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessage' | uiT: 'Connect message (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessage']\"\r\n          >\r\n            <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                (click)=\"openWebsocketMessageJsonObjectCreator()\"\r\n                data-testid=\"data-source-websocket-message-json-builder-open\"\r\n              >\r\n                <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"code-editor-wrapper code-editor-wrapper--body\">\r\n              @if (showWebsocketMessageEditorInstance()) {\r\n                <native-code-editor\r\n                  language=\"json\"\r\n                  [theme]=\"editorTheme()\"\r\n                  [value]=\"websocketMessageEditorValue()\"\r\n                  (valueChange)=\"onWebsocketMessageChange($event)\"\r\n                  (editorBlur)=\"onWebsocketMessageBlur($event)\"\r\n                />\r\n              }\r\n            </div>\r\n            @if (websocketMessageFormatError()) {\r\n              <small class=\"field-hint field-hint--error\">{{\r\n                websocketMessageFormatError()\r\n              }}</small>\r\n            }\r\n            <small class=\"field-hint\">\r\n              {{\r\n                'sources.websocketMessageHint'\r\n                  | uiT\r\n                    : 'If the text is JSON, it will be sent as an object. Otherwise as raw text.'\r\n              }}\r\n            </small>\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessagePath' | uiT: 'Message path (optional)'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessagePath']\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              class=\"nvb-control__text-input\"\r\n              [(ngModel)]=\"source.params['messagePath']\"\r\n            />\r\n          </attribute-input-wrapper>\r\n\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.websocketMessageMode' | uiT: 'Update mode'\"\r\n            [tooltip]=\"fieldTooltips['websocketMessageMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"replaceCurrent\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.replace'\r\n                    | uiT: 'Replace current value'\r\n                }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcWebsocketMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [(ngModel)]=\"source.params['messageMode']\"\r\n                  value=\"pushValuesInArray\"\r\n                />\r\n                <label>{{\r\n                  'sources.websocketMessageMode.push'\r\n                    | uiT: 'Push values in array'\r\n                }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n        }\r\n\r\n        @if (source.type === 'local') {\r\n          <attribute-input-wrapper\r\n            [label]=\"'sources.localMode' | uiT: 'Local mode'\"\r\n            [tooltip]=\"fieldTooltips['localMode']\"\r\n          >\r\n            <div class=\"type-warapper\">\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"json\"\r\n                />\r\n                <label>{{ 'sources.localMode.json' | uiT: 'JSON' }}</label>\r\n              </div>\r\n\r\n              <div class=\"radio-wrapper\">\r\n                <input\r\n                  type=\"radio\"\r\n                  [name]=\"'srcLocalMode-' + source.name\"\r\n                  class=\"nvb-control__radio-input\"\r\n                  [ngModel]=\"source.params['localMode'] || 'json'\"\r\n                  (ngModelChange)=\"setLocalMode($event)\"\r\n                  value=\"dataPath\"\r\n                />\r\n                <label>{{ 'sources.localMode.path' | uiT: 'Field value' }}</label>\r\n              </div>\r\n            </div>\r\n          </attribute-input-wrapper>\r\n\r\n          @if ((source.params['localMode'] || 'json') === 'json') {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localJson' | uiT: 'JSON data'\"\r\n              [tooltip]=\"fieldTooltips['localJson']\"\r\n            >\r\n              <div fieldHeaderActions class=\"json-builder-toolbar\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"nvb-control__add-row-button nvb-control__add-row-button--compact nvb-control__add-row-button--link\"\r\n                  (click)=\"openLocalJsonObjectCreator()\"\r\n                  data-testid=\"data-source-local-json-builder-open\"\r\n                >\r\n                  <nvb-icon name=\"add_circle\"></nvb-icon>\r\n                  <span>{{ 'sources.objectCreator.open' | uiT: 'Objekto kurimas' }}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"code-editor-wrapper code-editor-wrapper--local-json\">\r\n                @if (showLocalJsonEditorInstance()) {\r\n                  <native-code-editor\r\n                    language=\"json\"\r\n                    [theme]=\"editorTheme()\"\r\n                    [value]=\"localJsonEditorValue()\"\r\n                    (valueChange)=\"onLocalJsonChange($event)\"\r\n                    (editorBlur)=\"onLocalJsonBlur($event)\"\r\n                  />\r\n                }\r\n              </div>\r\n              @if (localJsonFormatError()) {\r\n                <small class=\"field-hint field-hint--error\">{{ localJsonFormatError() }}</small>\r\n              }\r\n            </attribute-input-wrapper>\r\n\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.localFunction' | uiT: 'Data function (optional)'\"\r\n              [tooltip]=\"fieldTooltips['localFunction']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataFunction']\"\r\n                [placeholder]=\"\r\n                  '{{ collectValuesFrom({orders}, \\&quot;id\\&quot;, true) }} or data'\r\n                \"\r\n              />\r\n              <small class=\"field-hint\">\r\n                {{\r\n                  'sources.localFunctionHint'\r\n                    | uiT: 'Supports {{ ... }} expressions in JSON fields and a final dataFunction expression. Context: all fields + data.' }}\r\n              </small>\r\n            </attribute-input-wrapper>\r\n          } @else {\r\n            <attribute-input-wrapper\r\n              [label]=\"'sources.dataPath' | uiT: 'Data path'\"\r\n              [tooltip]=\"fieldTooltips['dataPath']\"\r\n            >\r\n              <input\r\n                type=\"text\"\r\n                class=\"nvb-control__text-input\"\r\n                [(ngModel)]=\"source.params['dataPath']\"\r\n                list=\"data-source-path-list\"\r\n              />\r\n              <datalist id=\"data-source-path-list\">\r\n                @for (path of allElementPaths(); track path) {\r\n                  <option [value]=\"path\"></option>\r\n                }\r\n              </datalist>\r\n            </attribute-input-wrapper>\r\n          }\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"empty-sources-empty-state\">\r\n        <small>{{ 'sources.emptySelect' | uiT: 'Select a data source to edit.' }}</small>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isBodyJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Request body builder'\"\r\n  [initialJson]=\"bodyJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to request body'\"\r\n  (closed)=\"closeBodyJsonObjectCreator()\"\r\n  (saved)=\"onBodyJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isLocalJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'Local JSON builder'\"\r\n  [initialJson]=\"localJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'array'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to JSON'\"\r\n  (closed)=\"closeLocalJsonObjectCreator()\"\r\n  (saved)=\"onLocalJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isGraphqlVariablesJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'GraphQL variables builder'\"\r\n  [initialJson]=\"graphqlVariablesJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to GraphQL variables'\"\r\n  (closed)=\"closeGraphqlVariablesJsonObjectCreator()\"\r\n  (saved)=\"onGraphqlVariablesJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n\r\n<nvb-json-object-creator\r\n  [open]=\"isWebsocketMessageJsonObjectCreatorOpen()\"\r\n  [title]=\"'sources.objectCreator.title' | uiT: 'WebSocket message builder'\"\r\n  [initialJson]=\"websocketMessageJsonObjectCreatorInitialJson()\"\r\n  [initialRootType]=\"'object'\"\r\n  [bindingPaths]=\"jsonObjectCreatorBindingPaths()\"\r\n  [cancelLabel]=\"'confirm.cancel' | uiT: 'Cancel'\"\r\n  [saveLabel]=\"'sources.objectCreator.insert' | uiT: 'Apply to WebSocket message'\"\r\n  (closed)=\"closeWebsocketMessageJsonObjectCreator()\"\r\n  (saved)=\"onWebsocketMessageJsonObjectCreatorSave($event)\"\r\n></nvb-json-object-creator>\r\n", styles: [":host{height:100%;background-color:var(--color-neutral-000)}.pages{display:flex;height:100%;position:relative}.pages__table{height:fit-content;width:100%}.pages__table td{border:1px solid var(--color-neutral-300);color:var(--color-neutral-600);padding:2px}.pages__table-item-config{font-size:14px;display:flex;justify-content:center;align-items:center}.pages__table-item-config span{font-size:16px;color:var(--color-neutral-600)}.pages__table-item-drag{color:var(--color-neutral-600);font-size:16px;display:flex;justify-content:center;align-items:center}.pages__table-wrapper{border-right:1px solid var(--color-neutral-300);background:var(--color-neutral-000);overflow:auto}.pages__resizer{width:4px;background-color:var(--color-neutral-300);cursor:col-resize;flex-shrink:0;position:relative;transition:background-color .2s}.pages__resizer:before{content:\"\";position:absolute;inset:0 -3px;cursor:col-resize}.pages__resizer:hover{background-color:var(--color-primary-500, #4a90e2)}.pages__resizer:active{background-color:var(--color-primary-600, #357abd)}.pages__content{flex:1 1 auto;overflow-y:auto;padding:10px}.pages--resizing .pages__resizer{background-color:var(--color-primary-600, #357abd)}.source-list{width:100%;min-width:360px;border-collapse:collapse;table-layout:fixed}.source-list th,.source-list td{border-bottom:1px solid var(--color-neutral-200);border-right:1px solid var(--color-neutral-200);padding:6px;text-align:left;vertical-align:middle}.source-list th{position:sticky;top:0;z-index:1;background:var(--color-neutral-050);color:var(--color-neutral-700);font-size:12px;font-weight:600}.source-list th:last-child,.source-list td:last-child{border-right:none}.source-list__row{cursor:pointer}.source-list__row:hover td{background:color-mix(in oklab,var(--color-primary-050) 30%,transparent)}.source-list__input{--nvb-input-height: 32px;--nvb-input-font-size: 12px;width:100%;height:32px;min-height:32px;font-size:12px}.source-list__actions-col{width:44px;text-align:center!important}.source-list__icon-button{margin:0 auto}.source-actions{display:flex;flex-direction:row;justify-content:end;padding:8px 8px 0;width:100%}.type-warapper{padding-top:2px;display:flex;gap:14px;flex-wrap:wrap}.radio-wrapper{display:flex;gap:6px;color:var(--color-neutral-600);font-size:13px;align-items:center}.form-wrapper{display:flex;flex-direction:column;gap:12px}.selected-item{outline:1px solid var(--color-primary-600);outline-offset:-1px;cursor:pointer}.source-list__row.selected-item td{background:color-mix(in oklab,var(--color-primary-050) 55%,var(--color-neutral-000))}.text-area{resize:vertical}.code-editor-wrapper{border-radius:8px;overflow:hidden;min-height:200px}.code-editor-wrapper--body{min-height:220px;height:220px}.code-editor-wrapper--local-json{min-height:260px;height:260px}.json-builder-toolbar{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.field-hint{margin-top:4px;display:block;color:var(--color-neutral-500);font-size:11px}.field-hint--error{color:var(--color-risk-700)}.empty-sources{display:block;padding:12px;color:var(--color-neutral-600)}.empty-sources-empty-state{color:var(--color-neutral-600);height:100%;display:flex;align-items:center}\n"] }]
         }], propDecorators: { onAnyInputChange: [{
                 type: HostListener,
                 args: ['input']
@@ -80649,7 +80649,13 @@ 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-20T00:00:00Z');
+const RELEASE_DATE = new Date('2026-07-21T00: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']);
 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';
@@ -80683,13 +80689,16 @@ class LicenseService {
         }
         this.status.set({
             initialized: true,
-            missing: true,
+            missing: !this.isOfficialDemoHost(),
             outdated: false,
             invalid: false,
             expiresAt: null,
             plan: null,
         });
     }
+    isOfficialDemoHost() {
+        return typeof window !== 'undefined' && OFFICIAL_DEMO_HOSTNAMES.has(window.location.hostname);
+    }
     saveModalTimestamp() {
         try {
             localStorage.setItem(MODAL_SHOWN_KEY, Date.now().toString());
@@ -80713,6 +80722,18 @@ class LicenseService {
         this.shouldShowInvalidModal.set(false);
     }
     initialize() {
+        if (this.isOfficialDemoHost()) {
+            const payload = this.parseKey(this.licenseKey);
+            this.status.set({
+                initialized: true,
+                missing: false,
+                outdated: false,
+                invalid: false,
+                expiresAt: payload?.expiresAt ? new Date(payload.expiresAt) : null,
+                plan: payload?.plan ?? null,
+            });
+            return;
+        }
         const payload = this.parseKey(this.licenseKey);
         const invalid = this.licenseKey != null && payload === null;
         const expiresAt = payload?.expiresAt ? new Date(payload.expiresAt) : null;
@@ -83154,7 +83175,7 @@ class Preview {
         return String(settings[key] ?? '').trim();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Preview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: Preview, isStandalone: true, selector: "preview", inputs: { viewportSettings: { classPropertyName: "viewportSettings", publicName: "viewportSettings", isSignal: true, isRequired: false, transformFunction: null }, runtimePreviewSettings: { classPropertyName: "runtimePreviewSettings", publicName: "runtimePreviewSettings", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "previewContentHost", first: true, predicate: ["previewContentHost"], descendants: true }, { propertyName: "previewFrameShell", first: true, predicate: ["previewFrameShell"], descendants: true }], ngImport: i0, template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <content-header [model]=\"headerModel()\"></content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <page-element\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isEditor]=\"false\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    rowsTemplate;\r\n                    context: { rows: page.rows, parentElement: pageElement }\r\n                  \"\r\n                ></ng-container>\r\n              </page-element>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (element.type === 'panel') {\r\n              <panel-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </panel-element>\r\n            } @else if (element.type === 'dynamicPanel') {\r\n              <runtime-dynamic-panel\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              ></runtime-dynamic-panel>\r\n            } @else if (element.type === 'tabs' || element.type === 'tabsPro') {\r\n              <tabs-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </tabs-element>\r\n            } @else if (element.type === 'accordion') {\r\n              <accordion-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </accordion-element>\r\n            } @else if (element.type === 'progressFlow') {\r\n              <progress-flow-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'splitter') {\r\n              <splitter-element [model]=\"element\" [column]=\"column\" [rowsTemplate]=\"rowsTemplate\">\r\n              </splitter-element>\r\n            } @else if (element.type === 'dialog') {\r\n              <dialog-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'emptyBlock') {\r\n              <empty-block-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </empty-block-element>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <ng-container\r\n    *ngComponentOutlet=\"getElementComponent(element.type); inputs: { model: element }\"\r\n  ></ng-container>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);animation:nvb-validation-panel-in .18s ease-out}@keyframes nvb-validation-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-validation-panel{animation:none}}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain;animation:nvb-preview-dialog-shell-in .18s ease-out}.preview-dialog-shell--closing{animation:nvb-preview-dialog-shell-in .18s ease-in reverse}@keyframes nvb-preview-dialog-shell-in{0%{background-color:transparent}to{background-color:#0f172a5c}}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0;animation:nvb-preview-dialog-in .18s ease-out}.preview-dialog-shell--closing .preview-dialog{animation:nvb-preview-dialog-in .16s ease-in reverse}@keyframes nvb-preview-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-dialog-shell--open,.preview-dialog{animation:none}}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: PageElement, selector: "page-element", inputs: ["model", "pageRows", "pageIsEmpty", "isEditor", "isMobileView"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ContentHeader, selector: "content-header", inputs: ["model", "headerIsEmpty"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RuntimeDynamicPanel, selector: "runtime-dynamic-panel", inputs: ["model", "column", "recursiveData", "isMobileView"] }, { kind: "component", type: PanelElement, selector: "panel-element", inputs: ["model", "column", "isMobileView", "rows"] }, { kind: "component", type: EmptyBlockElement, selector: "empty-block-element", inputs: ["model", "column", "isMobileView", "rowsTemplate", "templateContext", "rows"] }, { kind: "component", type: TabsElement, selector: "tabs-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: AccordionElement, selector: "accordion-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: ProgressFlowElement, selector: "progress-flow-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: DialogElement, selector: "dialog-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: SplitterElement, selector: "splitter-element", inputs: ["model", "column", "isMobileView", "rowsTemplate", "templateContext"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: Preview, isStandalone: true, selector: "preview", inputs: { viewportSettings: { classPropertyName: "viewportSettings", publicName: "viewportSettings", isSignal: true, isRequired: false, transformFunction: null }, runtimePreviewSettings: { classPropertyName: "runtimePreviewSettings", publicName: "runtimePreviewSettings", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "previewContentHost", first: true, predicate: ["previewContentHost"], descendants: true }, { propertyName: "previewFrameShell", first: true, predicate: ["previewFrameShell"], descendants: true }], ngImport: i0, template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <content-header [model]=\"headerModel()\"></content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <page-element\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isEditor]=\"false\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    rowsTemplate;\r\n                    context: { rows: page.rows, parentElement: pageElement }\r\n                  \"\r\n                ></ng-container>\r\n              </page-element>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (element.type === 'panel') {\r\n              <panel-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </panel-element>\r\n            } @else if (element.type === 'dynamicPanel') {\r\n              <runtime-dynamic-panel\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              ></runtime-dynamic-panel>\r\n            } @else if (element.type === 'tabs' || element.type === 'tabsPro') {\r\n              <tabs-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </tabs-element>\r\n            } @else if (element.type === 'accordion') {\r\n              <accordion-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </accordion-element>\r\n            } @else if (element.type === 'progressFlow') {\r\n              <progress-flow-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'splitter') {\r\n              <splitter-element [model]=\"element\" [column]=\"column\" [rowsTemplate]=\"rowsTemplate\">\r\n              </splitter-element>\r\n            } @else if (element.type === 'dialog') {\r\n              <dialog-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'emptyBlock') {\r\n              <empty-block-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </empty-block-element>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <ng-container\r\n    *ngComponentOutlet=\"getElementComponent(element.type); inputs: { model: element }\"\r\n  ></ng-container>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"], dependencies: [{ kind: "component", type: NvbSelect, selector: "nvb-select", inputs: ["value", "disabled", "required"], outputs: ["valueChange", "change", "focus", "blur"] }, { kind: "component", type: PageElement, selector: "page-element", inputs: ["model", "pageRows", "pageIsEmpty", "isEditor", "isMobileView"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ContentHeader, selector: "content-header", inputs: ["model", "headerIsEmpty"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RuntimeDynamicPanel, selector: "runtime-dynamic-panel", inputs: ["model", "column", "recursiveData", "isMobileView"] }, { kind: "component", type: PanelElement, selector: "panel-element", inputs: ["model", "column", "isMobileView", "rows"] }, { kind: "component", type: EmptyBlockElement, selector: "empty-block-element", inputs: ["model", "column", "isMobileView", "rowsTemplate", "templateContext", "rows"] }, { kind: "component", type: TabsElement, selector: "tabs-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: AccordionElement, selector: "accordion-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: ProgressFlowElement, selector: "progress-flow-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: DialogElement, selector: "dialog-element", inputs: ["model", "column", "rowsTemplate", "templateContext", "isMobileView"] }, { kind: "component", type: SplitterElement, selector: "splitter-element", inputs: ["model", "column", "isMobileView", "rowsTemplate", "templateContext"] }, { kind: "component", type: NvbIcon, selector: "nvb-icon", inputs: ["name", "svg", "ariaLabel"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiT" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Preview, decorators: [{
             type: Component,
@@ -83177,7 +83198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NvbIcon,
                         UiTranslatePipe,
                         DynamicTextPipe,
-                    ], template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <content-header [model]=\"headerModel()\"></content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <page-element\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isEditor]=\"false\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    rowsTemplate;\r\n                    context: { rows: page.rows, parentElement: pageElement }\r\n                  \"\r\n                ></ng-container>\r\n              </page-element>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (element.type === 'panel') {\r\n              <panel-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </panel-element>\r\n            } @else if (element.type === 'dynamicPanel') {\r\n              <runtime-dynamic-panel\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              ></runtime-dynamic-panel>\r\n            } @else if (element.type === 'tabs' || element.type === 'tabsPro') {\r\n              <tabs-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </tabs-element>\r\n            } @else if (element.type === 'accordion') {\r\n              <accordion-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </accordion-element>\r\n            } @else if (element.type === 'progressFlow') {\r\n              <progress-flow-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'splitter') {\r\n              <splitter-element [model]=\"element\" [column]=\"column\" [rowsTemplate]=\"rowsTemplate\">\r\n              </splitter-element>\r\n            } @else if (element.type === 'dialog') {\r\n              <dialog-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'emptyBlock') {\r\n              <empty-block-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </empty-block-element>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <ng-container\r\n    *ngComponentOutlet=\"getElementComponent(element.type); inputs: { model: element }\"\r\n  ></ng-container>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);animation:nvb-validation-panel-in .18s ease-out}@keyframes nvb-validation-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-validation-panel{animation:none}}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain;animation:nvb-preview-dialog-shell-in .18s ease-out}.preview-dialog-shell--closing{animation:nvb-preview-dialog-shell-in .18s ease-in reverse}@keyframes nvb-preview-dialog-shell-in{0%{background-color:transparent}to{background-color:#0f172a5c}}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0;animation:nvb-preview-dialog-in .18s ease-out}.preview-dialog-shell--closing .preview-dialog{animation:nvb-preview-dialog-in .16s ease-in reverse}@keyframes nvb-preview-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.preview-dialog-shell--open,.preview-dialog{animation:none}}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"] }]
+                    ], template: "<section\r\n  class=\"preview-root\"\r\n  [ngClass]=\"{\r\n    'preview-root--runtime': isRuntimeMode(),\r\n    'preview-root--export-all-pages': renderAllVisiblePages(),\r\n  }\"\r\n  data-testid=\"preview-root\"\r\n>\r\n  @if (!isRuntimeMode()) {\r\n    <header class=\"preview-header\" data-testid=\"preview-toolbar\">\r\n      <div class=\"preview-header__side\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"currentPageIndex()\"\r\n          (change)=\"onCurrentPageSelectEvent($event)\"\r\n          data-testid=\"preview-page-select-header\"\r\n          [disabled]=\"pagesCount() === 0\"\r\n          [attr.aria-label]=\"'preview.page.select' | uiT: 'Preview page'\"\r\n        >\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <option [value]=\"i\">\r\n              {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n            </option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n\r\n      <div class=\"preview-header__center\">\r\n        <div\r\n          class=\"preview-device-switch\"\r\n          role=\"group\"\r\n          [attr.aria-label]=\"'preview.device.group' | uiT: 'Preview device'\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'desktop'\"\r\n            (click)=\"setDeviceMode('desktop')\"\r\n            data-testid=\"preview-device-desktop\"\r\n            [attr.aria-label]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n            [attr.title]=\"'preview.device.desktop' | uiT: 'Desktop'\"\r\n          >\r\n            <nvb-icon [svg]=\"desktopDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'tablet'\"\r\n            (click)=\"setDeviceMode('tablet')\"\r\n            data-testid=\"preview-device-tablet\"\r\n            [attr.aria-label]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n            [attr.title]=\"'preview.device.tablet' | uiT: 'Tablet'\"\r\n          >\r\n            <nvb-icon [svg]=\"tabletDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-device-switch__button\"\r\n            [class.preview-device-switch__button--active]=\"deviceMode() === 'mobile'\"\r\n            (click)=\"setDeviceMode('mobile')\"\r\n            data-testid=\"preview-device-mobile\"\r\n            [attr.aria-label]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n            [attr.title]=\"'preview.device.mobile' | uiT: 'Mobile'\"\r\n          >\r\n            <nvb-icon [svg]=\"mobileDeviceIconSvg\"></nvb-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <span class=\"preview-header__width\" data-testid=\"preview-frame-width\">\r\n          {{ currentFrameWidthLabel() }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"preview-header__side preview-header__side--end\">\r\n        <nvb-select\r\n          class=\"preview-toolbar__select preview-toolbar__select--compact\"\r\n          [value]=\"selectedLanguage()\"\r\n          (change)=\"onLanguageSelectEvent($event)\"\r\n          data-testid=\"preview-language-select\"\r\n          [disabled]=\"languages().length <= 1\"\r\n          [attr.aria-label]=\"'preview.language.select' | uiT: 'Preview language'\"\r\n        >\r\n          @for (language of languages(); track language) {\r\n            <option [value]=\"language\">{{ language }}</option>\r\n          }\r\n        </nvb-select>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  <div\r\n    class=\"preview-stage\"\r\n    [ngClass]=\"{\r\n      'preview-stage--with-toc': showToc(),\r\n      'preview-stage--with-validation-panel': showValidationPanel(),\r\n    }\"\r\n    data-testid=\"preview-stage\"\r\n  >\r\n    @if (showValidationPanel()) {\r\n      <aside class=\"preview-validation-panel\" data-testid=\"preview-validation-panel\">\r\n        <header class=\"preview-validation-panel__header\">\r\n          <h4 class=\"preview-validation-panel__title\">\r\n            {{ 'preview.validation.panel.title' | uiT: 'Validation issues' }}\r\n          </h4>\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-validation-panel__close\"\r\n            (click)=\"closeValidationPanel()\"\r\n            [attr.aria-label]=\"'preview.validation.panel.close' | uiT: 'Close validation panel'\"\r\n            data-testid=\"preview-validation-panel-close\"\r\n          >\r\n            <nvb-icon name=\"close\"></nvb-icon>\r\n          </button>\r\n        </header>\r\n\r\n        <div class=\"preview-validation-panel__body\">\r\n          @for (\r\n            group of validationIssuePageGroups();\r\n            track group.pageName + '-' + group.sourceIndex\r\n          ) {\r\n            <section class=\"preview-validation-group\">\r\n              <h5 class=\"preview-validation-group__title\">\r\n                {{ group.sourceIndex + 1 }}. {{ group.pageName }}\r\n                <span class=\"preview-validation-group__meta\">({{ group.totalErrors }})</span>\r\n              </h5>\r\n\r\n              <ul class=\"preview-validation-group__list\">\r\n                @for (issue of group.issues; track issue.dataPath + '-' + issue.elementName) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"preview-validation-issue\"\r\n                      (click)=\"onValidationIssueClick(issue)\"\r\n                      [attr.title]=\"issue.errors.join('\\n')\"\r\n                      [attr.data-testid]=\"\r\n                        'preview-validation-issue-' + (issue.dataPath || issue.elementName)\r\n                      \"\r\n                    >\r\n                      <span class=\"preview-validation-issue__name\">\r\n                        {{ issue.elementLabel || issue.elementName || issue.dataPath }}\r\n                      </span>\r\n                      <span class=\"preview-validation-issue__count\">{{ issue.errors.length }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </section>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    @if (showToc()) {\r\n      <aside class=\"preview-toc\" data-testid=\"preview-toc\">\r\n        <h4 class=\"preview-toc__title\">{{ 'preview.toc.title' | uiT: 'Pages' }}</h4>\r\n        <div class=\"preview-toc__list\">\r\n          @for (entry of visiblePageEntries(); track entry.page.name; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"preview-toc__item\"\r\n              [class.preview-toc__item--active]=\"currentPageIndex() === i\"\r\n              [disabled]=\"isStepLocked(i)\"\r\n              (click)=\"onTocPageClick(i)\"\r\n              [attr.data-testid]=\"'preview-toc-item-' + i\"\r\n            >\r\n              <span class=\"preview-toc__name\">\r\n                {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </aside>\r\n    }\r\n\r\n    <div class=\"preview-stage__content\" #previewContentHost>\r\n      <div\r\n        class=\"preview-frame-shell\"\r\n        #previewFrameShell\r\n        [class.preview-frame-shell--resizing]=\"isFrameResizing()\"\r\n        [class.preview-frame-shell--runtime]=\"isRuntimeMode()\"\r\n        [style.width]=\"resolvedFrameWidthStyle()\"\r\n      >\r\n        <div class=\"preview-frame\" [attr.data-device]=\"deviceMode()\" data-testid=\"preview-frame\">\r\n          @if (isDialogMode()) {\r\n            <dialog\r\n              class=\"preview-dialog-shell\"\r\n              [class.preview-dialog-shell--open]=\"dialogOpen()\"\r\n              [class.preview-dialog-shell--closing]=\"dialogClosing()\"\r\n              [open]=\"dialogOpen() || dialogClosing()\"\r\n              aria-labelledby=\"preview-dialog-title\"\r\n              [attr.aria-describedby]=\"dialogDescription() ? 'preview-dialog-description' : null\"\r\n            >\r\n              @if (dialogOpen() || dialogClosing()) {\r\n                <section\r\n                  class=\"preview-dialog\"\r\n                  [style.width]=\"dialogWidthStyle()\"\r\n                  [style.max-width]=\"dialogMaxWidthStyle()\"\r\n                  [style.max-height]=\"dialogMaxHeightStyle()\"\r\n                  [style.font-size]=\"dialogFontSizeStyle()\"\r\n                >\r\n                  <header class=\"preview-dialog__header\">\r\n                    <div class=\"preview-dialog__heading\">\r\n                      <div class=\"preview-dialog__title\" id=\"preview-dialog-title\">\r\n                        {{ dialogTitle() }}\r\n                      </div>\r\n                      @if (dialogDescription()) {\r\n                        <p class=\"preview-dialog__description\" id=\"preview-dialog-description\">\r\n                          {{ dialogDescription() }}\r\n                        </p>\r\n                      }\r\n                    </div>\r\n\r\n                    @if (showDialogCloseButton()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"preview-dialog__close\"\r\n                        (click)=\"onDialogCloseClick()\"\r\n                        [attr.aria-label]=\"'preview.dialog.close' | uiT: 'Close dialog'\"\r\n                      >\r\n                        <nvb-icon name=\"close\"></nvb-icon>\r\n                      </button>\r\n                    }\r\n                  </header>\r\n\r\n                  <div class=\"preview-dialog__body\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: true }\"\r\n                    ></ng-container>\r\n                  </div>\r\n\r\n                  @if (hasDialogFooterActions()) {\r\n                    <footer class=\"preview-dialog__footer\">\r\n                      <div\r\n                        class=\"preview-dialog__footer-actions\"\r\n                        [ngClass]=\"'preview-dialog__footer-actions--' + dialogFooterActionsAlign()\"\r\n                      >\r\n                        @for (\r\n                          action of dialogFooterActions();\r\n                          track action.id || $index;\r\n                          let i = $index\r\n                        ) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"preview-dialog-action\"\r\n                            [ngClass]=\"dialogFooterActionClasses(action)\"\r\n                            (click)=\"onDialogFooterActionClick(action)\"\r\n                            [attr.data-testid]=\"'preview-dialog-footer-action-' + i\"\r\n                            [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                            [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                          >\r\n                            @if (dialogFooterActionIcon(action)) {\r\n                              <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                            }\r\n                            @if (action.label) {\r\n                              <span>{{ action.label }}</span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    </footer>\r\n                  }\r\n                </section>\r\n              }\r\n            </dialog>\r\n            @if (!dialogOpen() && !dialogClosing() && !isRuntimeMode()) {\r\n              <button type=\"button\" class=\"preview-dialog__open\" (click)=\"reopenDialog()\">\r\n                {{ 'preview.dialog.open' | uiT: 'Open form' }}\r\n              </button>\r\n            }\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"formShellTemplate; context: { dialogMode: false }\"\r\n            ></ng-container>\r\n          }\r\n        </div>\r\n\r\n        @if (!isRuntimeMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"preview-frame__resizer\"\r\n            (mousedown)=\"onFrameResizeMouseDown($event)\"\r\n            (dblclick)=\"resetFrameWidth()\"\r\n            [attr.title]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            [attr.aria-label]=\"'preview.resize' | uiT: 'Resize preview width'\"\r\n            data-testid=\"preview-frame-resizer\"\r\n          >\r\n            <span class=\"preview-frame__resizer-grip\"></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (!isRuntimeMode() && submittedJson()) {\r\n    <section class=\"preview-result\" data-testid=\"preview-submit-json\">\r\n      <h4>{{ 'preview.result' | uiT: 'Pateikimo JSON' }}</h4>\r\n      <pre>{{ submittedJson() }}</pre>\r\n    </section>\r\n  }\r\n</section>\r\n\r\n<ng-template #formShellTemplate let-dialogMode=\"dialogMode\">\r\n  <div class=\"preview-form-shell\" [class.preview-form-shell--dialog]=\"dialogMode\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'top' }\"\r\n    ></ng-container>\r\n\r\n    <div\r\n      class=\"preview-form-body\"\r\n      [class.preview-form-body--dialog]=\"dialogMode\"\r\n      [style.padding]=\"dialogMode ? dialogPaddingStyle() : null\"\r\n    >\r\n      <div\r\n        class=\"view\"\r\n        [class.view--dialog]=\"dialogMode\"\r\n        [style.--nvb-form-element-spacing]=\"resolveElementSpacing()\"\r\n      >\r\n        @if (!dialogMode && headerModel() && hasVisibleHeader()) {\r\n          <content-header [model]=\"headerModel()\"></content-header>\r\n        }\r\n\r\n        <main style=\"width: 100%\">\r\n          @for (page of visiblePages(); track page.name; let i = $index; let isLast = $last) {\r\n            @let pageElement = getElement(page.name);\r\n            <div\r\n              class=\"preview-page-render\"\r\n              [class.preview-page-render--export-break]=\"renderAllVisiblePages() && !isLast\"\r\n              [attr.data-preview-page-index]=\"i\"\r\n            >\r\n              <page-element\r\n                [model]=\"pageElement\"\r\n                [pageIsEmpty]=\"page.rows.length > 0\"\r\n                [pageRows]=\"page.rows\"\r\n                [isEditor]=\"false\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    rowsTemplate;\r\n                    context: { rows: page.rows, parentElement: pageElement }\r\n                  \"\r\n                ></ng-container>\r\n              </page-element>\r\n            </div>\r\n          }\r\n        </main>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"formChromeTemplate; context: { placement: 'bottom' }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #formChromeTemplate let-placement=\"placement\">\r\n  @if (hasFormChromeAt(placement)) {\r\n    <section\r\n      class=\"preview-form-chrome\"\r\n      [ngClass]=\"{ 'preview-form-chrome--bottom': placement === 'bottom' }\"\r\n      [attr.data-testid]=\"'preview-form-chrome-' + placement\"\r\n    >\r\n      @if (showStepperAt(placement)) {\r\n        <nav\r\n          class=\"preview-steps preview-steps--embedded\"\r\n          [attr.aria-label]=\"'preview.steps' | uiT: 'Page steps'\"\r\n          [attr.data-testid]=\"'preview-steps-' + placement\"\r\n        >\r\n          <ol class=\"preview-steps__list\">\r\n            @for (\r\n              entry of visiblePageEntries();\r\n              track entry.page.name;\r\n              let i = $index;\r\n              let isLast = $last\r\n            ) {\r\n              <li\r\n                class=\"preview-steps__item\"\r\n                [ngClass]=\"{\r\n                  'preview-steps__item--current': isStepCurrent(i),\r\n                  'preview-steps__item--done': isStepCompleted(i),\r\n                  'preview-steps__item--locked': isStepLocked(i),\r\n                }\"\r\n              >\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-step\"\r\n                  [disabled]=\"isStepLocked(i)\"\r\n                  (click)=\"onStepClick(i)\"\r\n                  [attr.data-testid]=\"'preview-step-' + placement + '-' + i\"\r\n                >\r\n                  <span class=\"preview-step__marker\">{{ i + 1 }}</span>\r\n                  <span class=\"preview-step__body\">\r\n                    <span class=\"preview-step__label\">\r\n                      {{ visiblePageLabel(entry, i) | dynamicText: getElement(entry.page.name) }}\r\n                    </span>\r\n                    @if (visiblePageStepDescription(entry, i); as description) {\r\n                      <span class=\"preview-step__value\">\r\n                        {{ description | dynamicText: getElement(entry.page.name) }}\r\n                      </span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n\r\n                @if (!isLast) {\r\n                  <span class=\"preview-step__connector\" aria-hidden=\"true\"></span>\r\n                }\r\n              </li>\r\n            }\r\n          </ol>\r\n        </nav>\r\n      }\r\n\r\n      @if (showPaginationAt(placement) || showActionsAt(placement)) {\r\n        <div\r\n          class=\"preview-form-toolbar\"\r\n          [class.preview-form-toolbar--actions-only]=\"\r\n            showActionsAt(placement) && !showPaginationAt(placement)\r\n          \"\r\n        >\r\n          @if (showPaginationAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"previousPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() === 0\"\r\n                [attr.data-testid]=\"'preview-page-prev-' + placement\"\r\n                [attr.aria-label]=\"'preview.prev.aria' | uiT: 'Previous page'\"\r\n              >\r\n                {{ 'preview.prev' | uiT: 'Prev' }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"preview-toolbar__button\"\r\n                (click)=\"nextPage()\"\r\n                [disabled]=\"pagesCount() === 0 || currentPageIndex() >= pagesCount() - 1\"\r\n                [attr.data-testid]=\"'preview-page-next-' + placement\"\r\n                [attr.aria-label]=\"'preview.next.aria' | uiT: 'Next page'\"\r\n              >\r\n                {{ 'preview.next' | uiT: 'Next' }}\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          @if (showActionsAt(placement)) {\r\n            <div class=\"preview-toolbar__group\">\r\n              @if (showValidateActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  (click)=\"validate()\"\r\n                  [attr.data-testid]=\"'preview-validate-' + placement\"\r\n                  [attr.aria-label]=\"'preview.validate.aria' | uiT: 'Validate page'\"\r\n                >\r\n                  {{ 'preview.validate' | uiT: 'Validuoti' }}\r\n                </button>\r\n              }\r\n              @if (showSubmitActionButton()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button preview-toolbar__button--primary\"\r\n                  (click)=\"submit()\"\r\n                  [attr.data-testid]=\"'preview-submit-' + placement\"\r\n                  [attr.aria-label]=\"'preview.submit.aria' | uiT: 'Submit page'\"\r\n                >\r\n                  {{ 'preview.submit' | uiT: 'Pateikti' }}\r\n                </button>\r\n              }\r\n              @for (action of customActionsAt(placement); track action.id || $index; let i = $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"preview-toolbar__button\"\r\n                  [ngClass]=\"chromeActionClasses(action)\"\r\n                  (click)=\"onChromeActionClick(action)\"\r\n                  [attr.data-testid]=\"'preview-custom-action-' + placement + '-' + i\"\r\n                  [attr.aria-label]=\"dialogFooterActionLabel(action, i)\"\r\n                  [attr.title]=\"dialogFooterActionLabel(action, i)\"\r\n                >\r\n                  @if (dialogFooterActionIcon(action)) {\r\n                    <nvb-icon [name]=\"dialogFooterActionIcon(action)\"></nvb-icon>\r\n                  }\r\n                  <span>{{ dialogFooterActionLabel(action, i) }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </section>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowsTemplate let-rows=\"rows\" let-parentElement=\"parentElement\">\r\n  @for (row of rows; track $index) {\r\n    <div class=\"row\" [ngStyle]=\"resolveRowStyle(parentElement)\">\r\n      @for (column of row.columns; track column.elementRef) {\r\n        @let element = getElement(column.elementRef);\r\n\r\n        @if (element) {\r\n          <div\r\n            class=\"column\"\r\n            [ngClass]=\"{ 'column--hidden': element.hidden }\"\r\n            [ngStyle]=\"resolveColumnStyle(parentElement, element)\"\r\n          >\r\n            @if (element.type === 'panel') {\r\n              <panel-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </panel-element>\r\n            } @else if (element.type === 'dynamicPanel') {\r\n              <runtime-dynamic-panel\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              ></runtime-dynamic-panel>\r\n            } @else if (element.type === 'tabs' || element.type === 'tabsPro') {\r\n              <tabs-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </tabs-element>\r\n            } @else if (element.type === 'accordion') {\r\n              <accordion-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </accordion-element>\r\n            } @else if (element.type === 'progressFlow') {\r\n              <progress-flow-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'splitter') {\r\n              <splitter-element [model]=\"element\" [column]=\"column\" [rowsTemplate]=\"rowsTemplate\">\r\n              </splitter-element>\r\n            } @else if (element.type === 'dialog') {\r\n              <dialog-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n                [rowsTemplate]=\"rowsTemplate\"\r\n              />\r\n            } @else if (element.type === 'emptyBlock') {\r\n              <empty-block-element\r\n                [model]=\"element\"\r\n                [column]=\"column\"\r\n                [isMobileView]=\"deviceMode() === 'mobile'\"\r\n              >\r\n                @if (column.rows && column.rows.length > 0) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowsTemplate;\r\n                      context: { rows: column.rows, parentElement: element }\r\n                    \"\r\n                  ></ng-container>\r\n                }\r\n              </empty-block-element>\r\n            } @else {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"layoutTemplate; context: { $implicit: element }\"\r\n              ></ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #layoutTemplate let-element>\r\n  <ng-container\r\n    *ngComponentOutlet=\"getElementComponent(element.type); inputs: { model: element }\"\r\n  ></ng-container>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;min-height:0;display:block}.preview-root{--nvb-preview-btn-height: var(--nvb-control-height);--nvb-preview-btn-font-size: var(--nvb-control-font-size);--nvb-preview-btn-radius: var(--nvb-control-radius);--nvb-preview-btn-padding-x: var(--nvb-control-padding-x);--nvb-preview-shell-inset: 12px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px;background:var(--color-neutral-050)}.preview-root--runtime{--nvb-preview-shell-inset: 14px;padding:0;background:transparent}.preview-root--export-all-pages{height:auto;min-height:0}.preview-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--color-neutral-200);border-radius:8px;padding:8px 12px;background:var(--color-neutral-000)}.preview-header__side{min-width:0;display:flex;align-items:center}.preview-header__side--end{justify-content:flex-end}.preview-header__center{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}.preview-header__width{color:var(--color-neutral-600);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}.preview-device-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--color-neutral-300);border-radius:999px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-device-switch__button{width:32px;height:32px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-device-switch__button nvb-icon{width:16px;height:16px}.preview-device-switch__button:not(:disabled):hover{color:var(--color-primary-700);background:var(--color-primary-050)}.preview-device-switch__button--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-toolbar__button{box-sizing:border-box;border:1px solid var(--nvb-button-border-color, var(--color-neutral-300));border-radius:var(--nvb-button-radius, var(--nvb-preview-btn-radius));min-height:var(--nvb-button-height-sm, 32px);padding:var(--nvb-button-padding-sm, 0 10px);background:var(--nvb-button-bg, var(--color-neutral-000));color:var(--nvb-button-text-color, var(--color-neutral-700));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--nvb-button-gap, 6px);font-size:var(--nvb-button-font-size-sm, var(--nvb-preview-btn-font-size));font-weight:600;line-height:20px;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}.preview-toolbar__button:not(:disabled):hover{border-color:var(--color-neutral-400);background:var(--nvb-button-hover-bg, var(--color-primary-050));color:var(--color-neutral-900)}.preview-toolbar__button:disabled{opacity:.6;cursor:not-allowed}.preview-toolbar__button--active{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-050)}.preview-toolbar__button--primary{border-color:var(--nvb-button-primary-bg, var(--color-primary-600));background:var(--nvb-button-primary-bg, var(--color-primary-600));color:var(--color-neutral-000)}.preview-toolbar__button--primary:not(:disabled):hover{border-color:var(--nvb-button-primary-hover-bg, var(--color-primary-700));background:var(--nvb-button-primary-hover-bg, var(--color-primary-700));color:var(--color-neutral-000)}.preview-toolbar__label{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-toolbar__select{border:1px solid var(--color-neutral-300);border-radius:var(--nvb-preview-btn-radius);min-height:var(--nvb-preview-btn-height);padding:0 10px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));min-width:78px}.preview-toolbar__select--compact{width:min(220px,100%);min-width:120px}.preview-validation{margin:0;color:var(--color-neutral-700);font-size:13px}.preview-validation--inline{padding:8px 10px;border:1px solid var(--color-neutral-300);border-radius:4px;background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000))}.preview-steps{--nvb-preview-step-accent: var(--color-primary-600, #2563eb);--nvb-preview-step-surface: var(--color-neutral-000, #ffffff);--nvb-preview-step-border: color-mix( in oklab, var(--color-neutral-300, #d4d4d8) 82%, var(--color-neutral-000, #ffffff) );--nvb-preview-step-border-strong: color-mix( in oklab, var(--color-neutral-400, #a1a1aa) 84%, var(--color-neutral-000, #ffffff) );display:block;border:1px solid var(--nvb-preview-step-border);border-radius:12px;padding:14px 16px;background:var(--nvb-preview-step-surface)}.preview-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:auto}.preview-steps__item{position:relative;flex:1 1 0;min-width:60px;display:flex;flex-direction:column;align-items:center}.preview-step{width:100%;border:0;background:transparent;color:var(--color-neutral-800, #27272a);min-height:auto;padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;font-size:14px;font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:color .16s ease,opacity .16s ease}.preview-steps__item:not(.preview-steps__item--done) .preview-step:hover:not(:disabled) .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent)}.preview-step:focus-visible{outline:none}.preview-step:focus-visible .preview-step__marker{box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 20%,transparent)}.preview-step__marker{width:34px;height:34px;border-radius:999px;border:2px solid var(--nvb-preview-step-border-strong);background:var(--nvb-preview-step-surface);color:var(--color-neutral-500, #71717a);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;position:relative;z-index:1;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.preview-step__body{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:0}.preview-step__label{font-size:13px;font-weight:600;color:var(--color-neutral-700, #3f3f46);text-align:center;line-height:1.4}.preview-step__value{font-size:12px;font-weight:400;color:var(--color-neutral-600, #52525b);text-align:center;line-height:1.4}.preview-step__connector{position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--nvb-preview-step-border);z-index:0;pointer-events:none;right:auto;border-radius:999px}.preview-steps__item--current .preview-step__marker{border-color:var(--nvb-preview-step-accent);color:var(--nvb-preview-step-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--nvb-preview-step-accent) 14%,transparent)}.preview-steps__item--current .preview-step__label{color:var(--color-primary-700, #1d4ed8)}.preview-steps__item--done .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step:hover:not(:disabled) .preview-step__marker,.preview-steps__item--done .preview-step:focus-visible .preview-step__marker{border-color:var(--nvb-preview-step-accent);background:var(--nvb-preview-step-accent);color:var(--color-neutral-000, #ffffff)}.preview-steps__item--done .preview-step__connector{background:color-mix(in oklab,var(--nvb-preview-step-accent) 35%,var(--nvb-preview-step-border))}.preview-steps__item--locked .preview-step__marker,.preview-step:disabled{opacity:.58;cursor:not-allowed}.preview-steps--embedded{width:100%}.preview-steps__item:last-child{min-width:60px}.preview-steps__item:last-child .preview-step__connector{display:none}.preview-stage{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--color-neutral-300);border-radius:10px;background:linear-gradient(0deg,var(--color-neutral-100),var(--color-neutral-050));display:flex;gap:12px;align-items:stretch;padding:12px}.preview-stage--with-toc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;padding:0}.preview-stage--with-validation-panel,.preview-stage--with-validation-panel.preview-stage--with-toc{position:relative}.preview-stage__content{flex:1;min-height:0;min-width:0;display:flex;justify-content:center;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding-right:6px}.preview-stage--with-toc .preview-stage__content{padding-right:0}.preview-validation-panel{position:absolute;top:10px;left:10px;width:min(340px,100% - 20px);max-height:calc(100% - 20px);z-index:2147483600;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:0 18px 34px #0f172a29;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.preview-validation-panel__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-050)}.preview-validation-panel__title{margin:0;color:var(--color-neutral-700);font-size:13px;line-height:1.2}.preview-validation-panel__close{width:28px;height:28px;min-width:28px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.preview-validation-panel__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-validation-panel__body{min-height:0;overflow:auto;padding:10px;display:grid;gap:10px}.preview-validation-group{border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);padding:8px}.preview-validation-group__title{margin:0 0 8px;color:var(--color-neutral-700);font-size:12px;line-height:1.3}.preview-validation-group__meta{color:var(--color-neutral-500)}.preview-validation-group__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.preview-validation-issue{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.preview-validation-issue:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-050)}.preview-validation-issue__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}.preview-validation-issue__count{flex-shrink:0;min-width:20px;min-height:20px;border-radius:999px;background:var(--color-risk-100);color:var(--color-risk-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.preview-frame-shell{position:relative;height:100%;min-height:0;min-width:0;max-width:100%;transition:box-shadow .14s ease}.preview-frame-shell--runtime{width:100%;height:100%}.preview-frame-shell--resizing{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary-500) 45%,transparent)}.preview-toc{width:240px;max-width:100%;height:100%;max-height:100%;border:1px solid var(--color-neutral-300);border-radius:0;background:var(--color-neutral-000);padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}.preview-toc__title{margin:0;font-size:13px;color:var(--color-neutral-700)}.preview-toc__list{display:grid;gap:6px;overflow:auto;min-height:0;height:100%;align-content:start;overscroll-behavior:contain}.preview-toc__item{border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-neutral-050) 82%,var(--color-neutral-000));color:var(--color-neutral-700);min-height:var(--nvb-preview-btn-height);padding:0 8px;display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.preview-toc__item--active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-700)}.preview-toc__item:disabled{opacity:.6;cursor:not-allowed}.preview-toc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.preview-frame{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300);border-radius:8px;background:var(--color-neutral-000);box-shadow:0 2px 10px #00000014;overflow:hidden}.preview-stage--with-toc .preview-frame{border-radius:0}.preview-form-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.preview-form-chrome{flex-shrink:0;display:grid;gap:8px;padding:10px var(--nvb-preview-shell-inset);border-bottom:1px solid var(--color-neutral-200);background:transparent}.preview-form-chrome--bottom{border-top:1px solid var(--color-neutral-200);border-bottom:none;background:transparent}.preview-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview-form-toolbar--actions-only{justify-content:flex-end}.preview-form-body{flex:1;min-height:0;overflow:auto;padding:var(--nvb-preview-shell-inset)}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;padding:16px}.preview-root--runtime .preview-stage{padding:0;border:none;background:transparent;overflow:visible}.preview-root--runtime .preview-stage__content{padding-right:0;justify-content:center;overflow:visible}.preview-root--runtime .preview-frame{border-radius:0;border:none;box-shadow:none;background:transparent;overflow:visible}.preview-root--runtime .preview-frame-shell{height:auto;min-height:0}.preview-root--export-all-pages .preview-stage,.preview-root--export-all-pages .preview-stage__content,.preview-root--export-all-pages .preview-frame-shell,.preview-root--export-all-pages .preview-frame,.preview-root--export-all-pages .preview-form-shell,.preview-root--export-all-pages .preview-form-body,.preview-root--export-all-pages .view{height:auto;min-height:0;overflow:visible}.preview-root--export-all-pages .preview-stage__content{display:block}.preview-root--export-all-pages .preview-frame-shell,.preview-page-render{width:100%}.preview-page-render--export-break{break-after:page;page-break-after:always;margin-bottom:16px}.preview-frame__resizer{position:absolute;top:0;right:0;width:12px;height:100%;border:none;background:transparent;cursor:ew-resize;padding:0;z-index:3}.preview-frame__resizer-grip{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:4px;height:46px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral-400) 70%,transparent);transition:background-color .14s ease}.preview-frame__resizer:hover .preview-frame__resizer-grip,.preview-frame-shell--resizing .preview-frame__resizer-grip{background:color-mix(in oklab,var(--color-primary-500) 65%,transparent)}.preview-frame[data-device=mobile]{border-radius:22px}.preview-frame[data-device=mobile] .preview-form-toolbar{width:100%;align-items:stretch}.preview-frame[data-device=mobile] .preview-toolbar__group{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-frame[data-device=mobile] .preview-toolbar__button{width:100%;min-width:0}.preview-frame[data-device=mobile] .preview-toolbar__group .preview-toolbar__button:only-child{grid-column:1/-1}.preview-dialog-shell{width:100%;min-height:100%;max-width:none;border:0;margin:0;padding:14px;display:flex;justify-content:center;align-items:flex-start;background:transparent}.preview-dialog-shell::backdrop{background:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.preview-dialog-shell--open{position:fixed;inset:0;z-index:2147483000;padding:24px;min-height:100vh;background-color:#0f172a5c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);align-items:flex-start;overflow:auto;overscroll-behavior:contain}.preview-dialog{--nvb-floating-overlay-z-index: 2147483010;--nvb-page-margin-bottom: 0px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--nvb-dialog-radius);background:var(--color-neutral-000);box-shadow:var(--nvb-shadow-16);overflow:hidden;max-height:min(90vh,100vh - 48px);min-height:0;outline:0}.preview-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);background:var(--color-neutral-000);flex-shrink:0}.preview-dialog__heading{min-width:0}.preview-dialog__title{margin:0;color:var(--color-neutral-900);font-size:16px;font-weight:600;line-height:22px}.preview-dialog__description{margin:4px 0 0;color:var(--color-neutral-600);font-size:13px;line-height:18px}.preview-dialog__close{width:32px;height:32px;min-height:32px;border:1px solid var(--color-neutral-300);border-radius:var(--nvb-control-radius);background:var(--color-neutral-000);color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.preview-dialog__close:hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.preview-dialog__close:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.preview-dialog__close nvb-icon{width:16px;height:16px}.preview-dialog__body{width:100%;min-height:0;display:flex;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.preview-root--runtime .preview-dialog{max-height:min(90vh,100vh - 48px)}.preview-root--runtime .preview-dialog__body{overflow-x:hidden;overflow-y:auto}.preview-dialog__footer{flex-shrink:0;padding:16px 24px 24px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-000)}.preview-dialog__footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-dialog__footer-actions--left{justify-content:flex-start}.preview-dialog__footer-actions--center{justify-content:center}.preview-dialog__footer-actions--right{justify-content:flex-end}.preview-dialog-action{min-height:var(--nvb-preview-btn-height);padding:0 12px;border-radius:var(--nvb-preview-btn-radius);border:1px solid var(--color-neutral-300);background:transparent;color:var(--color-neutral-700);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif));transition:border-color .14s ease,background-color .14s ease,color .14s ease}.preview-dialog-action nvb-icon{width:16px;height:16px}.preview-dialog-action--icon-only{min-width:var(--nvb-preview-btn-height);padding:0}.preview-dialog-action--filled.preview-dialog-action--primary{border-color:var(--color-primary-500);background:var(--color-primary-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--risk{border-color:var(--color-risk-500);background:var(--color-risk-500);color:var(--color-neutral-000)}.preview-dialog-action--filled.preview-dialog-action--neutral{border-color:var(--color-neutral-700);background:var(--color-neutral-700);color:var(--color-neutral-000)}.preview-dialog-action--outlined.preview-dialog-action--primary{border-color:var(--color-primary-500);color:var(--color-primary-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--risk{border-color:var(--color-risk-500);color:var(--color-risk-700);background:transparent}.preview-dialog-action--outlined.preview-dialog-action--neutral{border-color:var(--color-neutral-300);color:var(--color-neutral-700);background:transparent}.preview-dialog-action--text{border-color:transparent;background:transparent;padding-inline:8px}.preview-dialog-action--text.preview-dialog-action--primary{color:var(--color-primary-700)}.preview-dialog-action--text.preview-dialog-action--risk{color:var(--color-risk-700)}.preview-dialog-action--text.preview-dialog-action--neutral{color:var(--color-neutral-700)}.preview-dialog-action:not(:disabled):hover{background:var(--color-neutral-050);border-color:var(--color-neutral-400);filter:none}.preview-dialog-action:disabled{opacity:.6;cursor:not-allowed}.preview-dialog__open{border:1px solid var(--color-primary-500);border-radius:var(--nvb-preview-btn-radius);background:var(--color-primary-500);color:var(--color-neutral-000);min-height:var(--nvb-preview-btn-height);padding:0 14px;cursor:pointer;margin-top:6px;font-size:var(--nvb-preview-btn-font-size);font-weight:600;font-family:var(--nvb-font-family, var(--nvb-font-family-base, \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif))}.view{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;width:100%;min-height:100%}.view--dialog{padding:0}.preview-form-shell--dialog{height:auto;min-height:0}.preview-form-body--dialog{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain}.row{display:flex;flex-wrap:wrap;width:100%;position:relative;align-items:flex-start}.column{min-width:0;max-width:100%;padding:calc(var(--nvb-form-element-spacing, 10px) / 2);box-sizing:border-box;position:relative;gap:10px}.column--hidden{display:none}.preview-result{border:1px solid var(--color-neutral-300);border-radius:10px;background:var(--color-neutral-100);padding:10px;min-height:0}.preview-result h4{margin:0 0 8px;color:var(--color-neutral-700)}.preview-result pre{margin:0;max-height:260px;overflow:auto;background:var(--color-neutral-000);border:1px solid var(--color-neutral-300);border-radius:6px;padding:8px;color:var(--color-neutral-700)}@media(max-width:1100px){.preview-header{grid-template-columns:1fr;justify-items:stretch}.preview-header__side,.preview-header__side--end,.preview-header__center{justify-content:center}.preview-toolbar__select--compact{width:min(100%,320px)}.preview-validation-panel{top:8px;left:8px;width:min(340px,100% - 16px);max-height:calc(100% - 16px)}.preview-stage--with-toc{grid-template-columns:1fr}.preview-toc{width:100%;max-height:170px}.preview-dialog-shell--open{padding:12px}.preview-dialog-shell--open .preview-dialog{max-height:calc(100vh - 24px)}}@media(max-width:767px){.preview-dialog-shell--open{inset:0;padding:0;min-height:100dvh;align-items:stretch}.preview-dialog-shell--open .preview-dialog{width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh;border:none;border-radius:0;box-shadow:none}.preview-dialog-shell--open .preview-dialog__header,.preview-dialog-shell--open .preview-dialog__body,.preview-dialog-shell--open .preview-dialog__footer,.preview-dialog-shell--open .preview-form-shell--dialog,.preview-dialog-shell--open .preview-form-body--dialog,.preview-dialog-shell--open .view--dialog{border-radius:0}}\n"] }]
         }], propDecorators: { viewportSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportSettings", required: false }] }], runtimePreviewSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "runtimePreviewSettings", required: false }] }], previewContentHost: [{
                 type: ViewChild,
                 args: ['previewContentHost']
@@ -90236,4 +90257,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-Fw6YpF9v.mjs.map
+//# sourceMappingURL=ngx-view-builder-ngx-view-builder-CYvIsFw-.mjs.map