@tekus/design-system 5.29.0 → 5.30.0

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

@@ -1,13 +1,105 @@
 import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
+import { MultiSelect } from 'primeng/multiselect';
+import { Observable } from 'rxjs';
 
 interface MultiSelectOption {
     name: string;
     code: string;
 }
 
-declare class MultiselectComponent implements ControlValueAccessor {
+/**
+ * Standard request object for fetching data from an asynchronous source.
+ * Aligned with PrimeNG LazyLoadEvent patterns.
+ */
+interface TkMultiSelectRequest {
+    filter: string;
+    page: number;
+    pageSize: number;
+    sortField?: string;
+    sortOrder?: number;
+    params?: Record<string, unknown>;
+}
+/**
+ * Interface representing the data source for the Multiselect manager.
+ */
+interface MultiSelectDataSource<T = MultiSelectOption> {
+    fetch(request: TkMultiSelectRequest): Observable<T[]>;
+}
+declare class TkMultiSelectManager<T = MultiSelectOption> {
+    /**
+     * Reactive signal for the current search query.
+     */
+    searchQuery: _angular_core.WritableSignal<string>;
+    /**
+     * Reactive signal for the current pagination page.
+     */
+    page: _angular_core.WritableSignal<number>;
+    /**
+     * Data source provider for fetching items.
+     */
+    dataSource: MultiSelectDataSource<T> | undefined;
+    /**
+     * Additional parameters to send to the data source.
+     */
+    fetchParams: _angular_core.WritableSignal<Record<string, unknown>>;
+    /**
+     * Sorting field.
+     */
+    sortField: _angular_core.WritableSignal<string | undefined>;
+    /**
+     * Sorting order (1 for ASC, -1 for DESC).
+     */
+    sortOrder: _angular_core.WritableSignal<number | undefined>;
+    /**
+     * Reactive signal indicating if data is currently being fetched.
+     */
+    loading: _angular_core.WritableSignal<boolean>;
+    /**
+     * Reactive signal indicating if there are more items to fetch.
+     */
+    hasMore: _angular_core.WritableSignal<boolean>;
+    /**
+     * Number of items per page to detect the end of data.
+     */
+    pageSize: number;
+    /**
+     * Final accumulated list of items exposed as a Signal.
+     */
+    items: _angular_core.Signal<T[]>;
+    /**
+     * Updates the search query and resets pagination.
+     * @param query - The new search string.
+     */
+    updateSearch(query: string): void;
+    /**
+     * Increments the page to trigger the next data chunk.
+     */
+    loadNextPage(): void;
+    /**
+     * Configures the data provider for the manager.
+     * @param provider - Object implementing the MultiSelectDataSource interface.
+     */
+    setDataSource(provider: MultiSelectDataSource<T>): void;
+    /**
+     * Updates additional fetch parameters and resets pagination.
+     * @param params - The new parameters object.
+     */
+    updateParams(params: Record<string, unknown>): void;
+    /**
+     * Resets the manager state to its initial values.
+     */
+    reset(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TkMultiSelectManager<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TkMultiSelectManager<any>>;
+}
+
+declare class MultiselectComponent implements ControlValueAccessor, OnDestroy {
     readonly ngControl: NgControl | null;
+    readonly manager: TkMultiSelectManager<any>;
+    /** PrimeNG MultiSelect instance */
+    readonly multiselectComponent: _angular_core.Signal<MultiSelect | undefined>;
     constructor();
     /**
      * @property {Signal<MultiSelectOption[]>} selectionPool
@@ -21,6 +113,10 @@ declare class MultiselectComponent implements ControlValueAccessor {
      * The model signal for two-way binding.
      */
     readonly model: _angular_core.ModelSignal<MultiSelectOption[] | null>;
+    /**
+     * Data source for asynchronous infinite scroll mode.
+     */
+    readonly dataSource: _angular_core.ModelSignal<MultiSelectDataSource<MultiSelectOption> | undefined>;
     /**
      * @property {MultiSelectOption[]} options
      * @description
@@ -96,17 +192,47 @@ declare class MultiselectComponent implements ControlValueAccessor {
      */
     styleClass: _angular_core.InputSignal<string>;
     /**
-   * @property {InputSignal<string>} errorMessage
-   * @description
-   * Message to display when the control is invalid and touched.
-   */
+     * @property {InputSignal<string>} errorMessage
+     * @description
+     * Message to display when the control is invalid and touched.
+     */
     errorMessage: _angular_core.InputSignal<string>;
     /**
-   * @property {InputSignal<string>} hint
-   * @description
-   * Hint text to display below the input.
-   */
+     * @property {InputSignal<string>} hint
+     * @description
+     * Hint text to display below the input.
+     */
     hint: _angular_core.InputSignal<string>;
+    /**
+     * Loading state for the dropdown.
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Text to display when there are no options.
+     */
+    emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * Additional parameters for the async data source.
+     * Useful for sending context like categoryId, parentId, etc.
+     */
+    fetchParams: _angular_core.InputSignal<Record<string, unknown>>;
+    /**
+     * Field name to sort by in the async data source.
+     */
+    sortField: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Order to sort by (1 for ASC, -1 for DESC).
+     */
+    sortOrder: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Determines whether the select field is disabled.
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Internal writable signal for the disabled state.
+     */
+    readonly internalDisabled: _angular_core.WritableSignal<boolean>;
     /**
      * @event selectionChange
      * @description
@@ -123,6 +249,8 @@ declare class MultiselectComponent implements ControlValueAccessor {
      * Emits the filter text when the user types in the search input.
      */
     readonly filterChange: _angular_core.OutputEmitterRef<string>;
+    private readonly scrollHandler;
+    private lastListContainer;
     /**
      * @property internalOptions
      * @description
@@ -199,6 +327,31 @@ declare class MultiselectComponent implements ControlValueAccessor {
      * @param fn - The callback function.
      */
     registerOnTouched(fn: () => void): void;
+    /**
+     * Updates the disabled state of the control.
+     * @param isDisabled - Whether the component should be disabled.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Adds a scroll listener to the PrimeNG multiselect list container when the panel opens.
+     */
+    onPanelShow(): void;
+    /**
+     * Cleans up state, removes listeners and resets the manager when the panel closes.
+     */
+    onPanelHide(): void;
+    /**
+     * Cleans up listeners on component destruction.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Safely removes the scroll event listener.
+     */
+    private removeScrollListener;
+    /**
+     * Detects if the user has reached the bottom of the list.
+     */
+    private handleScroll;
     /**
      * @method effectiveControl
      * @description
@@ -207,8 +360,8 @@ declare class MultiselectComponent implements ControlValueAccessor {
      */
     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; }; "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>;
+    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>;
 }
 
-export { MultiselectComponent };
-export type { MultiSelectOption };
+export { MultiselectComponent, TkMultiSelectManager };
+export type { MultiSelectDataSource, MultiSelectOption, TkMultiSelectRequest };

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

@@ -2,12 +2,14 @@ import * as _angular_core from '@angular/core';
 import { Table } from 'primeng/table';
 import { TagSeverity } from '@tekus/design-system/components/tag';
 import { SortEvent } from 'primeng/api';
+import { TkAction } from '@tekus/design-system/components/action-group';
 
-type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox';
+type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox' | 'action-group';
 interface TableColumn<T = unknown> {
     field?: string;
     header: string;
     sortable?: boolean;
+    filterable?: boolean;
     type?: TableColumnType;
     width?: string;
     tagSeverity?: (row: T) => TagSeverity;
@@ -15,6 +17,12 @@ interface TableColumn<T = unknown> {
         icon: string;
         action?: (row: T) => void;
     }>;
+    actionGroup?: Array<{
+        icon: string;
+        label: string;
+        action: (row: T) => void;
+    }>;
+    actionGroupMaxVisible?: number;
 }
 
 declare class TableComponent<T = unknown> {
@@ -77,6 +85,15 @@ declare class TableComponent<T = unknown> {
     readonly initialData: _angular_core.WritableSignal<T[]>;
     readonly internalData: _angular_core.WritableSignal<T[]>;
     readonly isSorted: _angular_core.WritableSignal<boolean | null>;
+    /** 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>>;
+    /** Position of the filter overlay (fixed, relative to viewport) */
+    readonly filterOverlayPosition: _angular_core.WritableSignal<{
+        top: number;
+        left: number;
+    }>;
     /**
      * @computed isAllSelected
      * @description
@@ -104,8 +121,76 @@ declare class TableComponent<T = unknown> {
      * @param value {any[]}
      */
     updateSelection(value: T[]): void;
+    private readonly actionGroupCache;
+    getActionGroup(actions: NonNullable<TableColumn<T>['actionGroup']>, row: T): TkAction[];
     customSort(event: SortEvent): void;
     sortTableData(event: SortEvent): void;
+    /**
+     * @method toggleFilterOverlay
+     * @description
+     * Opens or closes the filter overlay for a given column.
+     * Captures the trigger button position to render the overlay in fixed position.
+     */
+    toggleFilterOverlay(field: string, event: MouseEvent): void;
+    /**
+     * @method closeFilterOverlay
+     * @description
+     * Closes the filter overlay.
+     */
+    closeFilterOverlay(): void;
+    /**
+     * @method getUniqueColumnValues
+     * @description
+     * Returns the unique values for a given column, considering active filters
+     * on other columns. This ensures the list only shows values that exist
+     * in the currently filtered dataset.
+     */
+    getUniqueColumnValues(field: string): string[];
+    /**
+     * @method selectFilterValue
+     * @description
+     * Selects a value from the filter list and applies the filter.
+     */
+    selectFilterValue(field: string, value: string): void;
+    /**
+     * @method clearFilter
+     * @description
+     * Clears the filter for a specific column and re-applies remaining filters.
+     */
+    clearFilter(field: string): void;
+    /**
+     * @method isColumnFiltered
+     * @description
+     * Returns whether a column currently has an active filter.
+     */
+    isColumnFiltered(field: string): boolean;
+    /**
+     * @method getActiveFilterValue
+     * @description
+     * Returns the currently selected filter value for a column, or null.
+     */
+    getActiveFilterValue(field: string): string | null;
+    /**
+     * @method applyAllFilters
+     * @description
+     * Applies all active column filters to the initial data set.
+     */
+    private applyAllFilters;
+    /**
+     * @method getFilteredData
+     * @description
+     * Returns the initial data filtered by all active column filters.
+     * Used by both applyAllFilters and customSort (reset) to ensure
+     * sorting never discards active filters.
+     */
+    private getFilteredData;
+    /**
+     * @method cellToString
+     * @description
+     * Safely converts a cell value to its string representation.
+     * Handles primitives directly and avoids [object Object] for complex types.
+     */
+    private cellToString;
     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>;
 }

package/types/tekus-design-system-core-types.d.ts

@@ -2,7 +2,7 @@ import { ValidatorFn } from '@angular/forms';
 import * as _angular_core from '@angular/core';
 import { ComponentRef } from '@angular/core';
 import { Preset } from '@primeuix/themes/types';
-import { PartialObserver, Subscription, Subject } from 'rxjs';
+import { Observable, PartialObserver, Subscription, Subject } from 'rxjs';
 
 interface Option {
     ViewValue: string;
@@ -167,7 +167,7 @@ interface TkCanClose {
      * Function or Signal indicating if the component can be closed.
      * When returning false, the overlay will prevent closure.
      */
-    canClose?: () => boolean;
+    canClose?: () => boolean | Promise<boolean> | Observable<boolean>;
     /**
      * Optional hook called when a user attempt to close the overlay is blocked
      * by the canClose() returning false.
@@ -176,9 +176,8 @@ interface TkCanClose {
 }
 /**
  * Type definition for the overlay closing interceptor.
- * It must be a synchronous function returning the "allowed" state.
  */
-type TkCloseInterceptor = () => boolean;
+type TkCloseInterceptor = () => boolean | Promise<boolean> | Observable<boolean>;
 
 /**
  * Reference to a dialog/drawer opened via a service.

package/types/tekus-design-system-core.d.ts

@@ -2,7 +2,7 @@ import { ValidatorFn } from '@angular/forms';
 import * as _angular_core from '@angular/core';
 import { ComponentRef } from '@angular/core';
 import { Preset } from '@primeuix/themes/types';
-import { PartialObserver, Subscription, Subject } from 'rxjs';
+import { Observable, PartialObserver, Subscription, Subject } from 'rxjs';
 
 interface Option {
     ViewValue: string;
@@ -167,7 +167,7 @@ interface TkCanClose {
      * Function or Signal indicating if the component can be closed.
      * When returning false, the overlay will prevent closure.
      */
-    canClose?: () => boolean;
+    canClose?: () => boolean | Promise<boolean> | Observable<boolean>;
     /**
      * Optional hook called when a user attempt to close the overlay is blocked
      * by the canClose() returning false.
@@ -176,9 +176,8 @@ interface TkCanClose {
 }
 /**
  * Type definition for the overlay closing interceptor.
- * It must be a synchronous function returning the "allowed" state.
  */
-type TkCloseInterceptor = () => boolean;
+type TkCloseInterceptor = () => boolean | Promise<boolean> | Observable<boolean>;
 
 /**
  * Reference to a dialog/drawer opened via a service.