@tekus/design-system 5.33.0 → 5.34.0

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

@@ -1,135 +1,269 @@
 import * as i0 from '@angular/core';
-import { model, signal, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { combineLatest, distinctUntilChanged, switchMap, EMPTY, timer } from 'rxjs';
+import { inject, model, input, output, signal, viewChild, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { map, combineLatest, distinctUntilChanged, switchMap, EMPTY, timer } from 'rxjs';
+import * as i1 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
 import { ButtonComponent } from '@tekus/design-system/components/button';
-import { SelectComponent } from '@tekus/design-system/components/select';
 import { InputTextComponent } from '@tekus/design-system/components/input-text';
+import { CheckboxComponent } from '@tekus/design-system/components/checkbox';
+import { ActionGroupComponent } from '@tekus/design-system/components/action-group';
+import { IconComponent } from '@tekus/design-system/components/icon';
+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';
 
 class ToolbarComponent {
-    /**
-     * @method constructor
-     * @description
-     * Initializes the automatic reload logic using a declarative RxJS approach.
-     */
     constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        /** Responsive flag using BreakpointObserver */
+        this.isMobile = toSignal(this.breakpointObserver.observe('(max-width: 768px)').pipe(map(r => r.matches)), { initialValue: false });
         /**
-         * @property {ModelSignal<string>} searchModel
-         * @description
          * Two-way bindable signal for the search input value.
-         * Supports [(searchModel)]="variable" syntax for two-way binding.
-         * @default ''
          */
         this.searchModel = model('', ...(ngDevMode ? [{ debugName: "searchModel" }] : /* istanbul ignore next */ []));
         /**
-         * @property {ModelSignal<Record<string, string> | null>} filterModel
-         * @description
-         * Two-way bindable signal for the filter select value.
-         * Supports [(filterModel)]="variable" syntax for two-way binding.
-         * @default null
+         * Label/placeholder text displayed inside the search input.
+         * @default 'Buscar'
          */
-        this.filterModel = model(null, ...(ngDevMode ? [{ debugName: "filterModel" }] : /* istanbul ignore next */ []));
+        this.searchFloatLabel = input('Buscar', ...(ngDevMode ? [{ debugName: "searchFloatLabel" }] : /* istanbul ignore next */ []));
         /**
-         * @property {WritableSignal<boolean>} showSearchInput
-         * @description
-         * Controls the visibility of the search input. Toggles when the search button is clicked.
-         * @default false
+         * Controls the visibility of the search input field.
+         * @default true
          */
-        this.showSearchInput = signal(false, ...(ngDevMode ? [{ debugName: "showSearchInput" }] : /* istanbul ignore next */ []));
+        this.searchVisible = input(true, ...(ngDevMode ? [{ debugName: "searchVisible" }] : /* istanbul ignore next */ []));
         /**
-         * @property {WritableSignal<boolean>} showFilterSelect
-         * @description
-         * Controls the visibility of the filter select. Toggles when the filter button is clicked.
+         * Two-way bindable signal for the layout view toggle ('table' or 'cards').
+         * @default 'table'
+         */
+        this.view = model('table', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls the visibility of the layout view toggle button.
          * @default false
          */
-        this.showFilterSelect = signal(false, ...(ngDevMode ? [{ debugName: "showFilterSelect" }] : /* istanbul ignore next */ []));
+        this.viewToggleVisible = input(false, ...(ngDevMode ? [{ debugName: "viewToggleVisible" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<Array<{ label: string; value: string }>>} filterOptions
-         * @description
-         * Array of options available in the filter select dropdown.
-         * Each option is an object with `label` (displayed text) and `value` (internal identifier).
-         *
-         * @default
-         * [
-         *   { label: 'Option 1', value: 'option1' },
-         *   { label: 'Option 2', value: 'option2' },
-         *   { label: 'Option 3', value: 'option3' }
-         * ]
+         * Dynamic list of filters and their available selection options.
+         * @default []
          */
+        this.filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+        /** Backwards compatibility: Writable model signal for the selected option in a single filter select (deprecated) */
+        this.filterModel = model(null, ...(ngDevMode ? [{ debugName: "filterModel" }] : /* istanbul ignore next */ []));
+        /** Backwards compatibility: Input for dropdown options (deprecated) */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.filterOptions = input([
             { label: 'Option 1', value: 'option1' },
             { label: 'Option 2', value: 'option2' },
             { label: 'Option 3', value: 'option3' },
         ], ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
+        /** Backwards compatibility: Input for the option label key (deprecated) */
+        this.filterOptionLabel = input('label', ...(ngDevMode ? [{ debugName: "filterOptionLabel" }] : /* istanbul ignore next */ []));
+        /** Backwards compatibility: Input for the label of the single select dropdown (deprecated) */
+        this.filterFloatLabel = input('Filtrar', ...(ngDevMode ? [{ debugName: "filterFloatLabel" }] : /* istanbul ignore next */ []));
+        /** Backwards compatibility: Controls whether filter button is shown (deprecated) */
+        this.filterVisible = input(true, ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} filterOptionLabel
-         * @description
-         * Property name used to display the label in the select dropdown options.
-         * This corresponds to the key in each option object that contains the display text.
-         *
-         * @default 'label'
+         * Two-way bindable signal for currently selected filter values.
+         * Format: { [filterKey]: MultiSelectOption[] }
+         * @default {}
          */
-        this.filterOptionLabel = input('label', ...(ngDevMode ? [{ debugName: "filterOptionLabel" }] : /* istanbul ignore next */ []));
+        this.filterValues = model({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} filterFloatLabel
-         * @description
-         * Label text displayed above the filter select input using the FloatLabel wrapper.
-         * This is the placeholder/label that floats when the select is focused or has a value.
-         *
-         * @default 'Filtrar'
+         * Label/text for the clear button.
+         * @default 'Limpiar'
          */
-        this.filterFloatLabel = input('Filtrar', ...(ngDevMode ? [{ debugName: "filterFloatLabel" }] : /* istanbul ignore next */ []));
+        this.clearLabel = input('Limpiar', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} searchFloatLabel
-         * @description
-         * Label text displayed above the search input using the FloatLabel wrapper.
-         * This is the placeholder/label that floats when the search input is focused or has a value.
-         *
-         * @default 'Buscar'
+         * Label/text for the delete action button.
+         * @default 'Eliminar'
          */
-        this.searchFloatLabel = input('Buscar', ...(ngDevMode ? [{ debugName: "searchFloatLabel" }] : /* istanbul ignore next */ []));
+        this.deleteLabel = input('Eliminar', ...(ngDevMode ? [{ debugName: "deleteLabel" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} searchVisible
-         * @description
-         * Controls the visibility of the search button.
-         * @default true
+         * Label/text for the filters header.
+         * @default 'Filtros'
          */
-        this.searchVisible = input(true, ...(ngDevMode ? [{ debugName: "searchVisible" }] : /* istanbul ignore next */ []));
+        this.filterLabel = input('Filtros', ...(ngDevMode ? [{ debugName: "filterLabel" }] : /* istanbul ignore next */ []));
+        /** Label for selected item singular form (e.g. 'seleccionado') */
+        this.selectedLabel = input('seleccionado', ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+        /** Label for selected item plural form (e.g. 'seleccionados') */
+        this.selectedPluralLabel = input('seleccionados', ...(ngDevMode ? [{ debugName: "selectedPluralLabel" }] : /* istanbul ignore next */ []));
+        /** Label/text for the apply button in overlays (e.g. 'Aplicar') */
+        this.applyLabel = input('Aplicar', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+        /** Tooltip text for the reload action button (e.g. 'Actualizar') */
+        this.reloadTooltip = input('Actualizar', ...(ngDevMode ? [{ debugName: "reloadTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip text for the sort action button (e.g. 'Ordenar') */
+        this.sortTooltip = input('Ordenar', ...(ngDevMode ? [{ debugName: "sortTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip text for view cards layout button (e.g. 'Vista tarjeta') */
+        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 */ []));
         /**
-         * @property {InputSignal<boolean>} filterVisible
-         * @description
-         * Controls the visibility of the filter button.
-         * @default true
+         * Available list of sorting options.
+         * @default []
          */
-        this.filterVisible = input(true, ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
+        this.sortOptions = input([], ...(ngDevMode ? [{ debugName: "sortOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Label/text for the sorting header.
+         * @default 'Ordenar por'
+         */
+        this.sortLabel = input('Ordenar por', ...(ngDevMode ? [{ debugName: "sortLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Two-way bindable signal for the active sort option value.
+         * @default null
+         */
+        this.sortValue = model(null, ...(ngDevMode ? [{ debugName: "sortValue" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} reloadVisible
-         * @description
          * Controls the visibility of the reload button.
          * @default false
          */
         this.reloadVisible = input(false, ...(ngDevMode ? [{ debugName: "reloadVisible" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<number | null>} reloadInterval
-         * @description
          * Sets the interval for automatic reload in milliseconds.
          * If null, automatic reload is disabled.
          * @default null
          */
         this.reloadInterval = input(null, ...(ngDevMode ? [{ debugName: "reloadInterval" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} loading
-         * @description
          * Controls the loading state of the reload button, triggering a rotation animation.
          * @default false
          */
         this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         /**
-         * @property {OutputEmitter<void>} reload
-         * @description
+         * Secondary or mass actions collapsed into the tk-action-group dropdown.
+         * @default []
+         */
+        this.globalActions = input([], ...(ngDevMode ? [{ debugName: "globalActions" }] : /* istanbul ignore next */ []));
+        /**
+         * Number of items selected in the list.
+         * @default 0
+         */
+        this.selectionCount = input(0, ...(ngDevMode ? [{ debugName: "selectionCount" }] : /* istanbul ignore next */ []));
+        /**
+         * Two-way bindable signal for checking/unchecking the select-all checkbox.
+         * @default false
+         */
+        this.allSelected = model(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+        /**
+         * Two-way bindable signal for the indeterminate state of the select-all checkbox.
+         * @default false
+         */
+        this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        /**
+         * Actions available when one or more items are selected.
+         * @default []
+         */
+        this.selectionActions = input([], ...(ngDevMode ? [{ debugName: "selectionActions" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum number of selection action buttons visible directly before grouping the rest.
+         * @default 1
+         */
+        this.maxVisibleSelectionActions = input(1, ...(ngDevMode ? [{ debugName: "maxVisibleSelectionActions" }] : /* istanbul ignore next */ []));
+        /**
          * Emits an event when the reload button is clicked or the automatic interval is reached.
          */
         this.reload = output();
+        /**
+         * Emits when filters are applied.
+         */
+        this.appliedFilters = output();
+        /**
+         * Emits when sorting changes.
+         */
+        this.appliedSort = 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 */
+        this.tempSortValue = signal(null, ...(ngDevMode ? [{ debugName: "tempSortValue" }] : /* istanbul ignore next */ []));
+        /** Controls visibility of mobile drawers */
+        this.showFilterDrawer = signal(false, ...(ngDevMode ? [{ debugName: "showFilterDrawer" }] : /* istanbul ignore next */ []));
+        this.showSortDrawer = signal(false, ...(ngDevMode ? [{ debugName: "showSortDrawer" }] : /* istanbul ignore next */ []));
+        this.filterPopover = viewChild('filterPopover', ...(ngDevMode ? [{ debugName: "filterPopover" }] : /* istanbul ignore next */ []));
+        this.sortPopover = viewChild('sortPopover', ...(ngDevMode ? [{ debugName: "sortPopover" }] : /* istanbul ignore next */ []));
+        /** Computes whether any filters are currently active */
+        this.hasActiveFilters = computed(() => {
+            const values = this.filterValues();
+            return Object.values(values).some(arr => arr && arr.length > 0);
+        }, ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+        /** Computes whether sorting is active */
+        this.hasActiveSort = computed(() => {
+            return this.sortValue() !== null && this.sortValue() !== '';
+        }, ...(ngDevMode ? [{ debugName: "hasActiveSort" }] : /* istanbul ignore next */ []));
+        /** Reload button visibility: only visible if reload is allowed AND filters or sorting is active */
+        this.shouldShowReload = computed(() => {
+            return this.reloadVisible();
+        }, ...(ngDevMode ? [{ debugName: "shouldShowReload" }] : /* istanbul ignore next */ []));
+        /** Computes the final filters configuration, adapting old filterOptions format to the new filters schema */
+        this.derivedFilters = computed(() => {
+            const customFilters = this.filters();
+            if (customFilters && customFilters.length > 0) {
+                return customFilters;
+            }
+            const oldOptions = this.filterOptions();
+            if (oldOptions && oldOptions.length > 0) {
+                return [
+                    {
+                        key: 'default_filter',
+                        label: this.filterFloatLabel() || 'Filtrar',
+                        options: oldOptions.map(opt => ({
+                            name: opt[this.filterOptionLabel()] || opt['label'] || opt['value'],
+                            code: opt['value']
+                        }))
+                    }
+                ];
+            }
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "derivedFilters" }] : /* istanbul ignore next */ []));
+        /** Active chips representing individual filter selections */
+        this.activeChips = computed(() => {
+            const values = this.filterValues();
+            const configs = this.derivedFilters();
+            const chips = [];
+            for (const config of configs) {
+                const selected = values[config.key] || [];
+                for (const item of selected) {
+                    chips.push({
+                        filterKey: config.key,
+                        code: item.code,
+                        label: item.name,
+                    });
+                }
+            }
+            return chips;
+        }, ...(ngDevMode ? [{ debugName: "activeChips" }] : /* istanbul ignore next */ []));
+        /** Visibility of the active filters bar (below tools) */
+        this.shouldShowActiveFiltersBar = computed(() => {
+            return this.hasActiveFilters();
+        }, ...(ngDevMode ? [{ debugName: "shouldShowActiveFiltersBar" }] : /* istanbul ignore next */ []));
+        /** Visible selection actions as buttons */
+        this.visibleSelectionActions = computed(() => {
+            return this.selectionActions()
+                .slice(0, this.maxVisibleSelectionActions())
+                .map(action => {
+                if (action.severity === 'danger') {
+                    return { ...action, label: this.deleteLabel() };
+                }
+                return action;
+            });
+        }, ...(ngDevMode ? [{ debugName: "visibleSelectionActions" }] : /* istanbul ignore next */ []));
+        /** Overflow selection actions as menu items for dropdown */
+        this.overflowSelectionActions = computed(() => {
+            const list = this.selectionActions();
+            const max = this.maxVisibleSelectionActions();
+            if (list.length <= max) {
+                return [];
+            }
+            return list.slice(max).map(action => {
+                const label = action.severity === 'danger' ? this.deleteLabel() : action.label;
+                return {
+                    label: label,
+                    icon: action.icon,
+                    command: () => action.action(),
+                    disabled: action.disabled ?? false,
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "overflowSelectionActions" }] : /* istanbul ignore next */ []));
         combineLatest([
             toObservable(this.reloadInterval).pipe(distinctUntilChanged()),
             toObservable(this.loading).pipe(distinctUntilChanged()),
@@ -141,50 +275,172 @@ class ToolbarComponent {
             return timer(interval, interval);
         }), takeUntilDestroyed())
             .subscribe(() => this.onReload());
+        effect(() => {
+            const modelVal = this.filterModel();
+            if (modelVal?.['value']) {
+                const matchedOpt = this.filterOptions().find(opt => opt['value'] === modelVal['value']);
+                if (matchedOpt) {
+                    const labelKey = this.filterOptionLabel();
+                    const label = matchedOpt[labelKey] || matchedOpt['label'] || matchedOpt['value'];
+                    untracked(() => {
+                        const current = this.filterValues();
+                        const currentSelections = current['default_filter'] || [];
+                        if (currentSelections.length !== 1 || currentSelections[0].code !== matchedOpt['value']) {
+                            this.filterValues.set({
+                                ...current,
+                                default_filter: [{ name: label, code: matchedOpt['value'] }]
+                            });
+                        }
+                    });
+                }
+            }
+            else if (!modelVal) {
+                untracked(() => {
+                    const current = this.filterValues();
+                    if (current['default_filter'] && current['default_filter'].length > 0) {
+                        const updated = { ...current };
+                        delete updated['default_filter'];
+                        this.filterValues.set(updated);
+                    }
+                });
+            }
+        });
+        // Sync filterValues (new) -> filterModel (old single-select)
+        effect(() => {
+            const values = this.filterValues();
+            const defaultFilterSelections = values['default_filter'];
+            if (defaultFilterSelections && defaultFilterSelections.length > 0) {
+                const lastSelected = defaultFilterSelections[defaultFilterSelections.length - 1];
+                const matchedOpt = this.filterOptions().find(opt => opt['value'] === lastSelected.code);
+                if (matchedOpt) {
+                    untracked(() => {
+                        if (this.filterModel()?.['value'] !== matchedOpt['value']) {
+                            this.filterModel.set(matchedOpt);
+                        }
+                    });
+                }
+            }
+            else {
+                untracked(() => {
+                    if (this.filterModel() !== null) {
+                        this.filterModel.set(null);
+                    }
+                });
+            }
+        });
+    }
+    /** Toggles filters overlay and initializes temporary state */
+    openFilters(event) {
+        const currentValues = this.filterValues();
+        // Copy current filter selections into temporary state
+        const copy = {};
+        for (const key of Object.keys(currentValues)) {
+            copy[key] = [...(currentValues[key] || [])];
+        }
+        this.tempFilterValues.set(copy);
+        if (this.isMobile()) {
+            this.showFilterDrawer.set(true);
+        }
+        else {
+            this.filterPopover()?.toggle(event);
+        }
+    }
+    /** Updates temporary filter values for a specific filter key */
+    onTempFilterChange(key, value) {
+        this.tempFilterValues.update(prev => ({ ...prev, [key]: value }));
+    }
+    /** Saves temporary filter selections and triggers apply */
+    applyFilters() {
+        const temp = this.tempFilterValues();
+        this.filterValues.set({ ...temp });
+        this.appliedFilters.emit({ ...temp });
+        if (this.isMobile()) {
+            this.showFilterDrawer.set(false);
+        }
+        else {
+            this.filterPopover()?.hide();
+        }
+    }
+    /** Clears temporary filters inside popover/drawer */
+    clearTempFilters() {
+        const cleared = {};
+        for (const filter of this.derivedFilters()) {
+            cleared[filter.key] = [];
+        }
+        this.tempFilterValues.set(cleared);
+    }
+    /** Clears all applied filters */
+    clearAllFilters() {
+        const cleared = {};
+        this.filterValues.set(cleared);
+        this.appliedFilters.emit(cleared);
+    }
+    /** Removes a single filter chip */
+    removeChip(chip) {
+        const currentValues = { ...this.filterValues() };
+        const list = currentValues[chip.filterKey] || [];
+        currentValues[chip.filterKey] = list.filter(item => item.code !== chip.code);
+        this.filterValues.set(currentValues);
+        this.appliedFilters.emit(currentValues);
+    }
+    /** Toggles sorting overlay */
+    openSort(event) {
+        if (this.isMobile()) {
+            this.tempSortValue.set(this.sortValue());
+            this.showSortDrawer.set(true);
+        }
+        else {
+            this.sortPopover()?.toggle(event);
+        }
+    }
+    /** Selects a sort option (toggles if already selected) and hides overlay */
+    selectSortOption(value, isMobileDrawer = false) {
+        const newValue = this.sortValue() === value ? null : value;
+        this.sortValue.set(newValue);
+        this.appliedSort.emit(newValue);
+        if (isMobileDrawer) {
+            this.showSortDrawer.set(false);
+        }
+        else {
+            this.sortPopover()?.hide();
+        }
     }
-    /**
-     * @method toggleSearchInput
-     * @description
-     * Toggles the visibility of the search input field.
-     */
-    toggleSearchInput() {
-        this.showSearchInput.update(value => !value);
-        this.searchModel.set('');
+    /** Toggles temporary sorting selection on mobile drawer */
+    toggleSortOptionMobile(value) {
+        this.tempSortValue.update(prev => prev === value ? null : value);
     }
-    /**
-     * @method toggleFilterSelect
-     * @description
-     * Toggles the visibility of the filter select dropdown.
-     */
-    toggleFilterSelect() {
-        this.showFilterSelect.update(value => !value);
-        this.filterModel.set(null);
+    /** Applies selected sorting on mobile */
+    applySortMobile() {
+        const val = this.tempSortValue();
+        this.sortValue.set(val);
+        this.appliedSort.emit(val);
+        this.showSortDrawer.set(false);
     }
-    /**
-     * @method onSelectedOption
-     * @description
-     * Handles filter select changes and updates the filterModel signal.
-     *
-     * @param value - Selected option value from tk-select
-     */
-    onSelectedOption(value) {
-        this.filterModel.set(value);
+    /** Toggle layout view */
+    toggleView() {
+        this.view.set(this.view() === 'table' ? 'cards' : 'table');
     }
-    /**
-     * @method onReload
-     * @description
-     * Emits the reload event.
-     */
     onReload() {
         this.reload.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", 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 }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchVisible: { classPropertyName: "searchVisible", publicName: "searchVisible", isSignal: true, isRequired: false, transformFunction: null }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", 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 } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange", reload: "reload" }, ngImport: i0, template: "<div class=\"toolbar\">\n  @if (showSearchInput() && searchVisible()) {\n    <div class=\"toolbar__input-container\">\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  @if (showFilterSelect() && filterVisible()) {\n    <div class=\"toolbar__input-container\">\n      <tk-select\n        [options]=\"filterOptions()\"\n        [optionLabel]=\"filterOptionLabel()\"\n        [label]=\"filterFloatLabel()\"\n        (modelChange)=\"onSelectedOption($event ?? null)\">\n      </tk-select>\n    </div>\n  }\n  <div class=\"toolbar__buttons\">\n    @if (searchVisible()) {\n      <tk-button\n        [icon]=\"'magnifying-glass'\"\n        severity=\"secondary\"\n        [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n        (clicked)=\"toggleSearchInput()\">\n      </tk-button>\n    }\n    @if (filterVisible()) {\n      <tk-button\n        [icon]=\"'filter'\"\n        severity=\"secondary\"\n        [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n        (clicked)=\"toggleFilterSelect()\">\n      </tk-button>\n    }\n    @if (reloadVisible()) {\n      <tk-button\n        class=\"toolbar__reload-btn\"\n        [class.toolbar__reload-btn--animating]=\"\n          reloadInterval() && reloadInterval()! > 0 && !loading()\n        \"\n        [class.toolbar__reload-btn--spinning]=\"loading()\"\n        [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n        [icon]=\"'arrows-rotate'\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"onReload()\">\n      </tk-button>\n    }\n  </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:end;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}.toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px)!important;position:relative}.toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:-2px;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:2px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}@media(max-width:768px){.toolbar{justify-content:flex-start}}@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-button-outlined{border:1px solid transparent!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "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: SelectComponent, selector: "tk-select", inputs: ["id", "control", "options", "dataSource", "optionLabel", "label", "showClear", "disabled", "errorMessage", "hint", "filter", "placeholder", "loading", "fetchParams", "sortField", "sortOrder", "model", "emptyMessage", "emptyFilterMessage"], outputs: ["dataSourceChange", "modelChange", "filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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-s, 8px);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", "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", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-toolbar', imports: [ButtonComponent, InputTextComponent, SelectComponent], template: "<div class=\"toolbar\">\n  @if (showSearchInput() && searchVisible()) {\n    <div class=\"toolbar__input-container\">\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  @if (showFilterSelect() && filterVisible()) {\n    <div class=\"toolbar__input-container\">\n      <tk-select\n        [options]=\"filterOptions()\"\n        [optionLabel]=\"filterOptionLabel()\"\n        [label]=\"filterFloatLabel()\"\n        (modelChange)=\"onSelectedOption($event ?? null)\">\n      </tk-select>\n    </div>\n  }\n  <div class=\"toolbar__buttons\">\n    @if (searchVisible()) {\n      <tk-button\n        [icon]=\"'magnifying-glass'\"\n        severity=\"secondary\"\n        [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n        (clicked)=\"toggleSearchInput()\">\n      </tk-button>\n    }\n    @if (filterVisible()) {\n      <tk-button\n        [icon]=\"'filter'\"\n        severity=\"secondary\"\n        [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n        (clicked)=\"toggleFilterSelect()\">\n      </tk-button>\n    }\n    @if (reloadVisible()) {\n      <tk-button\n        class=\"toolbar__reload-btn\"\n        [class.toolbar__reload-btn--animating]=\"\n          reloadInterval() && reloadInterval()! > 0 && !loading()\n        \"\n        [class.toolbar__reload-btn--spinning]=\"loading()\"\n        [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n        [icon]=\"'arrows-rotate'\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"onReload()\">\n      </tk-button>\n    }\n  </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:end;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}.toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px)!important;position:relative}.toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:-2px;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:2px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}@media(max-width:768px){.toolbar{justify-content:flex-start}}@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-button-outlined{border:1px solid transparent!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { searchModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchModel", required: false }] }, { type: i0.Output, args: ["searchModelChange"] }], 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 }] }], searchFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFloatLabel", required: false }] }], searchVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchVisible", required: false }] }], filterVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterVisible", required: false }] }], 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 }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-toolbar', imports: [
+                        ButtonComponent,
+                        InputTextComponent,
+                        CheckboxComponent,
+                        ActionGroupComponent,
+                        IconComponent,
+                        DropdownComponent,
+                        MultiselectComponent,
+                        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-s, 8px);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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.