@tekus/design-system 5.29.0 → 5.30.0

package/fesm2022/tekus-design-system-components-action-group.mjs

@@ -0,0 +1,69 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import { DropdownComponent } from '@tekus/design-system/components/dropdown';
+
+/**
+ * @component ActionGroupComponent
+ * @description
+ * Component that displays a list of actions as a group of icon buttons.
+ * When the number of actions exceeds `maxVisible`, the remaining actions
+ * are grouped into an overflow dropdown menu.
+ *
+ * @usage
+ * ```html
+ * <tk-action-group [actions]="myActions" [maxVisible]="3"></tk-action-group>
+ * ```
+ */
+class ActionGroupComponent {
+    constructor() {
+        /**
+         * The list of actions to display.
+         */
+        this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum number of actions to show directly as buttons before collapsing the rest into a dropdown menu.
+         * @default 2
+         */
+        this.maxVisible = input(2, ...(ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []));
+        /**
+         * The subset of actions to display directly as buttons.
+         */
+        this.visibleActions = computed(() => {
+            const list = this.actions();
+            const max = this.maxVisible();
+            return list.slice(0, max);
+        }, ...(ngDevMode ? [{ debugName: "visibleActions" }] : /* istanbul ignore next */ []));
+        /**
+         * The subset of actions to display in the overflow dropdown menu.
+         * Mapped to PrimeNG MenuItem structure.
+         */
+        this.overflowMenuItems = computed(() => {
+            const list = this.actions();
+            const max = this.maxVisible();
+            if (list.length <= max) {
+                return [];
+            }
+            const overflowList = list.slice(max);
+            return overflowList.map(action => ({
+                label: action.label,
+                icon: action.icon,
+                command: () => action.action(),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "overflowMenuItems" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ActionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ActionGroupComponent, isStandalone: true, selector: "tk-action-group", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-action-group-container\">\n  @for (action of visibleActions(); track action.label) {\n    <tk-button\n      [icon]=\"action.icon\"\n      [tooltipText]=\"action.label\"\n      severity=\"secondary\"\n      variant=\"text\"\n      (clicked)=\"action.action()\"\n    ></tk-button>\n  }\n\n  @if (overflowMenuItems().length > 0) {\n    <tk-dropdown\n      icon=\"ellipsis-vertical\"\n      tooltip=\"M\u00E1s acciones\"\n      [model]=\"overflowMenuItems()\"\n    ></tk-dropdown>\n  }\n</div>\n", styles: [".tk-action-group-container{display:inline-flex;align-items:center}.tk-action-group-container ::ng-deep tk-button .p-button,.tk-action-group-container ::ng-deep tk-dropdown .p-button{color:var(--tk-color-gray-950, #191A1B)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "tooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ActionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-action-group', standalone: true, imports: [CommonModule, ButtonComponent, DropdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-action-group-container\">\n  @for (action of visibleActions(); track action.label) {\n    <tk-button\n      [icon]=\"action.icon\"\n      [tooltipText]=\"action.label\"\n      severity=\"secondary\"\n      variant=\"text\"\n      (clicked)=\"action.action()\"\n    ></tk-button>\n  }\n\n  @if (overflowMenuItems().length > 0) {\n    <tk-dropdown\n      icon=\"ellipsis-vertical\"\n      tooltip=\"M\u00E1s acciones\"\n      [model]=\"overflowMenuItems()\"\n    ></tk-dropdown>\n  }\n</div>\n", styles: [".tk-action-group-container{display:inline-flex;align-items:center}.tk-action-group-container ::ng-deep tk-button .p-button,.tk-action-group-container ::ng-deep tk-dropdown .p-button{color:var(--tk-color-gray-950, #191A1B)}\n"] }]
+        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionGroupComponent };
+//# sourceMappingURL=tekus-design-system-components-action-group.mjs.map

package/fesm2022/tekus-design-system-components-action-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-action-group.mjs","sources":["../../../projects/design-system/components/action-group/src/action-group.component.ts","../../../projects/design-system/components/action-group/src/action-group.component.html","../../../projects/design-system/components/action-group/tekus-design-system-components-action-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DropdownComponent } from '@tekus/design-system/components/dropdown';\nimport { TkAction } from './action-group.types';\n\n/**\n * @component ActionGroupComponent\n * @description\n * Component that displays a list of actions as a group of icon buttons.\n * When the number of actions exceeds `maxVisible`, the remaining actions\n * are grouped into an overflow dropdown menu.\n *\n * @usage\n * ```html\n * <tk-action-group [actions]=\"myActions\" [maxVisible]=\"3\"></tk-action-group>\n * ```\n */\n@Component({\n  selector: 'tk-action-group',\n  standalone: true,\n  imports: [CommonModule, ButtonComponent, DropdownComponent],\n  templateUrl: './action-group.component.html',\n  styleUrl: './action-group.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ActionGroupComponent {\n  /**\n   * The list of actions to display.\n   */\n  actions = input<TkAction[]>([]);\n\n  /**\n   * Maximum number of actions to show directly as buttons before collapsing the rest into a dropdown menu.\n   * @default 2\n   */\n  maxVisible = input<number>(2);\n\n  /**\n   * The subset of actions to display directly as buttons.\n   */\n  visibleActions = computed(() => {\n    const list = this.actions();\n    const max = this.maxVisible();\n    return list.slice(0, max);\n  });\n\n  /**\n   * The subset of actions to display in the overflow dropdown menu.\n   * Mapped to PrimeNG MenuItem structure.\n   */\n  overflowMenuItems = computed<MenuItem[]>(() => {\n    const list = this.actions();\n    const max = this.maxVisible();\n    if (list.length <= max) {\n      return [];\n    }\n\n    const overflowList = list.slice(max);\n    return overflowList.map(action => ({\n      label: action.label,\n      icon: action.icon,\n      command: () => action.action(),\n    }));\n  });\n}\n","<div class=\"tk-action-group-container\">\n  @for (action of visibleActions(); track action.label) {\n    <tk-button\n      [icon]=\"action.icon\"\n      [tooltipText]=\"action.label\"\n      severity=\"secondary\"\n      variant=\"text\"\n      (clicked)=\"action.action()\"\n    ></tk-button>\n  }\n\n  @if (overflowMenuItems().length > 0) {\n    <tk-dropdown\n      icon=\"ellipsis-vertical\"\n      tooltip=\"Más acciones\"\n      [model]=\"overflowMenuItems()\"\n    ></tk-dropdown>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWG;MASU,oBAAoB,CAAA;AARjC,IAAA,WAAA,GAAA;AASE;;AAEG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAa,EAAE,8EAAC;AAE/B;;;AAGG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,CAAC,iFAAC;AAE7B;;AAEG;AACH,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC7B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE;YAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC;AAC3B,QAAA,CAAC,qFAAC;AAEF;;;AAGG;AACH,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAa,MAAK;AAC5C,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE;AAC7B,YAAA,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;AACtB,gBAAA,OAAO,EAAE;YACX;YAEA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YACpC,OAAO,YAAY,CAAC,GAAG,CAAC,MAAM,KAAK;gBACjC,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;AACjB,gBAAA,OAAO,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE;AAC/B,aAAA,CAAC,CAAC;AACL,QAAA,CAAC,wFAAC;AACH,IAAA;8GAvCY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,4VC3BjC,6fAmBA,EAAA,MAAA,EAAA,CAAA,kOAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDGY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,iMAAE,iBAAiB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,EAAA,SAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK/C,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,eAAe,EAAE,iBAAiB,CAAC,EAAA,eAAA,EAG1C,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6fAAA,EAAA,MAAA,EAAA,CAAA,kOAAA,CAAA,EAAA;;;AEzBjD;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-bread-crumps.mjs

@@ -11,8 +11,8 @@ class BreadCrumpsComponent {
         this.router = inject(Router);
         /** Optional manual items. If provided, route listening is ignored. */
         this.items = input(null, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'small'. */
-        this.size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'large'. */
+        this.size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /** If true, only the current (last) item will be displayed. */
         this.onlyCurrent = input(false, ...(ngDevMode ? [{ debugName: "onlyCurrent" }] : /* istanbul ignore next */ []));
         /** Signal that updates on every successful navigation */
@@ -50,11 +50,11 @@ class BreadCrumpsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BreadCrumpsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: BreadCrumpsComponent, isStandalone: true, selector: "tk-bread-crumps", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyCurrent: { classPropertyName: "onlyCurrent", publicName: "onlyCurrent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav class=\"tk-breadcrumps\" [class]=\"'tk-breadcrumps--size-' + size()\">\n  <ul class=\"tk-breadcrumps__list\">\n    @for (item of (onlyCurrent() ? [routeItems()[routeItems().length - 1]] : routeItems()); track $index; let last = $last) {\n      @if (item) {\n        <li class=\"tk-breadcrumps__item\">\n          @if (!last && item.url) {\n            <a [routerLink]=\"item.url\" class=\"tk-breadcrumps__link\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <span [class.tk-breadcrumps__current]=\"last\">\n              {{ item.label }}\n            </span>\n          }\n\n          @if (!last) {\n            <span class=\"tk-breadcrumps__separator\">/</span>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n", styles: [":host{display:block;min-width:0;flex:1;overflow:hidden}.tk-breadcrumps{display:flex;align-items:center;width:100%}.tk-breadcrumps__list{display:flex;flex-wrap:nowrap;list-style:none;padding:0;margin:0;gap:0;font-family:var(--tk-font-family, \"Poppins\", sans-serif);font-size:var(--tk-font-size-paragraph-s, .875rem);width:100%;overflow:hidden}.tk-breadcrumps__item{display:flex;align-items:center;color:var(--tk-color-text-subtle, #5d5d5e);flex-shrink:3;min-width:1.5rem}.tk-breadcrumps__item:last-child{flex-shrink:1;min-width:3rem}.tk-breadcrumps__link{color:inherit;text-decoration:none;transition:color .2s ease}.tk-breadcrumps__link:hover{color:var(--tk-color-primary-default, #16006f);text-decoration:underline}.tk-breadcrumps__link,.tk-breadcrumps span:not(.tk-breadcrumps__separator){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}.tk-breadcrumps__separator{margin:0 .25rem;color:var(--tk-color-text-muted, #8a8a8b);-webkit-user-select:none;user-select:none;flex-shrink:0}.tk-breadcrumps__current{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-600, 600)}.tk-breadcrumps--size-small .tk-breadcrumps__list{font-size:24px}.tk-breadcrumps--size-large .tk-breadcrumps__list{font-size:var(--tk-font-size-headers-l, 2rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: BreadCrumpsComponent, isStandalone: true, selector: "tk-bread-crumps", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyCurrent: { classPropertyName: "onlyCurrent", publicName: "onlyCurrent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav class=\"tk-breadcrumps\" [class.tk-breadcrumps--size-small]=\"size() === 'small'\" [class.tk-breadcrumps--size-large]=\"size() === 'large'\">\n  <ul class=\"tk-breadcrumps__list\">\n    @for (item of (onlyCurrent() ? [routeItems()[routeItems().length - 1]] : routeItems()); track $index; let last = $last) {\n      @if (item) {\n        <li class=\"tk-breadcrumps__item\">\n          @if (!last && item.url) {\n            <a [routerLink]=\"item.url\" class=\"tk-breadcrumps__link\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <span [class.tk-breadcrumps__current]=\"last\">\n              {{ item.label }}\n            </span>\n          }\n\n          @if (!last) {\n            <span class=\"tk-breadcrumps__separator\">/</span>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n", styles: [":host{display:block;min-width:0;flex:1;overflow:hidden}.tk-breadcrumps{display:flex;align-items:center;width:100%}.tk-breadcrumps__list{display:flex;flex-wrap:nowrap;list-style:none;padding:0;margin:0;gap:0;font-family:var(--tk-font-family, \"Poppins\", sans-serif);font-size:var(--tk-font-size-paragraph-s, .875rem);width:100%;overflow:hidden}.tk-breadcrumps__item{display:flex;align-items:center;color:var(--tk-color-text-subtle, #5d5d5e);flex-shrink:3;min-width:1.5rem}.tk-breadcrumps__item:last-child{flex-shrink:1;min-width:3rem}.tk-breadcrumps__link{color:inherit;font-size:inherit;text-decoration:none;transition:color .2s ease}.tk-breadcrumps__link:hover{color:var(--tk-color-primary-default, #16006f);text-decoration:underline}.tk-breadcrumps__link,.tk-breadcrumps span:not(.tk-breadcrumps__separator){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0;font-size:inherit}.tk-breadcrumps__separator{margin:0 .25rem;color:var(--tk-color-text-muted, #8a8a8b);-webkit-user-select:none;user-select:none;flex-shrink:0}.tk-breadcrumps__current{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-600, 600);font-size:inherit}.tk-breadcrumps--size-small .tk-breadcrumps__list{font-size:24px}.tk-breadcrumps--size-large .tk-breadcrumps__list{font-size:var(--tk-font-size-headers-l, 2rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BreadCrumpsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-bread-crumps', standalone: true, imports: [CommonModule, RouterModule], template: "<nav class=\"tk-breadcrumps\" [class]=\"'tk-breadcrumps--size-' + size()\">\n  <ul class=\"tk-breadcrumps__list\">\n    @for (item of (onlyCurrent() ? [routeItems()[routeItems().length - 1]] : routeItems()); track $index; let last = $last) {\n      @if (item) {\n        <li class=\"tk-breadcrumps__item\">\n          @if (!last && item.url) {\n            <a [routerLink]=\"item.url\" class=\"tk-breadcrumps__link\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <span [class.tk-breadcrumps__current]=\"last\">\n              {{ item.label }}\n            </span>\n          }\n\n          @if (!last) {\n            <span class=\"tk-breadcrumps__separator\">/</span>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n", styles: [":host{display:block;min-width:0;flex:1;overflow:hidden}.tk-breadcrumps{display:flex;align-items:center;width:100%}.tk-breadcrumps__list{display:flex;flex-wrap:nowrap;list-style:none;padding:0;margin:0;gap:0;font-family:var(--tk-font-family, \"Poppins\", sans-serif);font-size:var(--tk-font-size-paragraph-s, .875rem);width:100%;overflow:hidden}.tk-breadcrumps__item{display:flex;align-items:center;color:var(--tk-color-text-subtle, #5d5d5e);flex-shrink:3;min-width:1.5rem}.tk-breadcrumps__item:last-child{flex-shrink:1;min-width:3rem}.tk-breadcrumps__link{color:inherit;text-decoration:none;transition:color .2s ease}.tk-breadcrumps__link:hover{color:var(--tk-color-primary-default, #16006f);text-decoration:underline}.tk-breadcrumps__link,.tk-breadcrumps span:not(.tk-breadcrumps__separator){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}.tk-breadcrumps__separator{margin:0 .25rem;color:var(--tk-color-text-muted, #8a8a8b);-webkit-user-select:none;user-select:none;flex-shrink:0}.tk-breadcrumps__current{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-600, 600)}.tk-breadcrumps--size-small .tk-breadcrumps__list{font-size:24px}.tk-breadcrumps--size-large .tk-breadcrumps__list{font-size:var(--tk-font-size-headers-l, 2rem)}\n"] }]
+            args: [{ selector: 'tk-bread-crumps', standalone: true, imports: [CommonModule, RouterModule], template: "<nav class=\"tk-breadcrumps\" [class.tk-breadcrumps--size-small]=\"size() === 'small'\" [class.tk-breadcrumps--size-large]=\"size() === 'large'\">\n  <ul class=\"tk-breadcrumps__list\">\n    @for (item of (onlyCurrent() ? [routeItems()[routeItems().length - 1]] : routeItems()); track $index; let last = $last) {\n      @if (item) {\n        <li class=\"tk-breadcrumps__item\">\n          @if (!last && item.url) {\n            <a [routerLink]=\"item.url\" class=\"tk-breadcrumps__link\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <span [class.tk-breadcrumps__current]=\"last\">\n              {{ item.label }}\n            </span>\n          }\n\n          @if (!last) {\n            <span class=\"tk-breadcrumps__separator\">/</span>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n", styles: [":host{display:block;min-width:0;flex:1;overflow:hidden}.tk-breadcrumps{display:flex;align-items:center;width:100%}.tk-breadcrumps__list{display:flex;flex-wrap:nowrap;list-style:none;padding:0;margin:0;gap:0;font-family:var(--tk-font-family, \"Poppins\", sans-serif);font-size:var(--tk-font-size-paragraph-s, .875rem);width:100%;overflow:hidden}.tk-breadcrumps__item{display:flex;align-items:center;color:var(--tk-color-text-subtle, #5d5d5e);flex-shrink:3;min-width:1.5rem}.tk-breadcrumps__item:last-child{flex-shrink:1;min-width:3rem}.tk-breadcrumps__link{color:inherit;font-size:inherit;text-decoration:none;transition:color .2s ease}.tk-breadcrumps__link:hover{color:var(--tk-color-primary-default, #16006f);text-decoration:underline}.tk-breadcrumps__link,.tk-breadcrumps span:not(.tk-breadcrumps__separator){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0;font-size:inherit}.tk-breadcrumps__separator{margin:0 .25rem;color:var(--tk-color-text-muted, #8a8a8b);-webkit-user-select:none;user-select:none;flex-shrink:0}.tk-breadcrumps__current{color:var(--tk-color-text-default, #191a1b);font-weight:var(--tk-font-weight-600, 600);font-size:inherit}.tk-breadcrumps--size-small .tk-breadcrumps__list{font-size:24px}.tk-breadcrumps--size-large .tk-breadcrumps__list{font-size:var(--tk-font-size-headers-l, 2rem)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onlyCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyCurrent", required: false }] }] } });
 
 /**

package/fesm2022/tekus-design-system-components-bread-crumps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-bread-crumps.mjs","sources":["../../../projects/design-system/components/bread-crumps/src/bread-crumps.component.ts","../../../projects/design-system/components/bread-crumps/src/bread-crumps.component.html","../../../projects/design-system/components/bread-crumps/tekus-design-system-components-bread-crumps.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, inject, input } from '@angular/core';\nimport { ActivatedRouteSnapshot, NavigationEnd, Router, RouterModule, UrlSegment } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { filter, map, startWith } from 'rxjs/operators';\nimport { BreadCrumpItem } from './bread-crumps.types';\n\n@Component({\n  selector: 'tk-bread-crumps',\n  standalone: true,\n  imports: [CommonModule, RouterModule],\n  templateUrl: './bread-crumps.component.html',\n  styleUrl: './bread-crumps.component.scss',\n})\nexport class BreadCrumpsComponent {\n  private readonly router = inject(Router);\n\n  /** Optional manual items. If provided, route listening is ignored. */\n  items = input<BreadCrumpItem[] | null>(null);\n\n  /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'small'. */\n  size = input<'small' | 'large'>('small');\n\n  /** If true, only the current (last) item will be displayed. */\n  onlyCurrent = input<boolean>(false);\n\n  /** Signal that updates on every successful navigation */\n  private readonly navigationEnd = toSignal(\n    this.router.events.pipe(\n      filter((event) => event instanceof NavigationEnd),\n      startWith(null),\n      map(() => this.router.routerState.snapshot.root)\n    )\n  );\n\n  /** Computed list of breadcrumbs derived from the current route state */\n  routeItems = computed(() => {\n    const manualItems = this.items();\n    if (manualItems) return manualItems;\n\n    const root = this.navigationEnd();\n    if (!root) return [];\n\n    const breadcrumbs: BreadCrumpItem[] = [];\n    this.buildBreadcrumbs(root, '', breadcrumbs);\n    return breadcrumbs;\n  });\n\n  private buildBreadcrumbs(\n    route: ActivatedRouteSnapshot,\n    url: string = '',\n    breadcrumbs: BreadCrumpItem[] = []\n  ): void {\n    const children: ActivatedRouteSnapshot[] = route.children;\n\n    if (children.length === 0) {\n      return;\n    }\n\n    for (const child of children) {\n      const routeURL: string = child.url\n        .map((segment: UrlSegment) => segment.path)\n        .join('/');\n      if (routeURL !== '') {\n        url += `/${routeURL}`;\n      }\n\n      const label = child.data['breadcrumb'];\n      if (label) {\n        breadcrumbs.push({ label, url });\n      }\n\n      this.buildBreadcrumbs(child, url, breadcrumbs);\n    }\n  }\n}\n","<nav class=\"tk-breadcrumps\" [class]=\"'tk-breadcrumps--size-' + size()\">\n  <ul class=\"tk-breadcrumps__list\">\n    @for (item of (onlyCurrent() ? [routeItems()[routeItems().length - 1]] : routeItems()); track $index; let last = $last) {\n      @if (item) {\n        <li class=\"tk-breadcrumps__item\">\n          @if (!last && item.url) {\n            <a [routerLink]=\"item.url\" class=\"tk-breadcrumps__link\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <span [class.tk-breadcrumps__current]=\"last\">\n              {{ item.label }}\n            </span>\n          }\n\n          @if (!last) {\n            <span class=\"tk-breadcrumps__separator\">/</span>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-bread-crumps.mjs","sources":["../../../projects/design-system/components/bread-crumps/src/bread-crumps.component.ts","../../../projects/design-system/components/bread-crumps/src/bread-crumps.component.html","../../../projects/design-system/components/bread-crumps/tekus-design-system-components-bread-crumps.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, inject, input } from '@angular/core';\nimport { ActivatedRouteSnapshot, NavigationEnd, Router, RouterModule, UrlSegment } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { filter, map, startWith } from 'rxjs/operators';\nimport { BreadCrumpItem } from './bread-crumps.types';\n\n@Component({\n  selector: 'tk-bread-crumps',\n  standalone: true,\n  imports: [CommonModule, RouterModule],\n  templateUrl: './bread-crumps.component.html',\n  styleUrl: './bread-crumps.component.scss',\n})\nexport class BreadCrumpsComponent {\n  private readonly router = inject(Router);\n\n  /** Optional manual items. If provided, route listening is ignored. */\n  items = input<BreadCrumpItem[] | null>(null);\n\n  /** Size of the breadcrumbs title. Can be 'small' (24px) or 'large' (32px). Default is 'large'. */\n  size = input<'small' | 'large'>('large');\n\n  /** If true, only the current (last) item will be displayed. */\n  onlyCurrent = input<boolean>(false);\n\n  /** Signal that updates on every successful navigation */\n  private readonly navigationEnd = toSignal(\n    this.router.events.pipe(\n      filter((event) => event instanceof NavigationEnd),\n      startWith(null),\n      map(() => this.router.routerState.snapshot.root)\n    )\n  );\n\n  /** Computed list of breadcrumbs derived from the current route state */\n  routeItems = computed(() => {\n    const manualItems = this.items();\n    if (manualItems) return manualItems;\n\n    const root = this.navigationEnd();\n    if (!root) return [];\n\n    const breadcrumbs: BreadCrumpItem[] = [];\n    this.buildBreadcrumbs(root, '', breadcrumbs);\n    return breadcrumbs;\n  });\n\n  private buildBreadcrumbs(\n    route: ActivatedRouteSnapshot,\n    url: string = '',\n    breadcrumbs: BreadCrumpItem[] = []\n  ): void {\n    const children: ActivatedRouteSnapshot[] = route.children;\n\n    if (children.length === 0) {\n      return;\n    }\n\n    for (const child of children) {\n      const routeURL: string = child.url\n        .map((segment: UrlSegment) => segment.path)\n        .join('/');\n      if (routeURL !== '') {\n        url += `/${routeURL}`;\n      }\n\n      const label = child.data['breadcrumb'];\n      if (label) {\n        breadcrumbs.push({ label, url });\n      }\n\n      this.buildBreadcrumbs(child, url, breadcrumbs);\n    }\n  }\n}\n","<nav class=\"tk-breadcrumps\" [class.tk-breadcrumps--size-small]=\"size() === 'small'\" [class.tk-breadcrumps--size-large]=\"size() === 'large'\">\n  <ul class=\"tk-breadcrumps__list\">\n    @for (item of (onlyCurrent() ? [routeItems()[routeItems().length - 1]] : routeItems()); track $index; let last = $last) {\n      @if (item) {\n        <li class=\"tk-breadcrumps__item\">\n          @if (!last && item.url) {\n            <a [routerLink]=\"item.url\" class=\"tk-breadcrumps__link\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <span [class.tk-breadcrumps__current]=\"last\">\n              {{ item.label }}\n            </span>\n          }\n\n          @if (!last) {\n            <span class=\"tk-breadcrumps__separator\">/</span>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-card-list.mjs

@@ -46,7 +46,7 @@ class CardListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CardListComponent, isStandalone: true, selector: "tk-card-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div class=\"tk-card-list-grid\">\n  @for (item of items(); track item.id) {\n    <div class=\"tk-card-list-item\">\n      <tk-card\n        [title]=\"item.title\"\n        [titleIcon]=\"item.titleIcon!\"\n        [description]=\"item.description!\"\n        [image]=\"item.image!\"\n        [badgeText]=\"item.badgeText!\"\n        [secondaryBadgeText]=\"item.secondaryBadgeText!\"\n        [actions]=\"item.actions || []\"\n        [infoElements]=\"item.infoElements || []\"\n        [selectable]=\"item.selectable ?? selectable()\"\n        [selected]=\"isCardSelected(item)\"\n        (selectedChange)=\"onItemSelected(item.id, $event)\">\n      </tk-card>\n    </div>\n  }\n</div>\n", styles: [".tk-card-list-grid{display:grid;gap:var(--tk-spacing-base-150);width:100%;grid-template-columns:repeat(1,1fr)}@media screen and (min-width:768px){.tk-card-list-grid{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1024px){.tk-card-list-grid{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1440px){.tk-card-list-grid{grid-template-columns:repeat(5,1fr)}}.tk-card-list-grid .tk-card-list-item{display:flex;flex-direction:column;height:100%}.tk-card-list-grid .tk-card-list-item tk-card{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title", "titleIcon", "description", "image", "showImage", "layout", "selectable", "selected", "badgeText", "secondaryBadgeText", "actions", "infoElements"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CardListComponent, isStandalone: true, selector: "tk-card-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div class=\"tk-card-list-grid\">\n  @for (item of items(); track item.id) {\n    <div class=\"tk-card-list-item\">\n      <tk-card\n        [title]=\"item.title\"\n        [titleIcon]=\"item.titleIcon!\"\n        [description]=\"item.description!\"\n        [image]=\"item.image!\"\n        [badgeText]=\"item.badgeText!\"\n        [secondaryBadgeText]=\"item.secondaryBadgeText!\"\n        [actions]=\"item.actions || []\"\n        [infoElements]=\"item.infoElements || []\"\n        [selectable]=\"item.selectable ?? selectable()\"\n        [selected]=\"isCardSelected(item)\"\n        (selectedChange)=\"onItemSelected(item.id, $event)\">\n      </tk-card>\n    </div>\n  }\n</div>\n", styles: [".tk-card-list-grid{display:grid;gap:var(--tk-spacing-base-150);width:100%;grid-template-columns:repeat(1,1fr)}@media screen and (min-width:768px){.tk-card-list-grid{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1024px){.tk-card-list-grid{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1440px){.tk-card-list-grid{grid-template-columns:repeat(5,1fr)}}.tk-card-list-grid .tk-card-list-item{display:flex;flex-direction:column;height:100%}.tk-card-list-grid .tk-card-list-item tk-card{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title", "titleIcon", "description", "image", "showImage", "layout", "selectable", "selected", "badgeText", "secondaryBadgeText", "actions", "actionGroup", "actionGroupMaxVisible", "infoElements"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardListComponent, decorators: [{
             type: Component,

package/fesm2022/tekus-design-system-components-card-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-card-list.mjs","sources":["../../../projects/design-system/components/card-list/src/card-list.component.ts","../../../projects/design-system/components/card-list/src/card-list.component.html","../../../projects/design-system/components/card-list/tekus-design-system-components-card-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CardComponent } from '@tekus/design-system/components/card';\nimport { TkCardListItem } from './card-list.types';\n\n/**\n * @component CardListComponent\n * @description\n * High-level component used to display a grid of cards with responsive behavioral breakpoints.\n * Supports individual item selection and consistent spacing.\n */\n@Component({\n  selector: 'tk-card-list',\n  standalone: true,\n  imports: [CommonModule, CardComponent],\n  templateUrl: './card-list.component.html',\n  styleUrl: './card-list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardListComponent {\n  /** The list of items to display in the grid. Required. */\n  items = input.required<TkCardListItem[]>();\n\n  /** Whether the list supports global item selection (checkboxes). */\n  selectable = input<boolean>(false);\n\n  /** Two-way signal for the current selection of item IDs. */\n  selectedIds = model<string[]>([]);\n\n  /**\n   * Helper method to determine if an individual item is currently selected.\n   */\n  isItemSelected(id: string): boolean {\n    return this.selectedIds().includes(id);\n  }\n\n  /**\n   * Helper method to determine if a card should be marked as selected in the template.\n   * Only returns true if the item is explicitly selectable and its ID is in the selected list.\n   */\n  isCardSelected(item: TkCardListItem): boolean {\n    const isSelectable = item.selectable ?? this.selectable();\n    return isSelectable ? this.isItemSelected(item.id) : false;\n  }\n\n  /**\n   * Handler for individual card selection change events.\n   * Updates the global selectedIds model accordingly.\n   */\n  onItemSelected(id: string, selected: boolean): void {\n    const current = this.selectedIds();\n    if (selected && !current.includes(id)) {\n      this.selectedIds.set([...current, id]);\n    } else if (!selected && current.includes(id)) {\n      this.selectedIds.set(current.filter(item => item !== id));\n    }\n  }\n}\n","<div class=\"tk-card-list-grid\">\n  @for (item of items(); track item.id) {\n    <div class=\"tk-card-list-item\">\n      <tk-card\n        [title]=\"item.title\"\n        [titleIcon]=\"item.titleIcon!\"\n        [description]=\"item.description!\"\n        [image]=\"item.image!\"\n        [badgeText]=\"item.badgeText!\"\n        [secondaryBadgeText]=\"item.secondaryBadgeText!\"\n        [actions]=\"item.actions || []\"\n        [infoElements]=\"item.infoElements || []\"\n        [selectable]=\"item.selectable ?? selectable()\"\n        [selected]=\"isCardSelected(item)\"\n        (selectedChange)=\"onItemSelected(item.id, $event)\">\n      </tk-card>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-card-list.mjs","sources":["../../../projects/design-system/components/card-list/src/card-list.component.ts","../../../projects/design-system/components/card-list/src/card-list.component.html","../../../projects/design-system/components/card-list/tekus-design-system-components-card-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CardComponent } from '@tekus/design-system/components/card';\nimport { TkCardListItem } from './card-list.types';\n\n/**\n * @component CardListComponent\n * @description\n * High-level component used to display a grid of cards with responsive behavioral breakpoints.\n * Supports individual item selection and consistent spacing.\n */\n@Component({\n  selector: 'tk-card-list',\n  standalone: true,\n  imports: [CommonModule, CardComponent],\n  templateUrl: './card-list.component.html',\n  styleUrl: './card-list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardListComponent {\n  /** The list of items to display in the grid. Required. */\n  items = input.required<TkCardListItem[]>();\n\n  /** Whether the list supports global item selection (checkboxes). */\n  selectable = input<boolean>(false);\n\n  /** Two-way signal for the current selection of item IDs. */\n  selectedIds = model<string[]>([]);\n\n  /**\n   * Helper method to determine if an individual item is currently selected.\n   */\n  isItemSelected(id: string): boolean {\n    return this.selectedIds().includes(id);\n  }\n\n  /**\n   * Helper method to determine if a card should be marked as selected in the template.\n   * Only returns true if the item is explicitly selectable and its ID is in the selected list.\n   */\n  isCardSelected(item: TkCardListItem): boolean {\n    const isSelectable = item.selectable ?? this.selectable();\n    return isSelectable ? this.isItemSelected(item.id) : false;\n  }\n\n  /**\n   * Handler for individual card selection change events.\n   * Updates the global selectedIds model accordingly.\n   */\n  onItemSelected(id: string, selected: boolean): void {\n    const current = this.selectedIds();\n    if (selected && !current.includes(id)) {\n      this.selectedIds.set([...current, id]);\n    } else if (!selected && current.includes(id)) {\n      this.selectedIds.set(current.filter(item => item !== id));\n    }\n  }\n}\n","<div class=\"tk-card-list-grid\">\n  @for (item of items(); track item.id) {\n    <div class=\"tk-card-list-item\">\n      <tk-card\n        [title]=\"item.title\"\n        [titleIcon]=\"item.titleIcon!\"\n        [description]=\"item.description!\"\n        [image]=\"item.image!\"\n        [badgeText]=\"item.badgeText!\"\n        [secondaryBadgeText]=\"item.secondaryBadgeText!\"\n        [actions]=\"item.actions || []\"\n        [infoElements]=\"item.infoElements || []\"\n        [selectable]=\"item.selectable ?? selectable()\"\n        [selected]=\"isCardSelected(item)\"\n        (selectedChange)=\"onItemSelected(item.id, $event)\">\n      </tk-card>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-card.mjs

@@ -9,6 +9,7 @@ import { ProgressBarComponent } from '@tekus/design-system/components/progress-b
 import { StatusBarComponent } from '@tekus/design-system/components/status-bar';
 import { TagComponent } from '@tekus/design-system/components/tag';
 import { DropdownComponent } from '@tekus/design-system/components/dropdown';
+import { ActionGroupComponent } from '@tekus/design-system/components/action-group';
 
 /**
  * @component CardComponent
@@ -54,6 +55,10 @@ class CardComponent {
         this.secondaryBadgeText = input(...(ngDevMode ? [undefined, { debugName: "secondaryBadgeText" }] : /* istanbul ignore next */ []));
         /** List of actions associated with the card. */
         this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Action group list to be used with tk-action-group */
+        this.actionGroup = input([], ...(ngDevMode ? [{ debugName: "actionGroup" }] : /* istanbul ignore next */ []));
+        /** Maximum number of actions to show as buttons before dropping into menu (used with actionGroup) */
+        this.actionGroupMaxVisible = input(2, ...(ngDevMode ? [{ debugName: "actionGroupMaxVisible" }] : /* istanbul ignore next */ []));
         /** Dynamic list of informational elements (tags, progress bars, etc.). */
         this.infoElements = input([], ...(ngDevMode ? [{ debugName: "infoElements" }] : /* istanbul ignore next */ []));
         /**
@@ -102,7 +107,7 @@ class CardComponent {
         return 'primary';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CardComponent, isStandalone: true, selector: "tk-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, showImage: { classPropertyName: "showImage", publicName: "showImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, secondaryBadgeText: { classPropertyName: "secondaryBadgeText", publicName: "secondaryBadgeText", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, infoElements: { classPropertyName: "infoElements", publicName: "infoElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-padding-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-padding-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: ProgressBarComponent, selector: "tk-progress-bar", inputs: ["value", "showValue", "size"] }, { kind: "component", type: StatusBarComponent, selector: "tk-status-bar", inputs: ["label", "severity", "size", "barLabel"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "tooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CardComponent, isStandalone: true, selector: "tk-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, showImage: { classPropertyName: "showImage", publicName: "showImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, secondaryBadgeText: { classPropertyName: "secondaryBadgeText", publicName: "secondaryBadgeText", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionGroup: { classPropertyName: "actionGroup", publicName: "actionGroup", isSignal: true, isRequired: false, transformFunction: null }, actionGroupMaxVisible: { classPropertyName: "actionGroupMaxVisible", publicName: "actionGroupMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, infoElements: { classPropertyName: "infoElements", publicName: "infoElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0 || actionGroup().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n\n        <!-- Action Group -->\n        @if (actionGroup().length > 0) {\n          <tk-action-group [actions]=\"actionGroup()\" [maxVisible]=\"actionGroupMaxVisible()\"></tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-padding-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-padding-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: ProgressBarComponent, selector: "tk-progress-bar", inputs: ["value", "showValue", "size"] }, { kind: "component", type: StatusBarComponent, selector: "tk-status-bar", inputs: ["label", "severity", "size", "barLabel"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "tooltip", "tooltipPosition"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -115,9 +120,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                         ProgressBarComponent,
                         StatusBarComponent,
                         TagComponent,
-                        DropdownComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-padding-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-padding-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], titleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleIcon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], showImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImage", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], secondaryBadgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryBadgeText", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], infoElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoElements", required: false }] }] } });
+                        DropdownComponent,
+                        ActionGroupComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0 || actionGroup().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n\n        <!-- Action Group -->\n        @if (actionGroup().length > 0) {\n          <tk-action-group [actions]=\"actionGroup()\" [maxVisible]=\"actionGroupMaxVisible()\"></tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-padding-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-padding-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], titleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleIcon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], showImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImage", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], secondaryBadgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryBadgeText", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionGroup", required: false }] }], actionGroupMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionGroupMaxVisible", required: false }] }], infoElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoElements", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-card.mjs","sources":["../../../projects/design-system/components/card/src/card.component.ts","../../../projects/design-system/components/card/src/card.component.html","../../../projects/design-system/components/card/tekus-design-system-components-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuModule } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatusBarComponent } from '@tekus/design-system/components/status-bar';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TkCardAction, TkCardInfoElement, TkCardLayout } from './card.types';\nimport { DropdownComponent } from '@tekus/design-system/components/dropdown';\n\n/**\n * @component CardComponent\n * @description\n * Flexible card component used to display grouped content with multiple layout options.\n * Supports vertical and horizontal orientations, optional images, headers with selection,\n * and dynamic action buttons (with overflow menu support).\n *\n * It utilizes Angular 21 Signals for efficient state management and reactivity.\n *\n * @usage\n * ```html\n * <tk-card\n *   title=\"My Document\"\n *   description=\"Upload in progress...\"\n *   layout=\"horizontal\"\n *   [actions]=\"myActions\"\n *   [infoElements]=\"[{ type: 'progress-bar', value: 75 }]\">\n * </tk-card>\n * ```\n */\n@Component({\n  selector: 'tk-card',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MenuModule,\n    ButtonComponent,\n    CheckboxComponent,\n    IconComponent,\n    ProgressBarComponent,\n    StatusBarComponent,\n    TagComponent,\n    DropdownComponent\n  ],\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n  /** The primary title of the card. Required. */\n  title = input.required<string>();\n\n  /** Optional icon to display next to the title. */\n  titleIcon = input<string>();\n\n  /** Optional secondary description. */\n  description = input<string>();\n\n  /** Optional image URL or source. */\n  image = input<string>();\n\n  /** Whether to show the image section. If true and no URL is provided, a placeholder is shown. */\n  showImage = input<boolean>(true);\n\n  /** Layout orientation: 'vertical' (default) or 'horizontal'. */\n  layout = input<TkCardLayout>('vertical');\n\n  /** Whether the card shows a checkbox for selection. */\n  selectable = input<boolean>(false);\n\n  /** Two-way signal for the selection state. */\n  selected = model<boolean>(false);\n\n  /** Optional ID or primary badge text displayed in the header. */\n  badgeText = input<string>();\n\n  /** Optional secondary metadata text (e.g. file size) displayed next to the badge. */\n  secondaryBadgeText = input<string>();\n\n  /** List of actions associated with the card. */\n  actions = input<TkCardAction[]>([]);\n\n  /** Dynamic list of informational elements (tags, progress bars, etc.). */\n  infoElements = input<TkCardInfoElement[]>([]);\n\n  /**\n   * Computed logic for handling actions.\n   * If there are > 3 actions, they are all moved to an overflow menu.\n   * Otherwise, they are displayed as individual buttons.\n   */\n  hasOverflowActions = computed(() => this.actions().length > 1);\n\n  /** Actions to be displayed directly as buttons. */\n  visibleActions = computed(() => this.actions().length === 1 ? [this.actions()[0]] : []);\n\n  /** \n   * Actions to be displayed in the overflow menu.\n   * Maps TkCardAction to PrimeNG MenuItem format.\n   */\n  menuItems = computed<MenuItem[]>(() => {\n    if (this.actions().length <= 1) return [];\n    return this.actions().map(action => ({\n      label: action.label,\n      icon: action.icon,\n      disabled: action.disabled,\n      command: () => action.handler()\n    }));\n  });\n\n  /**\n   * Maps card severity to button severity.\n   */\n  getButtonSeverity(severity?: string): 'primary' | 'secondary' | 'danger' {\n    if (severity === 'danger') return 'danger';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n\n  /**\n   * Maps card severity to status bar severity.\n   */\n  getStatusBarSeverity(severity?: string): 'primary' | 'secondary' | 'success' | 'error' {\n    if (severity === 'danger') return 'error';\n    if (severity === 'success') return 'success';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n}\n","<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-card.mjs","sources":["../../../projects/design-system/components/card/src/card.component.ts","../../../projects/design-system/components/card/src/card.component.html","../../../projects/design-system/components/card/tekus-design-system-components-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuModule } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatusBarComponent } from '@tekus/design-system/components/status-bar';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TkCardAction, TkCardInfoElement, TkCardLayout } from './card.types';\nimport { DropdownComponent } from '@tekus/design-system/components/dropdown';\nimport { ActionGroupComponent, TkAction } from '@tekus/design-system/components/action-group';\n\n/**\n * @component CardComponent\n * @description\n * Flexible card component used to display grouped content with multiple layout options.\n * Supports vertical and horizontal orientations, optional images, headers with selection,\n * and dynamic action buttons (with overflow menu support).\n *\n * It utilizes Angular 21 Signals for efficient state management and reactivity.\n *\n * @usage\n * ```html\n * <tk-card\n *   title=\"My Document\"\n *   description=\"Upload in progress...\"\n *   layout=\"horizontal\"\n *   [actions]=\"myActions\"\n *   [infoElements]=\"[{ type: 'progress-bar', value: 75 }]\">\n * </tk-card>\n * ```\n */\n@Component({\n  selector: 'tk-card',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MenuModule,\n    ButtonComponent,\n    CheckboxComponent,\n    IconComponent,\n    ProgressBarComponent,\n    StatusBarComponent,\n    TagComponent,\n    DropdownComponent,\n    ActionGroupComponent\n  ],\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n  /** The primary title of the card. Required. */\n  title = input.required<string>();\n\n  /** Optional icon to display next to the title. */\n  titleIcon = input<string>();\n\n  /** Optional secondary description. */\n  description = input<string>();\n\n  /** Optional image URL or source. */\n  image = input<string>();\n\n  /** Whether to show the image section. If true and no URL is provided, a placeholder is shown. */\n  showImage = input<boolean>(true);\n\n  /** Layout orientation: 'vertical' (default) or 'horizontal'. */\n  layout = input<TkCardLayout>('vertical');\n\n  /** Whether the card shows a checkbox for selection. */\n  selectable = input<boolean>(false);\n\n  /** Two-way signal for the selection state. */\n  selected = model<boolean>(false);\n\n  /** Optional ID or primary badge text displayed in the header. */\n  badgeText = input<string>();\n\n  /** Optional secondary metadata text (e.g. file size) displayed next to the badge. */\n  secondaryBadgeText = input<string>();\n\n  /** List of actions associated with the card. */\n  actions = input<TkCardAction[]>([]);\n\n  /** Action group list to be used with tk-action-group */\n  actionGroup = input<TkAction[]>([]);\n\n  /** Maximum number of actions to show as buttons before dropping into menu (used with actionGroup) */\n  actionGroupMaxVisible = input<number>(2);\n\n  /** Dynamic list of informational elements (tags, progress bars, etc.). */\n  infoElements = input<TkCardInfoElement[]>([]);\n\n  /**\n   * Computed logic for handling actions.\n   * If there are > 3 actions, they are all moved to an overflow menu.\n   * Otherwise, they are displayed as individual buttons.\n   */\n  hasOverflowActions = computed(() => this.actions().length > 1);\n\n  /** Actions to be displayed directly as buttons. */\n  visibleActions = computed(() => this.actions().length === 1 ? [this.actions()[0]] : []);\n\n  /** \n   * Actions to be displayed in the overflow menu.\n   * Maps TkCardAction to PrimeNG MenuItem format.\n   */\n  menuItems = computed<MenuItem[]>(() => {\n    if (this.actions().length <= 1) return [];\n    return this.actions().map(action => ({\n      label: action.label,\n      icon: action.icon,\n      disabled: action.disabled,\n      command: () => action.handler()\n    }));\n  });\n\n  /**\n   * Maps card severity to button severity.\n   */\n  getButtonSeverity(severity?: string): 'primary' | 'secondary' | 'danger' {\n    if (severity === 'danger') return 'danger';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n\n  /**\n   * Maps card severity to status bar severity.\n   */\n  getStatusBarSeverity(severity?: string): 'primary' | 'secondary' | 'success' | 'error' {\n    if (severity === 'danger') return 'error';\n    if (severity === 'success') return 'success';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n}\n","<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0 || actionGroup().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n\n        <!-- Action Group -->\n        @if (actionGroup().length > 0) {\n          <tk-action-group [actions]=\"actionGroup()\" [maxVisible]=\"actionGroupMaxVisible()\"></tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-drawer.mjs

@@ -235,11 +235,11 @@ class DrawerComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, hasTabs: { classPropertyName: "hasTabs", publicName: "hasTabs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels,:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b);border-radius:50%}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title-container{display:flex;flex-direction:column;flex:1;min-width:0}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-padding-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, hasTabs: { classPropertyName: "hasTabs", publicName: "hasTabs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs tk-tabs,:host ::ng-deep .tk-drawer--has-tabs p-tabs,:host ::ng-deep .tk-drawer--has-tabs .tk-tabs{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels{padding:var(--tk-spacing-padding-none);display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none);overflow-y:auto;flex:1}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b);border-radius:50%}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title-container{display:flex;flex-direction:column;flex:1;min-width:0}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-padding-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent, TagComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels,:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b);border-radius:50%}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title-container{display:flex;flex-direction:column;flex:1;min-width:0}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-padding-xs, .25rem)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent, TagComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs tk-tabs,:host ::ng-deep .tk-drawer--has-tabs p-tabs,:host ::ng-deep .tk-drawer--has-tabs .tk-tabs{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels{padding:var(--tk-spacing-padding-none);display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none);overflow-y:auto;flex:1}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b);border-radius:50%}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title-container{display:flex;flex-direction:column;flex:1;min-width:0}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-padding-xs, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }], dialogRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogRef", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], headerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAction", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], subtle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtle", required: false }] }], hasTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTabs", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });