@tekus/design-system 5.33.1 → 5.34.0

package/types/tekus-design-system-components-chip.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * @component ChipComponent
+ * @description
+ * A component used to display compact elements like labels, filters, or attributes.
+ * It wraps PrimeNG's `p-chip` component with custom styling and behavior.
+ *
+ * This component supports:
+ * - `label`: The text to display.
+ * - `icon`: Optional icon before the text.
+ * - `image`: Optional avatar image.
+ * - `removable`: Displays a close button that triggers the `removed` output.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-chip label="Design"></tk-chip>
+ * ```
+ */
+declare class ChipComponent {
+    /** The text label to display on the chip. */
+    label: _angular_core.InputSignal<string | undefined>;
+    /** Icon class to display before the label. */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /** Whether the chip is removable. If true, displays a close icon. */
+    removable: _angular_core.InputSignal<boolean>;
+    /** Custom icon class for the close button. */
+    removeIcon: _angular_core.InputSignal<string | undefined>;
+    /** Event emitted when the close/remove button is clicked. */
+    removed: _angular_core.OutputEmitterRef<Event>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "tk-chip", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeIcon": { "alias": "removeIcon"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, never, true, never>;
+}
+
+export { ChipComponent };

package/types/tekus-design-system-components-drawer.d.ts

@@ -5,6 +5,7 @@ import { SeverityType } from '@tekus/design-system/components/modal';
 import { TkCloseInterceptor, TkDialogRef } from '@tekus/design-system/core/types';
 
 type DrawerSizeType = 'small' | 'large';
+type DrawerDirectionType = 'right' | 'bottom';
 interface DrawerHeaderAction {
     label: string;
     severity: SeverityType;
@@ -20,6 +21,7 @@ interface DrawerConfig<T = unknown> {
     hasTabs?: boolean;
     headerAction?: DrawerHeaderAction;
     size?: DrawerSizeType;
+    direction?: DrawerDirectionType;
     closable?: boolean;
     dismissible?: boolean;
     data?: Partial<T>;
@@ -81,6 +83,8 @@ declare class DrawerComponent<T = unknown> implements OnDestroy {
     hasTabs: _angular_core.InputSignal<boolean>;
     /** Drawer size: 'small' (500px), 'large' (1024px) */
     size: _angular_core.InputSignal<DrawerSizeType>;
+    /** Drawer direction: 'right' (default) or 'bottom' */
+    direction: _angular_core.InputSignal<DrawerDirectionType>;
     /** Whether the drawer can be closed by the user via close button */
     closable: _angular_core.InputSignal<boolean>;
     /** Whether clicking the mask closes the drawer */
@@ -91,10 +95,17 @@ declare class DrawerComponent<T = unknown> implements OnDestroy {
     interceptor: _angular_core.InputSignal<TkCloseInterceptor | undefined>;
     isContentString: _angular_core.Signal<boolean>;
     hasHeaderAction: _angular_core.Signal<boolean>;
-    /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
+    /** Computed: drawer style based on size and direction. */
     drawerStyle: _angular_core.Signal<{
+        width: string;
+        height: string;
+        maxHeight: string;
+        maxWidth?: undefined;
+    } | {
         width: string;
         maxWidth: string;
+        height?: undefined;
+        maxHeight?: undefined;
     }>;
     /** Visibility flag. Use model for two-way binding when using drawer in template. */
     isOpened: _angular_core.ModelSignal<boolean>;
@@ -137,7 +148,7 @@ declare class DrawerComponent<T = unknown> implements OnDestroy {
     handleHeaderAction(action: (() => void) | undefined, returnValue: unknown): void;
     private resetClosureState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent<any>, "tk-drawer", never, { "dialogRef": { "alias": "dialogRef"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; "subtle": { "alias": "subtle"; "required": false; "isSignal": true; }; "hasTabs": { "alias": "hasTabs"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent<any>, "tk-drawer", never, { "dialogRef": { "alias": "dialogRef"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; "subtle": { "alias": "subtle"; "required": false; "isSignal": true; }; "hasTabs": { "alias": "hasTabs"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
 declare class DrawerService {
@@ -151,4 +162,4 @@ declare class DrawerService {
 }
 
 export { DrawerComponent, DrawerService };
-export type { DrawerConfig, DrawerHeaderAction, DrawerSizeType };
+export type { DrawerConfig, DrawerDirectionType, DrawerHeaderAction, DrawerSizeType };

package/types/tekus-design-system-components-multiselect.d.ts

@@ -177,6 +177,16 @@ declare class MultiselectComponent implements ControlValueAccessor, OnDestroy {
      * Placeholder text for the filter input.
      */
     filterPlaceHolder: _angular_core.InputSignal<string>;
+    /**
+     * Target element or selector to append the overlay panel to.
+     * @default undefined
+     */
+    appendTo: _angular_core.InputSignal<string | HTMLElement | null | undefined>;
+    /**
+     * Custom style class to apply to the overlay panel.
+     * @default undefined
+     */
+    panelStyleClass: _angular_core.InputSignal<string | undefined>;
     /**
      * @property {string} id
      * @description
@@ -360,7 +370,7 @@ declare class MultiselectComponent implements ControlValueAccessor, OnDestroy {
      */
     get effectiveControl(): FormControl | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiselectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "fetchParams": { "alias": "fetchParams"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "dataSource": "dataSourceChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "fetchParams": { "alias": "fetchParams"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "dataSource": "dataSourceChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; }, never, never, true, never>;
 }
 
 export { MultiselectComponent, TkMultiSelectManager };

package/types/tekus-design-system-components-table.d.ts

@@ -97,7 +97,11 @@ declare class TableComponent<T = unknown> {
     /** Tracks which column's filter overlay is currently open */
     readonly activeFilterColumn: _angular_core.WritableSignal<string | null>;
     /** Stores the selected filter value per column field (null = no filter) */
-    readonly columnFilters: _angular_core.WritableSignal<Record<string, string | null>>;
+    readonly columnFilters: _angular_core.ModelSignal<Record<string, string | null>>;
+    /** Two-way bindable signal for the active sort field */
+    readonly sortField: _angular_core.ModelSignal<string | null>;
+    /** Two-way bindable signal for the active sort order (1 for asc, -1 for desc) */
+    readonly sortOrder: _angular_core.ModelSignal<1 | -1 | null>;
     /** Position of the filter overlay (fixed, relative to viewport) */
     readonly filterOverlayPosition: _angular_core.WritableSignal<{
         top: number;
@@ -221,7 +225,7 @@ declare class TableComponent<T = unknown> {
      */
     onImageError(event: Event, fallback?: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "columnFilters": "columnFiltersChange"; "sortField": "sortFieldChange"; "sortOrder": "sortOrderChange"; }, never, never, true, never>;
 }
 
 export { TableComponent };

package/types/tekus-design-system-components-toolbar.d.ts

@@ -1,156 +1,243 @@
 import * as _angular_core from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Popover } from 'primeng/popover';
+import { TkAction } from '@tekus/design-system/components/action-group';
+import { MultiSelectOption } from '@tekus/design-system/components/multiselect';
+import { ButtonSeverity, Variant } from '@tekus/design-system/components/button';
+
+/**
+ * Configuration for a toolbar filter item.
+ */
+interface TkToolbarFilterConfig {
+    key: string;
+    label: string;
+    options: MultiSelectOption[];
+}
+/**
+ * Definition for toolbar selection or mass actions.
+ */
+interface TkToolbarAction {
+    icon?: string;
+    label: string;
+    action: () => void;
+    disabled?: boolean;
+    severity?: ButtonSeverity;
+    variant?: Variant;
+}
 
 declare class ToolbarComponent {
+    private readonly breakpointObserver;
+    /** Responsive flag using BreakpointObserver */
+    isMobile: _angular_core.Signal<boolean>;
     /**
-     * @property {ModelSignal<string>} searchModel
-     * @description
      * Two-way bindable signal for the search input value.
-     * Supports [(searchModel)]="variable" syntax for two-way binding.
-     * @default ''
      */
     searchModel: _angular_core.ModelSignal<string>;
     /**
-     * @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'
      */
-    filterModel: _angular_core.ModelSignal<Record<string, string> | null>;
+    searchFloatLabel: _angular_core.InputSignal<string>;
     /**
-     * @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
+     */
+    searchVisible: _angular_core.InputSignal<boolean>;
+    /**
+     * Two-way bindable signal for the layout view toggle ('table' or 'cards').
+     * @default 'table'
      */
-    showSearchInput: _angular_core.WritableSignal<boolean>;
+    view: _angular_core.ModelSignal<"table" | "cards">;
     /**
-     * @property {WritableSignal<boolean>} showFilterSelect
-     * @description
-     * Controls the visibility of the filter select. Toggles when the filter button is clicked.
+     * Controls the visibility of the layout view toggle button.
      * @default false
      */
-    showFilterSelect: _angular_core.WritableSignal<boolean>;
-    /**
-     * @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' }
-     * ]
-     */
-    filterOptions: _angular_core.InputSignal<{
-        label: string;
-        value: string;
-    }[]>;
+    viewToggleVisible: _angular_core.InputSignal<boolean>;
     /**
-     * @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'
+     * Dynamic list of filters and their available selection options.
+     * @default []
      */
+    filters: _angular_core.InputSignal<TkToolbarFilterConfig[]>;
+    /** Backwards compatibility: Writable model signal for the selected option in a single filter select (deprecated) */
+    filterModel: _angular_core.ModelSignal<Record<string, string> | null>;
+    /** Backwards compatibility: Input for dropdown options (deprecated) */
+    filterOptions: _angular_core.InputSignal<any[]>;
+    /** Backwards compatibility: Input for the option label key (deprecated) */
     filterOptionLabel: _angular_core.InputSignal<string>;
+    /** Backwards compatibility: Input for the label of the single select dropdown (deprecated) */
+    filterFloatLabel: _angular_core.InputSignal<string>;
+    /** Backwards compatibility: Controls whether filter button is shown (deprecated) */
+    filterVisible: _angular_core.InputSignal<boolean>;
     /**
-     * @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'
+     * Two-way bindable signal for currently selected filter values.
+     * Format: { [filterKey]: MultiSelectOption[] }
+     * @default {}
      */
-    filterFloatLabel: _angular_core.InputSignal<string>;
+    filterValues: _angular_core.ModelSignal<Record<string, MultiSelectOption[]>>;
     /**
-     * @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 clear button.
+     * @default 'Limpiar'
      */
-    searchFloatLabel: _angular_core.InputSignal<string>;
+    clearLabel: _angular_core.InputSignal<string>;
     /**
-     * @property {InputSignal<boolean>} searchVisible
-     * @description
-     * Controls the visibility of the search button.
-     * @default true
+     * Label/text for the delete action button.
+     * @default 'Eliminar'
      */
-    searchVisible: _angular_core.InputSignal<boolean>;
+    deleteLabel: _angular_core.InputSignal<string>;
     /**
-     * @property {InputSignal<boolean>} filterVisible
-     * @description
-     * Controls the visibility of the filter button.
-     * @default true
+     * Label/text for the filters header.
+     * @default 'Filtros'
      */
-    filterVisible: _angular_core.InputSignal<boolean>;
+    filterLabel: _angular_core.InputSignal<string>;
+    /** Label for selected item singular form (e.g. 'seleccionado') */
+    selectedLabel: _angular_core.InputSignal<string>;
+    /** Label for selected item plural form (e.g. 'seleccionados') */
+    selectedPluralLabel: _angular_core.InputSignal<string>;
+    /** Label/text for the apply button in overlays (e.g. 'Aplicar') */
+    applyLabel: _angular_core.InputSignal<string>;
+    /** Tooltip text for the reload action button (e.g. 'Actualizar') */
+    reloadTooltip: _angular_core.InputSignal<string>;
+    /** Tooltip text for the sort action button (e.g. 'Ordenar') */
+    sortTooltip: _angular_core.InputSignal<string>;
+    /** Tooltip text for view cards layout button (e.g. 'Vista tarjeta') */
+    viewCardsTooltip: _angular_core.InputSignal<string>;
+    /** Tooltip text for view table layout button (e.g. 'Vista tabla') */
+    viewTableTooltip: _angular_core.InputSignal<string>;
+    /**
+     * Available list of sorting options.
+     * @default []
+     */
+    sortOptions: _angular_core.InputSignal<{
+        label: string;
+        value: string;
+    }[]>;
+    /**
+     * Label/text for the sorting header.
+     * @default 'Ordenar por'
+     */
+    sortLabel: _angular_core.InputSignal<string>;
+    /**
+     * Two-way bindable signal for the active sort option value.
+     * @default null
+     */
+    sortValue: _angular_core.ModelSignal<string | null>;
     /**
-     * @property {InputSignal<boolean>} reloadVisible
-     * @description
      * Controls the visibility of the reload button.
      * @default false
      */
     reloadVisible: _angular_core.InputSignal<boolean>;
     /**
-     * @property {InputSignal<number | null>} reloadInterval
-     * @description
      * Sets the interval for automatic reload in milliseconds.
      * If null, automatic reload is disabled.
      * @default null
      */
     reloadInterval: _angular_core.InputSignal<number | null>;
     /**
-     * @property {InputSignal<boolean>} loading
-     * @description
      * Controls the loading state of the reload button, triggering a rotation animation.
      * @default false
      */
     loading: _angular_core.InputSignal<boolean>;
     /**
-     * @property {OutputEmitter<void>} reload
-     * @description
-     * Emits an event when the reload button is clicked or the automatic interval is reached.
+     * Secondary or mass actions collapsed into the tk-action-group dropdown.
+     * @default []
      */
-    reload: _angular_core.OutputEmitterRef<void>;
+    globalActions: _angular_core.InputSignal<TkAction[]>;
     /**
-     * @method constructor
-     * @description
-     * Initializes the automatic reload logic using a declarative RxJS approach.
+     * Number of items selected in the list.
+     * @default 0
      */
-    constructor();
+    selectionCount: _angular_core.InputSignal<number>;
+    /**
+     * Two-way bindable signal for checking/unchecking the select-all checkbox.
+     * @default false
+     */
+    allSelected: _angular_core.ModelSignal<boolean>;
     /**
-     * @method toggleSearchInput
-     * @description
-     * Toggles the visibility of the search input field.
+     * Two-way bindable signal for the indeterminate state of the select-all checkbox.
+     * @default false
      */
-    toggleSearchInput(): void;
+    indeterminate: _angular_core.ModelSignal<boolean>;
     /**
-     * @method toggleFilterSelect
-     * @description
-     * Toggles the visibility of the filter select dropdown.
+     * Actions available when one or more items are selected.
+     * @default []
      */
-    toggleFilterSelect(): void;
+    selectionActions: _angular_core.InputSignal<TkToolbarAction[]>;
     /**
-     * @method onSelectedOption
-     * @description
-     * Handles filter select changes and updates the filterModel signal.
-     *
-     * @param value - Selected option value from tk-select
+     * Maximum number of selection action buttons visible directly before grouping the rest.
+     * @default 1
      */
-    onSelectedOption(value: Record<string, string> | null): void;
+    maxVisibleSelectionActions: _angular_core.InputSignal<number>;
     /**
-     * @method onReload
-     * @description
-     * Emits the reload event.
+     * Emits an event when the reload button is clicked or the automatic interval is reached.
      */
+    reload: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when filters are applied.
+     */
+    appliedFilters: _angular_core.OutputEmitterRef<Record<string, MultiSelectOption[]>>;
+    /**
+     * Emits when sorting changes.
+     */
+    appliedSort: _angular_core.OutputEmitterRef<string | null>;
+    /** Temporary filter values held before the user clicks "Aplicar" */
+    tempFilterValues: _angular_core.WritableSignal<Record<string, MultiSelectOption[]>>;
+    /** Temporary sort value held before the user clicks "Aplicar" in mobile drawer */
+    tempSortValue: _angular_core.WritableSignal<string | null>;
+    /** Controls visibility of mobile drawers */
+    showFilterDrawer: _angular_core.WritableSignal<boolean>;
+    showSortDrawer: _angular_core.WritableSignal<boolean>;
+    filterPopover: _angular_core.Signal<Popover | undefined>;
+    sortPopover: _angular_core.Signal<Popover | undefined>;
+    /** Computes whether any filters are currently active */
+    hasActiveFilters: _angular_core.Signal<boolean>;
+    /** Computes whether sorting is active */
+    hasActiveSort: _angular_core.Signal<boolean>;
+    /** Reload button visibility: only visible if reload is allowed AND filters or sorting is active */
+    shouldShowReload: _angular_core.Signal<boolean>;
+    /** Computes the final filters configuration, adapting old filterOptions format to the new filters schema */
+    derivedFilters: _angular_core.Signal<TkToolbarFilterConfig[]>;
+    /** Active chips representing individual filter selections */
+    activeChips: _angular_core.Signal<{
+        filterKey: string;
+        code: string;
+        label: string;
+    }[]>;
+    /** Visibility of the active filters bar (below tools) */
+    shouldShowActiveFiltersBar: _angular_core.Signal<boolean>;
+    /** Visible selection actions as buttons */
+    visibleSelectionActions: _angular_core.Signal<TkToolbarAction[]>;
+    /** Overflow selection actions as menu items for dropdown */
+    overflowSelectionActions: _angular_core.Signal<MenuItem[]>;
+    constructor();
+    /** Toggles filters overlay and initializes temporary state */
+    openFilters(event: Event): void;
+    /** Updates temporary filter values for a specific filter key */
+    onTempFilterChange(key: string, value: MultiSelectOption[]): void;
+    /** Saves temporary filter selections and triggers apply */
+    applyFilters(): void;
+    /** Clears temporary filters inside popover/drawer */
+    clearTempFilters(): void;
+    /** Clears all applied filters */
+    clearAllFilters(): void;
+    /** Removes a single filter chip */
+    removeChip(chip: {
+        filterKey: string;
+        code: string;
+    }): void;
+    /** Toggles sorting overlay */
+    openSort(event: Event): void;
+    /** Selects a sort option (toggles if already selected) and hides overlay */
+    selectSortOption(value: string, isMobileDrawer?: boolean): void;
+    /** Toggles temporary sorting selection on mobile drawer */
+    toggleSortOptionMobile(value: string): void;
+    /** Applies selected sorting on mobile */
+    applySortMobile(): void;
+    /** Toggle layout view */
+    toggleView(): void;
     onReload(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToolbarComponent, "tk-toolbar", never, { "searchModel": { "alias": "searchModel"; "required": false; "isSignal": true; }; "filterModel": { "alias": "filterModel"; "required": false; "isSignal": true; }; "filterOptions": { "alias": "filterOptions"; "required": false; "isSignal": true; }; "filterOptionLabel": { "alias": "filterOptionLabel"; "required": false; "isSignal": true; }; "filterFloatLabel": { "alias": "filterFloatLabel"; "required": false; "isSignal": true; }; "searchFloatLabel": { "alias": "searchFloatLabel"; "required": false; "isSignal": true; }; "searchVisible": { "alias": "searchVisible"; "required": false; "isSignal": true; }; "filterVisible": { "alias": "filterVisible"; "required": false; "isSignal": true; }; "reloadVisible": { "alias": "reloadVisible"; "required": false; "isSignal": true; }; "reloadInterval": { "alias": "reloadInterval"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "searchModel": "searchModelChange"; "filterModel": "filterModelChange"; "reload": "reload"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToolbarComponent, "tk-toolbar", never, { "searchModel": { "alias": "searchModel"; "required": false; "isSignal": true; }; "searchFloatLabel": { "alias": "searchFloatLabel"; "required": false; "isSignal": true; }; "searchVisible": { "alias": "searchVisible"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "viewToggleVisible": { "alias": "viewToggleVisible"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "filterModel": { "alias": "filterModel"; "required": false; "isSignal": true; }; "filterOptions": { "alias": "filterOptions"; "required": false; "isSignal": true; }; "filterOptionLabel": { "alias": "filterOptionLabel"; "required": false; "isSignal": true; }; "filterFloatLabel": { "alias": "filterFloatLabel"; "required": false; "isSignal": true; }; "filterVisible": { "alias": "filterVisible"; "required": false; "isSignal": true; }; "filterValues": { "alias": "filterValues"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "deleteLabel": { "alias": "deleteLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectedLabel": { "alias": "selectedLabel"; "required": false; "isSignal": true; }; "selectedPluralLabel": { "alias": "selectedPluralLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "reloadTooltip": { "alias": "reloadTooltip"; "required": false; "isSignal": true; }; "sortTooltip": { "alias": "sortTooltip"; "required": false; "isSignal": true; }; "viewCardsTooltip": { "alias": "viewCardsTooltip"; "required": false; "isSignal": true; }; "viewTableTooltip": { "alias": "viewTableTooltip"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "sortLabel": { "alias": "sortLabel"; "required": false; "isSignal": true; }; "sortValue": { "alias": "sortValue"; "required": false; "isSignal": true; }; "reloadVisible": { "alias": "reloadVisible"; "required": false; "isSignal": true; }; "reloadInterval": { "alias": "reloadInterval"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "globalActions": { "alias": "globalActions"; "required": false; "isSignal": true; }; "selectionCount": { "alias": "selectionCount"; "required": false; "isSignal": true; }; "allSelected": { "alias": "allSelected"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleSelectionActions": { "alias": "maxVisibleSelectionActions"; "required": false; "isSignal": true; }; }, { "searchModel": "searchModelChange"; "view": "viewChange"; "filterModel": "filterModelChange"; "filterValues": "filterValuesChange"; "sortValue": "sortValueChange"; "allSelected": "allSelectedChange"; "indeterminate": "indeterminateChange"; "reload": "reload"; "appliedFilters": "appliedFilters"; "appliedSort": "appliedSort"; }, never, never, true, never>;
 }
 
 export { ToolbarComponent };
+export type { TkToolbarAction, TkToolbarFilterConfig };