@tekus/design-system 5.28.0 → 5.29.2

package/fesm2022/tekus-design-system-components-topbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-topbar.mjs","sources":["../../../projects/design-system/components/topbar/src/topbar.component.ts","../../../projects/design-system/components/topbar/src/topbar.component.html","../../../projects/design-system/components/topbar/tekus-design-system-components-topbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { BreadCrumpsComponent, BreadCrumpItem } from '@tekus/design-system/components/bread-crumps';\nimport { TopbarAction, TopbarTag } from './topbar.types';\n\n/**\n * @component TopbarComponent\n * @description\n * Layout component that renders a title with optional actions and metadata.\n * It composes `tk-button` and `tk-tag` and uses only design tokens for styles.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-topbar',\n  imports: [ButtonComponent, TagComponent, BreadCrumpsComponent],\n  templateUrl: './topbar.component.html',\n  styleUrl: './topbar.component.scss',\n})\nexport class TopbarComponent {\n  /** Main title text for the topbar. */\n  title = input.required<string>();\n\n  /** Optional list of actions displayed in the header. */\n  actions = input<TopbarAction[] | null>(null);\n  \n  /** Whether to show breadcrumbs instead of a simple title. */\n  showBreadcrumbs = input<boolean>(false);\n\n  /** Manual breadcrumb items. If not provided and showBreadcrumbs is true, it uses automatic routing. */\n  breadcrumbItems = input<BreadCrumpItem[] | null>(null);\n\n  /** Size of the breadcrumbs. Can be 'small' or 'large'. Default is 'large' for topbar. */\n  breadcrumbSize = input<'small' | 'large'>('large');\n\n  /** Optional list of tags displayed in the meta section. */\n  tags = input<TopbarTag[] | null>(null);\n\n  /** Optional description displayed in the meta section. */\n  description = input<string | null>(null);\n}\n","<div class=\"tk-topbar\">\n  <div class=\"tk-topbar__header\">\n    @if (showBreadcrumbs()) {\n      <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n    } @else {\n      <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n    }\n\n    @if (actions()?.length) {\n    <div class=\"tk-topbar__actions\">\n      @for (action of actions(); track $index) {\n        @if (action.type === 'primary') {\n        <tk-button\n          [label]=\"action.label\"\n          severity=\"primary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        } @else {\n        <tk-button\n          [icon]=\"action.icon\"\n          severity=\"secondary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        }\n      }\n    </div>\n    }\n  </div>\n\n  @if (tags()?.length || description()) {\n  <div class=\"tk-topbar__meta\">\n    @if (tags()?.length) {\n    <div class=\"tk-topbar__tags\">\n      @for (tag of tags(); track $index) {\n      <tk-tag\n        [value]=\"tag.label\"\n        [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n      }\n    </div>\n    }\n    @if (description()) {\n    <p class=\"tk-topbar__description\">{{ description() }}</p>\n    }\n  </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAMA;;;;;AAKG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,IAAI,8EAAC;;AAG5C,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAU,KAAK,sFAAC;;AAGvC,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAA0B,IAAI,sFAAC;;AAGtD,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAoB,OAAO,qFAAC;;AAGlD,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;;AAGtC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACzC,IAAA;8GArBY,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,ogCCnB5B,+0CAgDA,EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjCY,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,qGAAE,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIlD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,EAAA,OAAA,EACZ,CAAC,eAAe,EAAE,YAAY,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,+0CAAA,EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA;;;AEfhE;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-topbar.mjs","sources":["../../../projects/design-system/components/topbar/src/topbar.component.ts","../../../projects/design-system/components/topbar/src/topbar.component.html","../../../projects/design-system/components/topbar/tekus-design-system-components-topbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { BreadCrumpsComponent, BreadCrumpItem } from '@tekus/design-system/components/bread-crumps';\nimport { TopbarAction, TopbarTag } from './topbar.types';\n\n/**\n * @component TopbarComponent\n * @description\n * Layout component that renders a title with optional actions and metadata.\n * It composes `tk-button` and `tk-tag` and uses only design tokens for styles.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-topbar',\n  imports: [ButtonComponent, TagComponent, BreadCrumpsComponent],\n  templateUrl: './topbar.component.html',\n  styleUrl: './topbar.component.scss',\n})\nexport class TopbarComponent {\n  /** Main title text for the topbar. */\n  title = input.required<string>();\n\n  /** Optional list of actions displayed in the header. */\n  actions = input<TopbarAction[] | null>(null);\n  \n  /** Whether to show breadcrumbs instead of a simple title. */\n  showBreadcrumbs = input<boolean>(false);\n\n  /** Manual breadcrumb items. If not provided and showBreadcrumbs is true, it uses automatic routing. */\n  breadcrumbItems = input<BreadCrumpItem[] | null>(null);\n\n  /** Size of the breadcrumbs. Can be 'small' or 'large'. Default is 'large' for topbar. */\n  breadcrumbSize = input<'small' | 'large'>('large');\n\n  /** Optional list of tags displayed in the meta section. */\n  tags = input<TopbarTag[] | null>(null);\n\n  /** Optional description displayed in the meta section. */\n  description = input<string | null>(null);\n}\n","<div class=\"tk-topbar\">\n  <div class=\"tk-topbar__header\">\n    @if (showBreadcrumbs()) {\n      <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n    } @else {\n      <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n    }\n\n    @if (actions()?.length) {\n    <div class=\"tk-topbar__actions\">\n      @for (action of actions(); track $index) {\n        @if (action.type === 'primary') {\n        <tk-button\n          [label]=\"action.label\"\n          severity=\"primary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        } @else {\n        <tk-button\n          [icon]=\"action.icon\"\n          severity=\"secondary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        }\n      }\n    </div>\n    }\n  </div>\n\n  @if (tags()?.length || description()) {\n  <div class=\"tk-topbar__meta\">\n    @if (tags()?.length) {\n    <div class=\"tk-topbar__tags\">\n      @for (tag of tags(); track $index) {\n      <tk-tag\n        [value]=\"tag.label\"\n        [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n      }\n    </div>\n    }\n    @if (description()) {\n    <p class=\"tk-topbar__description\">{{ description() }}</p>\n    }\n  </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAMA;;;;;AAKG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,IAAI,8EAAC;;AAG5C,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAU,KAAK,sFAAC;;AAGvC,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAA0B,IAAI,sFAAC;;AAGtD,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAoB,OAAO,qFAAC;;AAGlD,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;;AAGtC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACzC,IAAA;8GArBY,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,ogCCnB5B,+0CAgDA,EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjCY,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,qGAAE,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIlD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,EAAA,OAAA,EACZ,CAAC,eAAe,EAAE,YAAY,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,+0CAAA,EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA;;;AEfhE;;AAEG;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.28.0",
+  "version": "5.29.2",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^21.0.0",

package/types/tekus-design-system-components-bread-crumps.d.ts

@@ -9,7 +9,7 @@ declare class BreadCrumpsComponent {
     private readonly router;
     /** Optional manual items. If provided, route listening is ignored. */
     items: _angular_core.InputSignal<BreadCrumpItem[] | null>;
-    /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'small'. */
+    /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'large'. */
     size: _angular_core.InputSignal<"small" | "large">;
     /** If true, only the current (last) item will be displayed. */
     onlyCurrent: _angular_core.InputSignal<boolean>;

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

@@ -95,6 +95,14 @@ declare class ButtonComponent {
      * @default `undefined`
      */
     icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {'left' | 'right'} iconPosition
+     * @description
+     * Defines the position of the icon relative to the label.
+     *
+     * @default `'left'`
+     */
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
     /**
      * @event clicked
      * @description
@@ -134,7 +142,7 @@ declare class ButtonComponent {
      */
     onButtonClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "tk-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "tk-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 export { ButtonComponent };

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

@@ -14,7 +14,10 @@ interface DrawerHeaderAction {
 }
 interface DrawerConfig<T = unknown> {
     title: string;
+    tag?: string;
+    subtle?: string;
     content?: string | Type<T>;
+    hasTabs?: boolean;
     headerAction?: DrawerHeaderAction;
     size?: DrawerSizeType;
     closable?: boolean;
@@ -70,6 +73,12 @@ declare class DrawerComponent<T = unknown> implements OnDestroy {
     content: _angular_core.InputSignal<string | Type<T> | null>;
     /** Optional header action button (displayed before close button) */
     headerAction: _angular_core.InputSignal<DrawerHeaderAction | null>;
+    /** Optional tag displayed below the title */
+    tag: _angular_core.InputSignal<string | null>;
+    /** Optional subtle text displayed next to the tag */
+    subtle: _angular_core.InputSignal<string | null>;
+    /** Whether the content includes tabs (affects scroll behavior) */
+    hasTabs: _angular_core.InputSignal<boolean>;
     /** Drawer size: 'small' (500px), 'large' (1024px) */
     size: _angular_core.InputSignal<DrawerSizeType>;
     /** Whether the drawer can be closed by the user via close button */
@@ -128,7 +137,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; }; "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; }; "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>;
 }
 
 declare class DrawerService {

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

@@ -29,6 +29,16 @@ declare class DropdownComponent {
      * @default 'ellipsis-vertical'
      */
     icon: _angular_core.InputSignal<string>;
+    /**
+     * Text for the trigger button.
+     * If provided, it will be displayed alongside the icon (if any).
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Position of the icon relative to the label.
+     * @default 'left'
+     */
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
     /**
      * Size of the trigger button.
      * @default undefined
@@ -53,7 +63,7 @@ declare class DropdownComponent {
      */
     onItemClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tk-dropdown", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tk-dropdown", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { DropdownComponent };

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

@@ -6,7 +6,7 @@ import { TkCloseInterceptor, TkDialogRef } from '@tekus/design-system/core/types
 type ModalSizeType = 'small' | 'large' | 'medium' | 'full';
 type SeverityType = 'primary' | 'secondary' | 'danger';
 interface ModalFooterButton {
-    label: string;
+    label: string | (() => string);
     severity: SeverityType;
     /** Optional callback function executed when the button is clicked */
     action?: () => void;
@@ -14,6 +14,10 @@ interface ModalFooterButton {
     returnValue?: unknown;
     /** Optional button variant */
     variant?: Variant;
+    /** Optional disabled state (boolean or evaluation function) */
+    disabled?: boolean | (() => boolean);
+    /** Optional flag to prevent auto-closing of the modal when the button is clicked */
+    preventClose?: boolean;
 }
 interface ModalConfig<T = unknown> {
     /** The title displayed at the top of the modal */
@@ -58,7 +62,7 @@ declare class ModalComponent<T = unknown> implements OnDestroy {
     /** The main content of the modal. Can be a string or a Component Type. */
     content: _angular_core.InputSignal<string | Type<T> | null>;
     /** Array of footer buttons with label, callback, and return value */
-    footerButtons: _angular_core.InputSignal<ModalFooterButton[]>;
+    footerButtons: _angular_core.ModelSignal<ModalFooterButton[]>;
     /** Modal size: 'small', 'large', 'medium' or 'full' */
     size: _angular_core.InputSignal<ModalSizeType>;
     /** Whether the modal can be closed by the user via close button */
@@ -118,16 +122,18 @@ declare class ModalComponent<T = unknown> implements OnDestroy {
     open(): void;
     /**
      * @summary Main entry point for closure requests.
-     * Evaluation is 100% synchronous based on current Signal state.
+     * Supports synchronous and asynchronous (Promise/Observable) evaluations.
      * @param returnValue (Optional) Value to emit on close.
      */
     tryClose(returnValue?: unknown): void;
     /**
-     * @summary Synchronous evaluator of hierarchical guards.
-     * @returns true if closure is allowed.
-     * @private
+     * Evaluates a boolean, Promise or Observable to check if closing is allowed.
+     */
+    private evaluateCanClose;
+    /**
+     * Resolves a static or functional property of a button.
      */
-    private canExecuteClosure;
+    resolveProperty<R>(prop: R | (() => R) | undefined): R | undefined;
     /**
      * @summary Unified logic to execute the final closure state change.
      * @private
@@ -145,18 +151,19 @@ declare class ModalComponent<T = unknown> implements OnDestroy {
     /**
      * @summary Handles actions triggered by footer buttons.
      */
-    handleAction(action: (() => void) | undefined, returnValue: unknown): void;
+    handleAction(action: (() => void) | undefined, returnValue: unknown, preventClose?: boolean): void;
     /**
-     * @summary Safely closes the modal forcefully without checks.
+     * @summary Safely closes the modal, optionally passing a return value.
+     * @param returnValue Value to emit when closing.
      */
-    close(): void;
+    close(returnValue?: unknown): void;
     /**
      * @private
      * Encapsulates state cleanup to avoid repetitive assignments
      */
     private resetClosureState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent<any>, "tk-modal", never, { "dialogRef": { "alias": "dialogRef"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent<any>, "tk-modal", never, { "dialogRef": { "alias": "dialogRef"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "footerButtons": "footerButtonsChange"; "isOpened": "isOpenedChange"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**

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

@@ -1,155 +1,292 @@
 import * as _angular_core from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
+import { Select } from 'primeng/select';
+import { Observable } from 'rxjs';
 
-declare class SelectComponent<T = unknown> implements ControlValueAccessor {
+/**
+ * Standard request object for fetching data from an asynchronous source.
+ * Aligned with PrimeNG LazyLoadEvent patterns.
+ */
+interface TkSelectRequest {
+    filter: string;
+    page: number;
+    pageSize: number;
+    sortField?: string;
+    sortOrder?: number;
+    params?: Record<string, unknown>;
+}
+/**
+ * Interface representing the data source for the Select manager.
+ */
+interface SelectDataSource<T> {
+    fetch(request: TkSelectRequest): Observable<T[]>;
+}
+declare class TkSelectManager<T> {
+    /**
+     * 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: SelectDataSource<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 SelectDataSource interface.
+     */
+    setDataSource(provider: SelectDataSource<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<TkSelectManager<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TkSelectManager<any>>;
+}
+
+declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDestroy {
     readonly ngControl: NgControl | null;
+    readonly manager: TkSelectManager<any>;
+    /** PrimeNG Select instance */
+    readonly selectComponent: _angular_core.Signal<Select | undefined>;
+    /** Final reactive list of items */
     /**
-     * @property {string} id
-     * @description
-     * HTML id attribute for the multiselect input.
-     *
+     * HTML id attribute for the select input.
      * @default 'select'
      */
     id: _angular_core.InputSignal<string>;
     /**
-     * @property {InputSignal<FormControl>} control
-     * @description
      * External FormControl used to read/set the input value.
-     * If not provided, an internal FormControl is created.
      */
     control: _angular_core.InputSignal<FormControl<any> | undefined>;
     /**
-     * @property {T[]} options
-     * @description
-     * Array of available options displayed in the dropdown.
+     * Static options for synchronous mode.
+     * If provided, they take precedence over the manager's async stream.
      */
     options: _angular_core.InputSignal<T[]>;
     /**
-     * @property {string} optionLabel
-     * @description
+     * Data source for asynchronous infinite scroll mode.
+     */
+    dataSource: _angular_core.ModelSignal<SelectDataSource<T> | undefined>;
+    /**
      * Name of the property used to display the text of each option.
-     *
      * @default 'label'
      */
     optionLabel: _angular_core.InputSignal<string>;
     /**
-     * @property {string} label
-     * @description
      * Floating label displayed above the select input.
      */
     label: _angular_core.InputSignal<string>;
     /**
-     * @property {boolean} showClear
-     * @description
      * Enables the clear button to remove the current selection.
-     *
      * @default true
      */
     showClear: _angular_core.InputSignal<boolean>;
     /**
-     * @property {T | null} value
-     * @description
-     * Internal selected value. Synced with Angular forms and the model signal.
-     *
-     * @internal
-     */
-    value: T | null;
-    /**
-     * @property {boolean} disabled
-     * @description
      * Determines whether the select field is disabled.
-     *
      * @default false
      */
     disabled: _angular_core.InputSignal<boolean>;
-    internalDisabled: _angular_core.WritableSignal<boolean>;
     /**
-     * @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.
      */
     hint: _angular_core.InputSignal<string>;
     /**
-     * @property {Signal<T | null>} model
-     * @description
+     * Enables filtering/search input.
+     * @default false
+     */
+    filter: _angular_core.InputSignal<boolean>;
+    /**
+     * Placeholder text displayed when no value is selected.
+     * @default 'Select an option'
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Loading state for the dropdown.
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * 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>;
+    /**
+     * Internal writable signal for the disabled state.
+     */
+    internalDisabled: _angular_core.WritableSignal<boolean>;
+    /**
      * Two-way binding model using Angular signals.
-     * Allows usage with the syntax: `[(model)]="myValue"`.
+     * This is the single source of truth for the selected value.
+     */
+    model: _angular_core.ModelSignal<T | null>;
+    /**
+     * Text to display when there are no options.
      */
-    model: _angular_core.ModelSignal<T | null | undefined>;
+    emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * Text to display when no results match the filter.
+     */
+    emptyFilterMessage: _angular_core.InputSignal<string>;
     /**
-     * @event modelChange
-     * @description
      * Emits whenever the value changes.
-     * Payload: the selected item of type `T` or `null`.
-     *
-     * @example
-     * <tk-select (modelChange)="onChange($event)"></tk-select>
      */
     modelChange: _angular_core.OutputEmitterRef<T | null>;
-    private onChangeFn;
-    private onTouchedFn;
-    private readonly init;
     /**
-     * @effect disabled → internalDisabled
-     * @description
-     * Synchronizes the disabled input signal with the internal disabled state.
+     * Emits the filter search term.
      */
-    private readonly syncDisabled;
+    filterChange: _angular_core.OutputEmitterRef<{
+        filter: string | null;
+    }>;
+    private onChangeFn;
+    private onTouchedFn;
+    private scrollHandler;
+    private lastListContainer;
+    constructor();
     /**
-     * @effect model → internal value
-     * @description
-     * Synchronizes changes coming from the Signal `model()` back into the internal value.
-     * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.
+     * Displays the items from the manager if provided, otherwise the static options.
+     * 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.
      */
-    private readonly syncModel;
+    get items(): T[];
     /**
-     * @method writeValue
-     * @description
-     * Receives value updates from Angular Forms and writes them into the component.
-     *
-     * @param {T | null} value - New value from the forms API.
+     * Receives value updates from Angular Forms API.
+     * @param value - New value from the forms API.
      */
     writeValue(value: T | null): void;
     /**
-     * @method registerOnChange
-     * @description
      * Registers a callback that is invoked when the component's value changes.
+     * @param fn - The callback function.
      */
     registerOnChange(fn: (value: T | null) => void): void;
     /**
-     * @method registerOnTouched
-     * @description
      * Registers a callback invoked when the component is touched.
+     * @param fn - The callback function.
      */
     registerOnTouched(fn: () => void): void;
     /**
-     * @method setDisabledState
-     * @description
-     * Updates the disabled state of the select control.
-     *
-     * @param {boolean} isDisabled - Whether the component should be disabled.
+     * Updates the disabled state of the control.
+     * @param isDisabled - Whether the component should be disabled.
      */
     setDisabledState(isDisabled: boolean): void;
     /**
-     * @method handleChange
-     * @description
-     * Handles the selection event emitted by the PrimeNG Select component.
-     * Updates Angular Forms, Signals, and emits the modelChange event.
-     *
-     * @param event - Event containing the `value` of the selected option.
+     * Handles UI changes from the PrimeNG Select.
+     * @param event - Event containing the selected value.
      */
     handleChange(event: {
         value: T | null;
     }): void;
+    /**
+     * Handles filter input changes and notifies the manager.
+     * @param event - Filter event containing the search term.
+     */
+    handleFilter(event: {
+        filter: string | null;
+    }): void;
+    /**
+     * Returns the underlying FormControl for validation state checking.
+     */
     get effectiveControl(): FormControl | null;
+    /**
+     * Adds a scroll listener to the PrimeNG select 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;
     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; }; "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; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "modelChange": "modelChange"; }, 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"; "modelChange": "modelChange"; "filterChange": "filterChange"; }, never, never, true, never>;
+}
+
+declare class IntersectionDirective implements OnInit, OnDestroy {
+    /**
+     * Emits when the element enters the viewport.
+     */
+    intersect: _angular_core.OutputEmitterRef<void>;
+    private readonly element;
+    private observer?;
+    constructor();
+    /**
+     * Initializes the Intersection Observer on component mount.
+     */
+    ngOnInit(): void;
+    /**
+     * Cleans up the observer to prevent memory leaks.
+     */
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IntersectionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IntersectionDirective, "[tkIntersection]", never, {}, { "intersect": "intersect"; }, never, never, true, never>;
 }
 
-export { SelectComponent };
+export { IntersectionDirective, SelectComponent, TkSelectManager };
+export type { SelectDataSource, TkSelectRequest };

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.