@tekus/design-system 5.29.2 → 5.31.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-stepper.d.ts

@@ -0,0 +1,117 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Interface representing a button action in the stepper step's footer.
+ */
+interface StepAction {
+    /** Text label displayed on the button */
+    label: string;
+    /** Action handler invoked when the button is clicked */
+    action: () => void;
+    /**
+     * Status of whether the action is disabled.
+     * Can be a static boolean or a callback function (useful to bind to form validity).
+     */
+    disabled?: boolean | (() => boolean);
+    /** Styled color severity for the button matching tk-button inputs */
+    severity?: 'primary' | 'secondary' | 'danger';
+    /** Button visual style variant matching tk-button inputs */
+    variant?: 'text' | 'outlined';
+    /** Optional icon to display on the button */
+    icon?: string;
+}
+/**
+ * Interface representing data for each step configuration.
+ */
+interface StepData {
+    /** Optional identifier for the step */
+    id?: string;
+    /** Header label for the step */
+    label: string;
+    /** Whether the step header is disabled */
+    disabled?: boolean;
+    /** Whether the step has been completed successfully */
+    completed?: boolean;
+    /** The TemplateRef containing the step content form or markup */
+    content: TemplateRef<unknown>;
+    /** Optional list of primary actions (displayed right/bottom) */
+    actionsPrimary?: StepAction[];
+    /** Optional list of secondary actions (displayed left/bottom) */
+    actionsSecondary?: StepAction[];
+}
+
+/**
+ * @component StepperComponent
+ * @description
+ * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.
+ * Supports horizontal and vertical orientations, linear step completion rules,
+ * and automated footer action buttons.
+ *
+ * @usage
+ * ```html
+ * <tk-stepper
+ *   [steps]="steps"
+ *   [(activeStep)]="currentStep"
+ *   [linear]="true"
+ *   orientation="horizontal">
+ * </tk-stepper>
+ * ```
+ */
+declare class StepperComponent {
+    /**
+     * @property {InputSignal<StepData[]>} steps
+     * @description Array of step configurations to display.
+     */
+    steps: _angular_core.InputSignal<StepData[]>;
+    /**
+     * @property {ModelSignal<number>} activeStep
+     * @description The 0-based index of the currently active step. Supports two-way binding.
+     * @default 0
+     */
+    activeStep: _angular_core.ModelSignal<number>;
+    /**
+     * @property {InputSignal<boolean>} linear
+     * @description If true, blocks navigation to steps ahead of the active step.
+     * @default true
+     */
+    linear: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {InputSignal<'horizontal' | 'vertical'>} orientation
+     * @description Defines the layout orientation of the stepper.
+     * @default 'horizontal'
+     */
+    orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /**
+     * @property {InputSignal<boolean>} showFooter
+     * @description Whether to render the default footer action buttons for each step.
+     * @default true
+     */
+    showFooter: _angular_core.InputSignal<boolean>;
+    /**
+     * @event stepChange
+     * @description Emitted when the active step changes.
+     */
+    stepChange: _angular_core.OutputEmitterRef<{
+        index: number;
+        step: StepData;
+    }>;
+    /**
+     * Checks if a step header should be disabled.
+     * Steps ahead of the active index are disabled in linear mode.
+     */
+    isStepDisabled(index: number): boolean;
+    /**
+     * Helper to evaluate button disabled states dynamically.
+     */
+    evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean;
+    /**
+     * Handles step transition events.
+     */
+    onStepChange(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "tk-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "activeStep": { "alias": "activeStep"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; }, { "activeStep": "activeStepChange"; "stepChange": "stepChange"; }, never, never, true, never>;
+}
+
+export { StepperComponent };
+export type { StepAction, StepData };

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

@@ -2,19 +2,29 @@ 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' | 'connection-status';
 interface TableColumn<T = unknown> {
     field?: string;
     header: string;
     sortable?: boolean;
+    filterable?: boolean;
     type?: TableColumnType;
     width?: string;
     tagSeverity?: (row: T) => TagSeverity;
+    connectionStatusSeverity?: (row: T) => 'success' | 'warn' | 'danger' | 'gray';
+    connectionStatusTooltipText?: (row: T) => string;
     actions?: Array<{
         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 +87,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 +123,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-components-time-ago.d.ts

@@ -0,0 +1,53 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+
+type TimeAgoSeverity = 'success' | 'warn' | 'danger' | 'gray';
+declare class TimeAgoComponent implements OnInit {
+    /**
+     * The date to calculate the relative time from.
+     * Can be a Date object, an ISO string, a timestamp number,
+     * or a custom string format like 'dd/MM/yyyy HH:mm:ss' / 'dd/MM/yyyy HH:mm'.
+     */
+    dateTime: _angular_core.InputSignal<string | number | Date | null | undefined>;
+    /**
+     * The severity of the state, determining its dot and label colors.
+     * Options: 'success' | 'warn' | 'danger' | 'gray'
+     * @default 'success'
+     */
+    severity: _angular_core.InputSignal<TimeAgoSeverity>;
+    /**
+     * Custom tooltip text to display instead of the formatted date.
+     */
+    tooltipText: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * Format pattern for the fallback tooltip date representation.
+     * @default 'dd/MM/yyyy h:mm a'
+     */
+    tooltipFormat: _angular_core.InputSignal<string>;
+    private readonly destroyRef;
+    private readonly localeId;
+    private readonly datePipe;
+    private readonly nowSignal;
+    readonly parsedDate: _angular_core.Signal<Date | null>;
+    readonly relativeTime: _angular_core.Signal<string>;
+    readonly tooltipContent: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    /**
+     * Checks if a date object represents a valid timestamp.
+     */
+    private isValidDate;
+    /**
+     * Parses legacy custom format 'DD/MM/YYYY HH:mm:ss' or 'DD/MM/YYYY HH:mm'.
+     */
+    private parseCustomFormat;
+    /**
+     * Robust date parser supporting Date, timestamp number, ISO strings,
+     * and custom DD/MM/YYYY formatting commonly used in the platform.
+     */
+    private parseDate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimeAgoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeAgoComponent, "tk-time-ago", never, { "dateTime": { "alias": "dateTime"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "tooltipFormat": { "alias": "tooltipFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { TimeAgoComponent };
+export type { TimeAgoSeverity };