@tekus/design-system 5.36.0 → 5.38.1

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

@@ -185,10 +185,6 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDe
      * Text to display when no results match the filter.
      */
     emptyFilterMessage: _angular_core.InputSignal<string>;
-    /**
-     * Emits whenever the value changes.
-     */
-    modelChange: _angular_core.OutputEmitterRef<T | null>;
     /**
      * Emits the filter search term.
      */
@@ -205,7 +201,7 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDe
      * Includes a "Ghost Option" logic to ensure the selected item is always visible
      * even if it's not in the current loaded chunk of data.
      */
-    get items(): T[];
+    readonly items: _angular_core.Signal<T[]>;
     /**
      * Receives value updates from Angular Forms API.
      * @param value - New value from the forms API.
@@ -265,7 +261,7 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDe
      */
     private handleScroll;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tk-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "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; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; "model": "modelChange"; "modelChange": "modelChange"; "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tk-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "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; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; "model": "modelChange"; "filterChange": "filterChange"; }, never, never, true, never>;
 }
 
 declare class IntersectionDirective implements OnInit, OnDestroy {

package/types/tekus-design-system-components-time-picker.d.ts

@@ -95,6 +95,13 @@ declare class TimePickerComponent implements OnInit, ControlValueAccessor, Valid
      * @default null
      */
     errorMessage: _angular_core.InputSignal<string | null>;
+    /**
+     * @description
+     * Hint text rendered beneath the field when there is no error to show.
+     *
+     * @default null
+     */
+    hint: _angular_core.InputSignal<string | null>;
     /**
      * @description
      * Optional external `FormControl` to bind when not using the standard
@@ -197,7 +204,7 @@ declare class TimePickerComponent implements OnInit, ControlValueAccessor, Valid
      */
     private applyTimeCascading;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimePickerComponent, "tk-time-picker", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "editableInput": { "alias": "editableInput"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; }, { "modelValue": "modelValueChange"; "handleSelect": "handleSelect"; "handleClear": "handleClear"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimePickerComponent, "tk-time-picker", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "editableInput": { "alias": "editableInput"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; }, { "modelValue": "modelValueChange"; "handleSelect": "handleSelect"; "handleClear": "handleClear"; }, never, never, true, never>;
 }
 
 export { TimePickerComponent };

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

@@ -12,6 +12,7 @@ declare class ToggleComponent implements ControlValueAccessor, OnInit {
     inputId: _angular_core.InputSignal<string>;
     control: _angular_core.InputSignal<FormControl<any>>;
     errorMessage: _angular_core.InputSignal<string>;
+    hint: _angular_core.InputSignal<string>;
     disabled: _angular_core.ModelSignal<boolean>;
     get effectiveControl(): FormControl;
     onChange: (value: boolean) => void;
@@ -24,7 +25,7 @@ declare class ToggleComponent implements ControlValueAccessor, OnInit {
     onModelChange(value: boolean): void;
     onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "tk-toggle", never, { "model": { "alias": "model"; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "tk-toggle", never, { "model": { "alias": "model"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 export { ToggleComponent };

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

@@ -0,0 +1,62 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+interface TkTreeNode<T = unknown> {
+    id: string | number;
+    label: string;
+    icon?: string;
+    iconStyle?: 'light' | 'regular' | 'solid';
+    expanded?: boolean;
+    children?: TkTreeNode<T>[];
+    data?: T;
+}
+
+declare class TreeTableComponent {
+    /**
+     * Hierarchical list of tree nodes to render.
+     */
+    data: _angular_core.InputSignal<TkTreeNode<unknown>[]>;
+    /**
+     * Custom template slot to render the icon on the left of each node label.
+     * Usage: `<ng-template #iconTemplate let-node>...</ng-template>`
+     */
+    readonly iconTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /**
+     * Custom template slot to render center information/indicators.
+     * Usage: `<ng-template #centerTemplate let-node>...</ng-template>`
+     */
+    readonly centerTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /**
+     * Custom template slot to render additional actions/content on the right of the row.
+     * Usage: `<ng-template #rightTemplate let-node>...</ng-template>`
+     */
+    readonly rightTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /**
+     * Internal representation of the tree nodes mapped to PrimeNG's format.
+     */
+    readonly primeNodes: _angular_core.WritableSignal<TreeNode<any>[]>;
+    constructor();
+    private mapToPrimeNodes;
+    /**
+     * API Method: Recursively expands all nodes.
+     */
+    expandAll(): void;
+    /**
+     * API Method: Recursively collapses all nodes.
+     */
+    collapseAll(): void;
+    private toggleAllNodes;
+    /**
+     * Toggles the expansion state of a specific node.
+     */
+    toggleNode(rowNode: {
+        node: TreeNode;
+        level?: number;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeTableComponent, "tk-tree-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, ["iconTemplate", "centerTemplate", "rightTemplate"], never, true, never>;
+}
+
+export { TreeTableComponent };
+export type { TkTreeNode };

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

@@ -77,15 +77,15 @@ type ThemeLogo = 'dark' | 'light';
 type VariantLogo = 'minimal' | 'normal' | 'compound';
 
 declare enum GapGutter {
-    normal = "24px",
-    small = "16px",
-    large = "32px",
-    extraLarge = "40px"
+    normal = "var(--tk-spacing-gap-l, 1.5rem)",
+    small = "var(--tk-spacing-gap-m, 1rem)",
+    large = "var(--tk-spacing-base-200, 2rem)",
+    extraLarge = "var(--tk-spacing-gap-xl, 2.5rem)"
 }
 declare enum PaddingGridContainer {
-    large = "32px",
-    medium = "24px",
-    small = "16px"
+    large = "var(--tk-spacing-base-200, 2rem)",
+    medium = "var(--tk-spacing-padding-xl, 1.5rem)",
+    small = "var(--tk-spacing-padding-m, 1rem)"
 }
 declare enum Gutter {
     normal = "normal",

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

@@ -77,15 +77,15 @@ type ThemeLogo = 'dark' | 'light';
 type VariantLogo = 'minimal' | 'normal' | 'compound';
 
 declare enum GapGutter {
-    normal = "24px",
-    small = "16px",
-    large = "32px",
-    extraLarge = "40px"
+    normal = "var(--tk-spacing-gap-l, 1.5rem)",
+    small = "var(--tk-spacing-gap-m, 1rem)",
+    large = "var(--tk-spacing-base-200, 2rem)",
+    extraLarge = "var(--tk-spacing-gap-xl, 2.5rem)"
 }
 declare enum PaddingGridContainer {
-    large = "32px",
-    medium = "24px",
-    small = "16px"
+    large = "var(--tk-spacing-base-200, 2rem)",
+    medium = "var(--tk-spacing-padding-xl, 1.5rem)",
+    small = "var(--tk-spacing-padding-m, 1rem)"
 }
 declare enum Gutter {
     normal = "normal",

package/types/tekus-design-system-directives-gird-item.d.ts

@@ -7,7 +7,7 @@ import * as _angular_core from '@angular/core';
  *
  * Uses Angular CDK's `BreakpointObserver` to dynamically adjust the column's `span`
  * based on screen size, ensuring a responsive experience.
- * For best results use a [grid component as a parent container](?path=/docs/components-grids-grids-container--docs)
+ * For best results use a [grid component as a parent container](?path=/docs/components-gridcontainer--docs)
  * @selector [tkGridItem]
  */
 declare class GridItemDirective {