@tekus/design-system 5.40.0 → 5.42.0

package/fesm2022/tekus-design-system-components-toolbar.mjs

@@ -14,6 +14,7 @@ import { DropdownComponent } from '@tekus/design-system/components/dropdown';
 import { MultiselectComponent } from '@tekus/design-system/components/multiselect';
 import { ChipComponent } from '@tekus/design-system/components/chip';
 import { DrawerComponent } from '@tekus/design-system/components/drawer';
+import { ColumnPickerComponent } from '@tekus/design-system/components/column-picker';
 
 class ToolbarComponent {
     constructor() {
@@ -99,6 +100,29 @@ class ToolbarComponent {
         this.viewCardsTooltip = input('Vista tarjeta', ...(ngDevMode ? [{ debugName: "viewCardsTooltip" }] : /* istanbul ignore next */ []));
         /** Tooltip text for view table layout button (e.g. 'Vista tabla') */
         this.viewTableTooltip = input('Vista tabla', ...(ngDevMode ? [{ debugName: "viewTableTooltip" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional. Columns listed in the embedded `tk-column-picker`.
+         * The picker button is only shown when this list is not empty.
+         * @default []
+         */
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * Two-way bindable list of hidden column keys, forwarded to the embedded
+         * `tk-column-picker`. Bind the same list to `tk-table`'s `[hiddenColumns]`.
+         * Its initial value preloads a saved selection; locked keys are removed from it.
+         * @default []
+         */
+        this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+        /**
+         * Title/tooltip for the column visibility picker.
+         * @default 'Columnas'
+         */
+        this.columnsLabel = input('Columnas', ...(ngDevMode ? [{ debugName: "columnsLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Label for the button that shows every column again.
+         * @default 'Restablecer'
+         */
+        this.resetColumnsLabel = input('Restablecer', ...(ngDevMode ? [{ debugName: "resetColumnsLabel" }] : /* istanbul ignore next */ []));
         /**
          * Available list of sorting options.
          * @default []
@@ -172,6 +196,11 @@ class ToolbarComponent {
          * Emits when sorting changes.
          */
         this.appliedSort = output();
+        /**
+         * Emits the hidden column keys when the user applies the column picker,
+         * so the consumer can store the selection and preload it next time.
+         */
+        this.appliedColumns = output();
         /** Temporary filter values held before the user clicks "Aplicar" */
         this.tempFilterValues = signal({}, ...(ngDevMode ? [{ debugName: "tempFilterValues" }] : /* istanbul ignore next */ []));
         /** Temporary sort value held before the user clicks "Aplicar" in mobile drawer */
@@ -424,7 +453,7 @@ class ToolbarComponent {
         this.reload.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", isSignal: true, isRequired: false, transformFunction: null }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchVisible: { classPropertyName: "searchVisible", publicName: "searchVisible", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, viewToggleVisible: { classPropertyName: "viewToggleVisible", publicName: "viewToggleVisible", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterOptionLabel: { classPropertyName: "filterOptionLabel", publicName: "filterOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFloatLabel: { classPropertyName: "filterFloatLabel", publicName: "filterFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, filterValues: { classPropertyName: "filterValues", publicName: "filterValues", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteLabel: { classPropertyName: "deleteLabel", publicName: "deleteLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedPluralLabel: { classPropertyName: "selectedPluralLabel", publicName: "selectedPluralLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, reloadTooltip: { classPropertyName: "reloadTooltip", publicName: "reloadTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortTooltip: { classPropertyName: "sortTooltip", publicName: "sortTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewCardsTooltip: { classPropertyName: "viewCardsTooltip", publicName: "viewCardsTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewTableTooltip: { classPropertyName: "viewTableTooltip", publicName: "viewTableTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, reloadVisible: { classPropertyName: "reloadVisible", publicName: "reloadVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadInterval: { classPropertyName: "reloadInterval", publicName: "reloadInterval", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, selectionCount: { classPropertyName: "selectionCount", publicName: "selectionCount", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleSelectionActions: { classPropertyName: "maxVisibleSelectionActions", publicName: "maxVisibleSelectionActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", view: "viewChange", filterModel: "filterModelChange", filterValues: "filterValuesChange", sortValue: "sortValueChange", allSelected: "allSelectedChange", indeterminate: "indeterminateChange", reload: "reload", appliedFilters: "appliedFilters", appliedSort: "appliedSort" }, viewQueries: [{ propertyName: "filterPopover", first: true, predicate: ["filterPopover"], descendants: true, isSignal: true }, { propertyName: "sortPopover", first: true, predicate: ["sortPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\n          <tk-input-text\n            [label]=\"searchFloatLabel()\"\n            icon=\"magnifying-glass\"\n            [clearable]=\"true\"\n            [value]=\"searchModel()\"\n            (valueChange)=\"searchModel.set($event)\">\n          </tk-input-text>\n        </div>\n      }\n\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-theme-s, var(--tk-borderRadius-s, .5rem))!important;position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding-top:var(--tk-spacing-base-125, 1.25rem);margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "hint", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: MultiselectComponent, selector: "tk-multiselect", inputs: ["model", "dataSource", "options", "labelText", "display", "maxSelectedLabels", "selectedItemsLabel", "emptyFilterMessage", "filter", "filterPlaceHolder", "appendTo", "panelStyleClass", "id", "styleClass", "errorMessage", "hint", "loading", "emptyMessage", "fetchParams", "sortField", "sortOrder", "disabled"], outputs: ["modelChange", "dataSourceChange", "selectionChange", "filterChange"] }, { kind: "component", type: ChipComponent, selector: "tk-chip", inputs: ["label", "icon", "removable", "removeIcon"], outputs: ["removed"] }, { kind: "component", type: DrawerComponent, selector: "tk-drawer", inputs: ["dialogRef", "title", "content", "headerAction", "tag", "subtle", "hasTabs", "size", "direction", "closable", "dismissible", "data", "interceptor", "isOpened"], outputs: ["isOpenedChange", "closed"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", isSignal: true, isRequired: false, transformFunction: null }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchVisible: { classPropertyName: "searchVisible", publicName: "searchVisible", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, viewToggleVisible: { classPropertyName: "viewToggleVisible", publicName: "viewToggleVisible", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterOptionLabel: { classPropertyName: "filterOptionLabel", publicName: "filterOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFloatLabel: { classPropertyName: "filterFloatLabel", publicName: "filterFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, filterValues: { classPropertyName: "filterValues", publicName: "filterValues", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteLabel: { classPropertyName: "deleteLabel", publicName: "deleteLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedPluralLabel: { classPropertyName: "selectedPluralLabel", publicName: "selectedPluralLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, reloadTooltip: { classPropertyName: "reloadTooltip", publicName: "reloadTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortTooltip: { classPropertyName: "sortTooltip", publicName: "sortTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewCardsTooltip: { classPropertyName: "viewCardsTooltip", publicName: "viewCardsTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewTableTooltip: { classPropertyName: "viewTableTooltip", publicName: "viewTableTooltip", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, columnsLabel: { classPropertyName: "columnsLabel", publicName: "columnsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetColumnsLabel: { classPropertyName: "resetColumnsLabel", publicName: "resetColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, reloadVisible: { classPropertyName: "reloadVisible", publicName: "reloadVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadInterval: { classPropertyName: "reloadInterval", publicName: "reloadInterval", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, selectionCount: { classPropertyName: "selectionCount", publicName: "selectionCount", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleSelectionActions: { classPropertyName: "maxVisibleSelectionActions", publicName: "maxVisibleSelectionActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", view: "viewChange", filterModel: "filterModelChange", filterValues: "filterValuesChange", hiddenColumns: "hiddenColumnsChange", sortValue: "sortValueChange", allSelected: "allSelectedChange", indeterminate: "indeterminateChange", reload: "reload", appliedFilters: "appliedFilters", appliedSort: "appliedSort", appliedColumns: "appliedColumns" }, viewQueries: [{ propertyName: "filterPopover", first: true, predicate: ["filterPopover"], descendants: true, isSignal: true }, { propertyName: "sortPopover", first: true, predicate: ["sortPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\n          <tk-input-text\n            [label]=\"searchFloatLabel()\"\n            icon=\"magnifying-glass\"\n            [clearable]=\"true\"\n            [value]=\"searchModel()\"\n            (valueChange)=\"searchModel.set($event)\">\n          </tk-input-text>\n        </div>\n      }\n\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        <tk-column-picker\n          [columns]=\"columns()\"\n          [(hiddenColumns)]=\"hiddenColumns\"\n          [label]=\"columnsLabel()\"\n          [resetLabel]=\"resetColumnsLabel()\"\n          [applyLabel]=\"applyLabel()\"\n          (appliedColumns)=\"appliedColumns.emit($event)\">\n        </tk-column-picker>\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-theme-s, var(--tk-borderRadius-s, .5rem))!important;position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding:var(--tk-spacing-base-125, 1.25rem) var(--tk-spacing-padding-xs, .25rem) 0;margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "hint", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: MultiselectComponent, selector: "tk-multiselect", inputs: ["model", "dataSource", "options", "labelText", "display", "maxSelectedLabels", "selectedItemsLabel", "emptyFilterMessage", "filter", "filterPlaceHolder", "appendTo", "panelStyleClass", "id", "styleClass", "errorMessage", "hint", "loading", "emptyMessage", "fetchParams", "sortField", "sortOrder", "disabled"], outputs: ["modelChange", "dataSourceChange", "selectionChange", "filterChange"] }, { kind: "component", type: ChipComponent, selector: "tk-chip", inputs: ["label", "icon", "removable", "removeIcon"], outputs: ["removed"] }, { kind: "component", type: DrawerComponent, selector: "tk-drawer", inputs: ["dialogRef", "title", "content", "headerAction", "tag", "subtle", "hasTabs", "size", "direction", "closable", "dismissible", "data", "interceptor", "isOpened"], outputs: ["isOpenedChange", "closed"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ColumnPickerComponent, selector: "tk-column-picker", inputs: ["columns", "hiddenColumns", "label", "resetLabel", "applyLabel", "closeLabel"], outputs: ["hiddenColumnsChange", "appliedColumns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -439,8 +468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ChipComponent,
                         DrawerComponent,
                         PopoverModule,
-                    ], template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\n          <tk-input-text\n            [label]=\"searchFloatLabel()\"\n            icon=\"magnifying-glass\"\n            [clearable]=\"true\"\n            [value]=\"searchModel()\"\n            (valueChange)=\"searchModel.set($event)\">\n          </tk-input-text>\n        </div>\n      }\n\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-theme-s, var(--tk-borderRadius-s, .5rem))!important;position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding-top:var(--tk-spacing-base-125, 1.25rem);margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { searchModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchModel", required: false }] }, { type: i0.Output, args: ["searchModelChange"] }], searchFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFloatLabel", required: false }] }], searchVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchVisible", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], viewToggleVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewToggleVisible", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }, { type: i0.Output, args: ["filterModelChange"] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], filterOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptionLabel", required: false }] }], filterFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFloatLabel", required: false }] }], filterVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterVisible", required: false }] }], filterValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValues", required: false }] }, { type: i0.Output, args: ["filterValuesChange"] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], deleteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], selectedPluralLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPluralLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], reloadTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadTooltip", required: false }] }], sortTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortTooltip", required: false }] }], viewCardsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewCardsTooltip", required: false }] }], viewTableTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewTableTooltip", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], reloadVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadVisible", required: false }] }], reloadInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadInterval", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], globalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalActions", required: false }] }], selectionCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionCount", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }, { type: i0.Output, args: ["allSelectedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], selectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActions", required: false }] }], maxVisibleSelectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleSelectionActions", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }], appliedFilters: [{ type: i0.Output, args: ["appliedFilters"] }], appliedSort: [{ type: i0.Output, args: ["appliedSort"] }], filterPopover: [{ type: i0.ViewChild, args: ['filterPopover', { isSignal: true }] }], sortPopover: [{ type: i0.ViewChild, args: ['sortPopover', { isSignal: true }] }] } });
+                        ColumnPickerComponent,
+                    ], template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\n          <tk-input-text\n            [label]=\"searchFloatLabel()\"\n            icon=\"magnifying-glass\"\n            [clearable]=\"true\"\n            [value]=\"searchModel()\"\n            (valueChange)=\"searchModel.set($event)\">\n          </tk-input-text>\n        </div>\n      }\n\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        <tk-column-picker\n          [columns]=\"columns()\"\n          [(hiddenColumns)]=\"hiddenColumns\"\n          [label]=\"columnsLabel()\"\n          [resetLabel]=\"resetColumnsLabel()\"\n          [applyLabel]=\"applyLabel()\"\n          (appliedColumns)=\"appliedColumns.emit($event)\">\n        </tk-column-picker>\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-theme-s, var(--tk-borderRadius-s, .5rem))!important;position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding:var(--tk-spacing-base-125, 1.25rem) var(--tk-spacing-padding-xs, .25rem) 0;margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchModel", required: false }] }, { type: i0.Output, args: ["searchModelChange"] }], searchFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFloatLabel", required: false }] }], searchVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchVisible", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], viewToggleVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewToggleVisible", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }, { type: i0.Output, args: ["filterModelChange"] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], filterOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptionLabel", required: false }] }], filterFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFloatLabel", required: false }] }], filterVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterVisible", required: false }] }], filterValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValues", required: false }] }, { type: i0.Output, args: ["filterValuesChange"] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], deleteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], selectedPluralLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPluralLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], reloadTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadTooltip", required: false }] }], sortTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortTooltip", required: false }] }], viewCardsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewCardsTooltip", required: false }] }], viewTableTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewTableTooltip", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], columnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsLabel", required: false }] }], resetColumnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetColumnsLabel", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], reloadVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadVisible", required: false }] }], reloadInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadInterval", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], globalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalActions", required: false }] }], selectionCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionCount", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }, { type: i0.Output, args: ["allSelectedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], selectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActions", required: false }] }], maxVisibleSelectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleSelectionActions", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }], appliedFilters: [{ type: i0.Output, args: ["appliedFilters"] }], appliedSort: [{ type: i0.Output, args: ["appliedSort"] }], appliedColumns: [{ type: i0.Output, args: ["appliedColumns"] }], filterPopover: [{ type: i0.ViewChild, args: ['filterPopover', { isSignal: true }] }], sortPopover: [{ type: i0.ViewChild, args: ['sortPopover', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.