@tekus/design-system 5.18.0 → 5.20.0

package/components/multiselect/src/multiselect.component.d.ts

@@ -1,21 +1,27 @@
-import { EventEmitter } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
 import { MultiSelectOption } from './multiselect.types';
 import * as i0 from "@angular/core";
-export declare class MultiselectComponent {
+export declare class MultiselectComponent implements ControlValueAccessor {
+    readonly ngControl: NgControl | null;
+    constructor();
     /**
-     * @property {FormControl<MultiSelectOption[] | null>} control
+     * @property {Signal<MultiSelectOption[]>} selectionPool
      * @description
-     * External FormControl used to read/set the selected options.
-     * If not provided, an internal FormControl is created with an empty array value.
+     * Internal signal to keep track of selected items even if they are filtered out from the main options list.
      */
-    control: FormControl<MultiSelectOption[] | null>;
+    private readonly selectionPool;
+    /**
+     * @property {ModelSignal<MultiSelectOption[] | null>} model
+     * @description
+     * The model signal for two-way binding.
+     */
+    readonly model: import("@angular/core").ModelSignal<MultiSelectOption[] | null>;
     /**
      * @property {MultiSelectOption[]} options
      * @description
      * Array of available options shown in the multiselect dropdown.
      */
-    options: MultiSelectOption[];
+    options: import("@angular/core").InputSignal<MultiSelectOption[]>;
     /**
      * @property {string} labelText
      * @description
@@ -23,7 +29,7 @@ export declare class MultiselectComponent {
      *
      * @default 'Select'
      */
-    labelText: string;
+    labelText: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} display
      * @description
@@ -31,7 +37,7 @@ export declare class MultiselectComponent {
      *
      * @default 'chip'
      */
-    display: string;
+    display: import("@angular/core").InputSignal<string>;
     /**
      * @property {number} maxSelectedLabels
      * @description
@@ -39,7 +45,7 @@ export declare class MultiselectComponent {
      *
      * @default 4
      */
-    maxSelectedLabels: number;
+    maxSelectedLabels: import("@angular/core").InputSignal<number>;
     /**
      * @property {string} selectedItemsLabel
      * @description
@@ -47,7 +53,7 @@ export declare class MultiselectComponent {
      *
      * @default '{0} elementos seleccionados'
      */
-    selectedItemsLabel: string;
+    selectedItemsLabel: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} emptyFilterMessage
      * @description
@@ -55,7 +61,7 @@ export declare class MultiselectComponent {
      *
      * @default 'No hay resultados'
      */
-    emptyFilterMessage: string;
+    emptyFilterMessage: import("@angular/core").InputSignal<string>;
     /**
      * @property {boolean} filter
      * @description
@@ -63,13 +69,13 @@ export declare class MultiselectComponent {
      *
      * @default true
      */
-    filter: boolean;
+    filter: import("@angular/core").InputSignal<boolean>;
     /**
      * @property {string} filterPlaceHolder
      * @description
      * Placeholder text for the filter input.
      */
-    filterPlaceHolder: string;
+    filterPlaceHolder: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} id
      * @description
@@ -77,13 +83,25 @@ export declare class MultiselectComponent {
      *
      * @default 'multiselect'
      */
-    id: string;
+    id: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} styleClass
      * @description
      * Additional CSS class applied to the multiselect container.
      */
-    styleClass: string;
+    styleClass: import("@angular/core").InputSignal<string>;
+    /**
+   * @property {InputSignal<string>} errorMessage
+   * @description
+   * Message to display when the control is invalid and touched.
+   */
+    errorMessage: import("@angular/core").InputSignal<string>;
+    /**
+   * @property {InputSignal<string>} hint
+   * @description
+   * Hint text to display below the input.
+   */
+    hint: import("@angular/core").InputSignal<string>;
     /**
      * @event selectionChange
      * @description
@@ -93,7 +111,42 @@ export declare class MultiselectComponent {
      * @example
      * <tk-multiselect (selectionChange)="onChange($event)"></tk-multiselect>
      */
-    selectionChange: EventEmitter<MultiSelectOption[] | null>;
+    selectionChange: import("@angular/core").OutputEmitterRef<MultiSelectOption[] | null>;
+    /**
+     * @event filterChange
+     * @description
+     * Emits the filter text when the user types in the search input.
+     */
+    readonly filterChange: import("@angular/core").OutputEmitterRef<string>;
+    /**
+     * @property internalOptions
+     * @description
+     * Computed signal that merges the current options with the selected items pool
+     * to ensure selected items are always visible.
+     */
+    readonly internalOptions: import("@angular/core").Signal<any[]>;
+    /**
+     * @method handleFilter
+     * @description
+     * Handles the filter event from the PrimeNG component and emits the filter value.
+     *
+     * @param event - The filter event object.
+     */
+    handleFilter(event: {
+        filter: string;
+    }): void;
+    /**
+     * @callback onChange
+     * @description
+     * Callback function to notify the parent component of value changes.
+     */
+    onChange: (value: MultiSelectOption[] | null) => void;
+    /**
+     * @callback onTouched
+     * @description
+     * Callback function to notify the parent component when the control is touched.
+     */
+    onTouched: () => void;
     /**
      * @method handleChange
      * @description
@@ -105,6 +158,49 @@ export declare class MultiselectComponent {
     handleChange(event: {
         value: MultiSelectOption[] | null;
     }): void;
+    /**
+     * @method updateSelectionPool
+     * @description
+     * Updates the internal selection pool to ensure selected items persist
+     * even if they are filtered out from the main options list.
+     *
+     * @param items - The items to add to the pool.
+     */
+    private updateSelectionPool;
+    /**
+     * @method writeValue
+     * @description
+     * Writes a new value to the element.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param value - The new value.
+     */
+    writeValue(value: MultiSelectOption[] | null): void;
+    /**
+     * @method registerOnChange
+     * @description
+     * Registers a callback function that is called when the control's value changes in the UI.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn: (value: MultiSelectOption[] | null) => void): void;
+    /**
+     * @method registerOnTouched
+     * @description
+     * Registers a callback function that is called by the forms API on initialization to update the form control on 'blur'.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * @method effectiveControl
+     * @description
+     * Gets the effective FormControl associated with this component,
+     * either from NgControl or the internal model.
+     */
+    get effectiveControl(): FormControl | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "control": { "alias": "control"; "required": false; }; "options": { "alias": "options"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "display": { "alias": "display"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "model": { "alias": "model"; "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; }; }, { "model": "modelChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; }, never, never, true, never>;
 }

package/components/panel/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/panel" />
+export * from './public-api';

package/components/panel/public-api.d.ts

@@ -0,0 +1 @@
+export * from './src/panel.component';

package/components/panel/src/panel.component.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @component PanelComponent
+ * @description
+ * Panel is a container component with an optional content toggle feature.
+ * It wraps PrimeNG's Panel component and provides a consistent design across the application.
+ *
+ * The panel can be toggled between expanded and collapsed states using the chevron icon
+ * in the header. The component uses custom tk-icon for the toggle icons.
+ *
+ * @usage
+ * ```html
+ * <tk-panel
+ *   header="Panel Title"
+ *   [toggleable]="true"
+ *   [collapsed]="false">
+ *   <p>Panel content goes here</p>
+ * </tk-panel>
+ * ```
+ */
+export declare class PanelComponent {
+    /**
+     * @property {string} header
+     * @description
+     * Header text displayed at the top of the panel.
+     *
+     * @default undefined
+     */
+    header?: string;
+    /**
+     * @property {boolean} toggleable
+     * @description
+     * When enabled, the panel content can be expanded and collapsed.
+     *
+     * @default false
+     */
+    toggleable: boolean;
+    /**
+     * @property {boolean} collapsed
+     * @description
+     * Defines whether the panel is collapsed or expanded.
+     * Supports two-way binding.
+     *
+     * @default false
+     */
+    collapsed: boolean;
+    /**
+     * @event collapsedChange
+     * @description
+     * Emits when the collapsed state changes.
+     * Enables two-way binding with [(collapsed)].
+     */
+    collapsedChange: EventEmitter<boolean>;
+    /**
+     * @event toggled
+     * @description
+     * Callback to invoke when the panel is toggled.
+     * Emits an object with the collapsed state.
+     *
+     * @example
+     * ```html
+     * <tk-panel (toggled)="handleToggle($event)"></tk-panel>
+     * ```
+     */
+    toggled: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    /**
+     * @method handleToggle
+     * @description
+     * Handles the toggle event from the PrimeNG panel.
+     * Updates the collapsed state and emits the appropriate events.
+     *
+     * @param event - The toggle event from PrimeNG panel
+     */
+    handleToggle(event: {
+        collapsed: boolean | undefined;
+    }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "collapsedChange": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
+}

package/components/radio-button/src/radio-button.component.d.ts

@@ -3,6 +3,9 @@ import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class RadioButtonComponent implements ControlValueAccessor, OnInit, OnDestroy {
     readonly ngControl: NgControl | null;
+    /**
+     * Initialize the component and register it as a ControlValueAccessor.
+     */
     constructor();
     /**
      * @property {ModelSignal<any>} model
@@ -49,23 +52,50 @@ export declare class RadioButtonComponent implements ControlValueAccessor, OnIni
      */
     errorMessage: import("@angular/core").InputSignal<string>;
     /**
-     * @property {boolean} disabled
+     * @property {ModelSignal<boolean>} disabled
      * @description
      * Whether the radio button is disabled.
      */
-    disabled: import("@angular/core").WritableSignal<boolean>;
+    disabled: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * Returns the control currently in use, either from NgControl or the standalone Input.
+     */
     get effectiveControl(): FormControl;
     onChange: (value: unknown) => void;
     onTouched: () => void;
     private readonly subscription;
+    /**
+     * Configure synchronization between the form control and component state.
+     */
     ngOnInit(): void;
+    /**
+     * Clean up subscriptions.
+     */
     ngOnDestroy(): void;
+    /**
+     * Implementation of ControlValueAccessor: Writes a new value from the form.
+     */
     writeValue(value: unknown): void;
+    /**
+     * Implementation of ControlValueAccessor: Registers a callback for change events.
+     */
     registerOnChange(fn: (value: unknown) => void): void;
+    /**
+     * Implementation of ControlValueAccessor: Registers a callback for touched events.
+     */
     registerOnTouched(fn: () => void): void;
+    /**
+     * Implementation of ControlValueAccessor: Sets the disabled state.
+     */
     setDisabledState?(isDisabled: boolean): void;
+    /**
+     * Handle model change events from the template.
+     */
     onModelChange(value: unknown): void;
+    /**
+     * Handle blur events to trigger onTouched.
+     */
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "tk-radio-button", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "tk-radio-button", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }

package/components/table/src/table.component.d.ts

@@ -41,12 +41,56 @@ export declare class TableComponent<T = unknown> {
      * ]"
      */
     columns: import("@angular/core").InputSignal<TableColumn<T>[]>;
+    /**
+     * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
+     * @description
+     * Selection mode of the table.
+     */
+    selectionMode: import("@angular/core").InputSignal<"single" | "multiple" | undefined>;
+    /**
+     * @property {ModelSignal<any[]>} selection
+     * @description
+     * Selected row(s) in the table.
+     */
+    selection: import("@angular/core").ModelSignal<T[]>;
+    /**
+     * @property {InputSignal<string | undefined>} dataKey
+     * @description
+     * Property name to uniquely identify a row.
+     */
+    dataKey: import("@angular/core").InputSignal<string | undefined>;
     initialData: T[];
     internalData: T[];
     isSorted: boolean | null;
+    /**
+     * @computed isAllSelected
+     * @description
+     * Returns true if all visible rows are selected.
+     */
+    isAllSelected: import("@angular/core").Signal<boolean>;
+    /**
+     * @computed isPartiallySelected
+     * @description
+     * Returns true if some but not all rows are selected.
+     */
+    isPartiallySelected: import("@angular/core").Signal<boolean>;
     constructor();
+    /**
+     * @method toggleAll
+     * @description
+     * Toggles selection of all visible rows using full objects.
+     * @param checked {unknown}
+     */
+    toggleAll(checked: unknown): void;
+    /**
+     * @method updateSelection
+     * @description
+     * Updates row selection state from checkbox interaction.
+     * @param value {any[]}
+     */
+    updateSelection(value: T[]): void;
     customSort(event: SortEvent): void;
     sortTableData(event: SortEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/components/table/src/table.interface.d.ts

@@ -1,5 +1,5 @@
 import { TagSeverity } from '@tekus/design-system/components/tag';
-export type TableColumnType = 'text' | 'tag' | 'actions';
+export type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox';
 export interface TableColumn<T = unknown> {
     field?: string;
     header: string;

package/components/toolbar/src/toolbar.component.d.ts

@@ -74,6 +74,54 @@ export declare class ToolbarComponent {
      * @default 'Buscar'
      */
     searchFloatLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<boolean>} searchVisible
+     * @description
+     * Controls the visibility of the search button.
+     * @default true
+     */
+    searchVisible: import("@angular/core").InputSignal<boolean>;
+    /**
+     * @property {InputSignal<boolean>} filterVisible
+     * @description
+     * Controls the visibility of the filter button.
+     * @default true
+     */
+    filterVisible: import("@angular/core").InputSignal<boolean>;
+    /**
+     * @property {InputSignal<boolean>} reloadVisible
+     * @description
+     * Controls the visibility of the reload button.
+     * @default false
+     */
+    reloadVisible: import("@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: import("@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: import("@angular/core").InputSignal<boolean>;
+    /**
+     * @property {OutputEmitter<void>} reload
+     * @description
+     * Emits an event when the reload button is clicked or the automatic interval is reached.
+     */
+    reload: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * @method constructor
+     * @description
+     * Initializes the automatic reload logic using a declarative RxJS approach.
+     */
+    constructor();
     /**
      * @method toggleSearchInput
      * @description
@@ -94,6 +142,12 @@ export declare class ToolbarComponent {
      * @param value - Selected option value from tk-select
      */
     onSelectedOption(value: Record<string, string> | null): void;
+    /**
+     * @method onReload
+     * @description
+     * Emits the reload event.
+     */
+    onReload(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵ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; }; }, { "searchModel": "searchModelChange"; "filterModel": "filterModelChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵ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>;
 }

package/core/types/public-api.d.ts

@@ -7,3 +7,4 @@ export * from './src/grids';
 export * from './src/breakpoints';
 export * from './src/theme/theme.provider';
 export * from './src/theme/tk-preset';
+export * from './src/interception';

package/core/types/src/interception/index.d.ts

@@ -0,0 +1 @@
+export * from './interception.types';

package/core/types/src/interception/interception.types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Interface that can be optionally implemented by components loaded into overlays
+ * (Modals, Drawers, etc.) to intercept the closing process.
+ */
+export interface TkCanClose {
+    /**
+     * Function or Signal indicating if the component can be closed.
+     * When returning false, the overlay will prevent closure.
+     */
+    canClose?: () => boolean;
+    /**
+     * Optional hook called when a user attempt to close the overlay is blocked
+     * by the canClose() returning false.
+     */
+    onBlockedClose?(): void;
+}
+/**
+ * Type definition for the overlay closing interceptor.
+ * It must be a synchronous function returning the "allowed" state.
+ */
+export type TkCloseInterceptor = () => boolean;