@tekus/design-system 5.32.0 → 5.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,6 +27,12 @@ class ActionGroupComponent {
27
27
  * @default 2
28
28
  */
29
29
  this.maxVisible = input(2, ...(ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []));
30
+ /**
31
+ * Disables all actions in the group.
32
+ * Individual actions can also be disabled via `TkAction.disabled`.
33
+ * @default false
34
+ */
35
+ this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
30
36
  /**
31
37
  * The subset of actions to display directly as buttons.
32
38
  */
@@ -45,21 +51,23 @@ class ActionGroupComponent {
45
51
  if (list.length <= max) {
46
52
  return [];
47
53
  }
54
+ const globalDisabled = this.disabled();
48
55
  const overflowList = list.slice(max);
49
56
  return overflowList.map(action => ({
50
57
  label: action.label,
51
58
  icon: action.icon,
52
59
  command: () => action.action(),
60
+ disabled: globalDisabled || (action.disabled ?? false),
53
61
  }));
54
62
  }, ...(ngDevMode ? [{ debugName: "overflowMenuItems" }] : /* istanbul ignore next */ []));
55
63
  }
56
64
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ActionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
57
- 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 }); }
65
+ 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 [disabled]=\"disabled() || (action.disabled ?? false)\"\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 [disabled]=\"disabled()\"\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", "disabled", "tooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
58
66
  }
59
67
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ActionGroupComponent, decorators: [{
60
68
  type: Component,
61
- 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"] }]
62
- }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }] } });
69
+ 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 [disabled]=\"disabled() || (action.disabled ?? false)\"\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 [disabled]=\"disabled()\"\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"] }]
70
+ }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
63
71
 
64
72
  /**
65
73
  * Generated bundle index. Do not edit.
@@ -1 +1 @@
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;;;;"}
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 * Disables all actions in the group.\n * Individual actions can also be disabled via `TkAction.disabled`.\n * @default false\n */\n disabled = input<boolean>(false);\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 globalDisabled = this.disabled();\n const overflowList = list.slice(max);\n return overflowList.map(action => ({\n label: action.label,\n icon: action.icon,\n command: () => action.action(),\n disabled: globalDisabled || (action.disabled ?? false),\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 [disabled]=\"disabled() || (action.disabled ?? false)\"\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 [disabled]=\"disabled()\"\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;;;;AAIG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAEhC;;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;AAEA,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE;YACtC,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;gBAC9B,QAAQ,EAAE,cAAc,KAAK,MAAM,CAAC,QAAQ,IAAI,KAAK,CAAC;AACvD,aAAA,CAAC,CAAC;AACL,QAAA,CAAC,wFAAC;AACH,IAAA;8GAhDY,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,6dC3BjC,6lBAqBA,EAAA,MAAA,EAAA,CAAA,kOAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDCY,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,UAAA,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,6lBAAA,EAAA,MAAA,EAAA,CAAA,kOAAA,CAAA,EAAA;;;AEzBjD;;AAEG;;;;"}
@@ -46,7 +46,7 @@ class CardListComponent {
46
46
  }
47
47
  }
48
48
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
49
- 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", "titleLink", "titleHref", "titleIcon", "description", "image", "showImage", "layout", "selectable", "selected", "badgeText", "secondaryBadgeText", "connectionStatusDate", "connectionStatusSeverity", "actions", "actionGroup", "actionGroupMaxVisible", "infoElements"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
49
+ 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", "titleLink", "titleHref", "titleIcon", "description", "image", "showImage", "layout", "selectable", "selected", "badgeText", "secondaryBadgeText", "connectionStatusDate", "connectionStatusSeverity", "actions", "actionGroup", "actionGroupMaxVisible", "actionGroupDisabled", "infoElements"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
50
50
  }
51
51
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardListComponent, decorators: [{
52
52
  type: Component,
@@ -1 +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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"}
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":";;;;;AAKA;;;;;AAKG;MASU,iBAAiB,CAAA;AAR9B,IAAA,WAAA,GAAA;;AAUE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAoB;;AAG1C,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;;AAGlC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAW,EAAE,kFAAC;AA8BlC,IAAA;AA5BC;;AAEG;AACH,IAAA,cAAc,CAAC,EAAU,EAAA;QACvB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;IACxC;AAEA;;;AAGG;AACH,IAAA,cAAc,CAAC,IAAoB,EAAA;QACjC,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE;AACzD,QAAA,OAAO,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK;IAC5D;AAEA;;;AAGG;IACH,cAAc,CAAC,EAAU,EAAE,QAAiB,EAAA;AAC1C,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;QAClC,IAAI,QAAQ,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrC,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,CAAC,CAAC;QACxC;aAAO,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC;QAC3D;IACF;8GArCW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnB9B,irBAmBA,EAAA,MAAA,EAAA,CAAA,qiBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDLY,YAAY,+BAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,WAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,0BAAA,EAAA,SAAA,EAAA,aAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK1B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,CAAC,EAAA,eAAA,EAGrB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,irBAAA,EAAA,MAAA,EAAA,CAAA,qiBAAA,CAAA,EAAA;;;AEjBjD;;AAEG;;;;"}
@@ -69,6 +69,8 @@ class CardComponent {
69
69
  this.actionGroup = input([], ...(ngDevMode ? [{ debugName: "actionGroup" }] : /* istanbul ignore next */ []));
70
70
  /** Maximum number of actions to show as buttons before dropping into menu (used with actionGroup) */
71
71
  this.actionGroupMaxVisible = input(2, ...(ngDevMode ? [{ debugName: "actionGroupMaxVisible" }] : /* istanbul ignore next */ []));
72
+ /** Disables all actions in the action group globally (e.g. for read-only or permission gates) */
73
+ this.actionGroupDisabled = input(false, ...(ngDevMode ? [{ debugName: "actionGroupDisabled" }] : /* istanbul ignore next */ []));
72
74
  /** Dynamic list of informational elements (tags, progress bars, etc.). */
73
75
  this.infoElements = input([], ...(ngDevMode ? [{ debugName: "infoElements" }] : /* istanbul ignore next */ []));
74
76
  /**
@@ -117,7 +119,7 @@ class CardComponent {
117
119
  return 'primary';
118
120
  }
119
121
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
120
- 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 }, titleLink: { classPropertyName: "titleLink", publicName: "titleLink", isSignal: true, isRequired: false, transformFunction: null }, titleHref: { classPropertyName: "titleHref", publicName: "titleHref", isSignal: true, isRequired: false, 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 }, connectionStatusDate: { classPropertyName: "connectionStatusDate", publicName: "connectionStatusDate", isSignal: true, isRequired: false, transformFunction: null }, connectionStatusSeverity: { classPropertyName: "connectionStatusSeverity", publicName: "connectionStatusSeverity", 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() || connectionStatusDate() || 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() || connectionStatusDate()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (connectionStatusDate()) {\n <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\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\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n @if (titleLink()) {\n <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else if (titleHref()) {\n <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else {\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n }\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-title.tk-card-title--link{cursor:pointer}.tk-card .tk-card-content .tk-card-title .tk-card-title-link{color:inherit;text-decoration:none;display:flex;align-items:center;gap:inherit;width:100%;transition:opacity .2s ease-in-out}.tk-card .tk-card-content .tk-card-title .tk-card-title-link:hover{opacity:.7}.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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }, { kind: "component", type: TimeAgoComponent, selector: "tk-time-ago", inputs: ["dateTime", "severity", "tooltipText", "tooltipFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
122
+ 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 }, titleLink: { classPropertyName: "titleLink", publicName: "titleLink", isSignal: true, isRequired: false, transformFunction: null }, titleHref: { classPropertyName: "titleHref", publicName: "titleHref", isSignal: true, isRequired: false, 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 }, connectionStatusDate: { classPropertyName: "connectionStatusDate", publicName: "connectionStatusDate", isSignal: true, isRequired: false, transformFunction: null }, connectionStatusSeverity: { classPropertyName: "connectionStatusSeverity", publicName: "connectionStatusSeverity", 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 }, actionGroupDisabled: { classPropertyName: "actionGroupDisabled", publicName: "actionGroupDisabled", 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() || connectionStatusDate() || 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() || connectionStatusDate()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (connectionStatusDate()) {\n <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\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\n [actions]=\"actionGroup()\"\n [maxVisible]=\"actionGroupMaxVisible()\"\n [disabled]=\"actionGroupDisabled()\"\n ></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\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n @if (titleLink()) {\n <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else if (titleHref()) {\n <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else {\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n }\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-title.tk-card-title--link{cursor:pointer}.tk-card .tk-card-content .tk-card-title .tk-card-title-link{color:inherit;text-decoration:none;display:flex;align-items:center;gap:inherit;width:100%;transition:opacity .2s ease-in-out}.tk-card .tk-card-content .tk-card-title .tk-card-title-link:hover{opacity:.7}.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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: TimeAgoComponent, selector: "tk-time-ago", inputs: ["dateTime", "severity", "tooltipText", "tooltipFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
121
123
  }
122
124
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardComponent, decorators: [{
123
125
  type: Component,
@@ -134,8 +136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
134
136
  DropdownComponent,
135
137
  ActionGroupComponent,
136
138
  TimeAgoComponent
137
- ], 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() || connectionStatusDate() || 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() || connectionStatusDate()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (connectionStatusDate()) {\n <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\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\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n @if (titleLink()) {\n <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else if (titleHref()) {\n <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else {\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n }\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-title.tk-card-title--link{cursor:pointer}.tk-card .tk-card-content .tk-card-title .tk-card-title-link{color:inherit;text-decoration:none;display:flex;align-items:center;gap:inherit;width:100%;transition:opacity .2s ease-in-out}.tk-card .tk-card-content .tk-card-title .tk-card-title-link:hover{opacity:.7}.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"] }]
138
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], titleLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLink", required: false }] }], titleHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleHref", required: false }] }], 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 }] }], connectionStatusDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionStatusDate", required: false }] }], connectionStatusSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionStatusSeverity", 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 }] }] } });
139
+ ], 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() || connectionStatusDate() || 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() || connectionStatusDate()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (connectionStatusDate()) {\n <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\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\n [actions]=\"actionGroup()\"\n [maxVisible]=\"actionGroupMaxVisible()\"\n [disabled]=\"actionGroupDisabled()\"\n ></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\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n @if (titleLink()) {\n <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else if (titleHref()) {\n <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else {\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n }\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-title.tk-card-title--link{cursor:pointer}.tk-card .tk-card-content .tk-card-title .tk-card-title-link{color:inherit;text-decoration:none;display:flex;align-items:center;gap:inherit;width:100%;transition:opacity .2s ease-in-out}.tk-card .tk-card-content .tk-card-title .tk-card-title-link:hover{opacity:.7}.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"] }]
140
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], titleLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLink", required: false }] }], titleHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleHref", required: false }] }], 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 }] }], connectionStatusDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionStatusDate", required: false }] }], connectionStatusSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionStatusSeverity", 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 }] }], actionGroupDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionGroupDisabled", required: false }] }], infoElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoElements", required: false }] }] } });
139
141
 
140
142
  /**
141
143
  * Generated bundle index. Do not edit.
@@ -1 +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 { RouterLink } from '@angular/router';\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';\nimport { TimeAgoComponent } from '@tekus/design-system/components/time-ago';\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 RouterLink,\n MenuModule,\n ButtonComponent,\n CheckboxComponent,\n IconComponent,\n ProgressBarComponent,\n StatusBarComponent,\n TagComponent,\n DropdownComponent,\n ActionGroupComponent,\n TimeAgoComponent\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 link (routerLink or URL) for the title. */\n titleLink = input<string | unknown[] | null | undefined>(undefined);\n\n /** Optional external link (href) for the title. */\n titleHref = input<string | null | undefined>(undefined);\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 /** Optional date/time value for connection status. */\n connectionStatusDate = input<Date | string | number | null | undefined>();\n\n /** Optional connection status severity: 'success' | 'warn' | 'danger' | 'gray'. */\n connectionStatusSeverity = input<'success' | 'warn' | 'danger' | 'gray'>('success');\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() || connectionStatusDate() || 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() || connectionStatusDate()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (connectionStatusDate()) {\n <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\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\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n @if (titleLink()) {\n <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else if (titleHref()) {\n <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else {\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n }\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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"}
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 { RouterLink } from '@angular/router';\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';\nimport { TimeAgoComponent } from '@tekus/design-system/components/time-ago';\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 RouterLink,\n MenuModule,\n ButtonComponent,\n CheckboxComponent,\n IconComponent,\n ProgressBarComponent,\n StatusBarComponent,\n TagComponent,\n DropdownComponent,\n ActionGroupComponent,\n TimeAgoComponent\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 link (routerLink or URL) for the title. */\n titleLink = input<string | unknown[] | null | undefined>(undefined);\n\n /** Optional external link (href) for the title. */\n titleHref = input<string | null | undefined>(undefined);\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 /** Optional date/time value for connection status. */\n connectionStatusDate = input<Date | string | number | null | undefined>();\n\n /** Optional connection status severity: 'success' | 'warn' | 'danger' | 'gray'. */\n connectionStatusSeverity = input<'success' | 'warn' | 'danger' | 'gray'>('success');\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 /** Disables all actions in the action group globally (e.g. for read-only or permission gates) */\n actionGroupDisabled = input<boolean>(false);\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() || connectionStatusDate() || 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() || connectionStatusDate()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (connectionStatusDate()) {\n <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\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\n [actions]=\"actionGroup()\"\n [maxVisible]=\"actionGroupMaxVisible()\"\n [disabled]=\"actionGroupDisabled()\"\n ></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\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n @if (titleLink()) {\n <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else if (titleHref()) {\n <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </a>\n } @else {\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n }\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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"}
@@ -50,6 +50,11 @@ class DropdownComponent {
50
50
  * @default undefined
51
51
  */
52
52
  this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
53
+ /**
54
+ * Whether the dropdown trigger button is disabled.
55
+ * @default false
56
+ */
57
+ this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
53
58
  /**
54
59
  * Optional tooltip text for the trigger button.
55
60
  */
@@ -74,12 +79,12 @@ class DropdownComponent {
74
79
  this.popover()?.hide();
75
80
  }
76
81
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
77
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DropdownComponent, isStandalone: true, selector: "tk-dropdown", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #trigger>\n <tk-button\n [icon]=\"icon()\"\n [label]=\"label()\"\n [size]=\"size()\"\n [iconPosition]=\"iconPosition()\"\n severity=\"secondary\"\n variant=\"text\"\n (click)=\"toggle($event)\"\n (keydown.enter)=\"toggle($event)\"\n (keydown.space)=\"toggle($event); $event.preventDefault()\"\n ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n </tk-tooltip>\n} @else {\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n <tk-menu\n [model]=\"model()\"\n (itemClick)=\"onItemClick()\"\n ></tk-menu>\n</p-popover>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-dropdown-popover{min-width:200px;overflow:hidden}:host ::ng-deep .tk-dropdown-popover:before,:host ::ng-deep .tk-dropdown-popover:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: MenuComponent, selector: "tk-menu", inputs: ["model", "popup", "appendTo", "variant", "styleClass"], outputs: ["itemClick"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
82
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DropdownComponent, isStandalone: true, selector: "tk-dropdown", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #trigger>\n <tk-button\n [icon]=\"icon()\"\n [label]=\"label()\"\n [size]=\"size()\"\n [iconPosition]=\"iconPosition()\"\n [disabled]=\"disabled()\"\n severity=\"secondary\"\n variant=\"text\"\n (click)=\"toggle($event)\"\n (keydown.enter)=\"toggle($event)\"\n (keydown.space)=\"toggle($event); $event.preventDefault()\"\n ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n </tk-tooltip>\n} @else {\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n <tk-menu\n [model]=\"model()\"\n (itemClick)=\"onItemClick()\"\n ></tk-menu>\n</p-popover>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-dropdown-popover{min-width:200px;overflow:hidden}:host ::ng-deep .tk-dropdown-popover:before,:host ::ng-deep .tk-dropdown-popover:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: MenuComponent, selector: "tk-menu", inputs: ["model", "popup", "appendTo", "variant", "styleClass"], outputs: ["itemClick"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
78
83
  }
79
84
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DropdownComponent, decorators: [{
80
85
  type: Component,
81
- args: [{ selector: 'tk-dropdown', standalone: true, imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #trigger>\n <tk-button\n [icon]=\"icon()\"\n [label]=\"label()\"\n [size]=\"size()\"\n [iconPosition]=\"iconPosition()\"\n severity=\"secondary\"\n variant=\"text\"\n (click)=\"toggle($event)\"\n (keydown.enter)=\"toggle($event)\"\n (keydown.space)=\"toggle($event); $event.preventDefault()\"\n ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n </tk-tooltip>\n} @else {\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n <tk-menu\n [model]=\"model()\"\n (itemClick)=\"onItemClick()\"\n ></tk-menu>\n</p-popover>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-dropdown-popover{min-width:200px;overflow:hidden}:host ::ng-deep .tk-dropdown-popover:before,:host ::ng-deep .tk-dropdown-popover:after{display:none!important}\n"] }]
82
- }], propDecorators: { popover: [{ type: i0.ViewChild, args: ['op', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
86
+ args: [{ selector: 'tk-dropdown', standalone: true, imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #trigger>\n <tk-button\n [icon]=\"icon()\"\n [label]=\"label()\"\n [size]=\"size()\"\n [iconPosition]=\"iconPosition()\"\n [disabled]=\"disabled()\"\n severity=\"secondary\"\n variant=\"text\"\n (click)=\"toggle($event)\"\n (keydown.enter)=\"toggle($event)\"\n (keydown.space)=\"toggle($event); $event.preventDefault()\"\n ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n </tk-tooltip>\n} @else {\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n <tk-menu\n [model]=\"model()\"\n (itemClick)=\"onItemClick()\"\n ></tk-menu>\n</p-popover>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-dropdown-popover{min-width:200px;overflow:hidden}:host ::ng-deep .tk-dropdown-popover:before,:host ::ng-deep .tk-dropdown-popover:after{display:none!important}\n"] }]
87
+ }], propDecorators: { popover: [{ type: i0.ViewChild, args: ['op', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
83
88
 
84
89
  /**
85
90
  * Generated bundle index. Do not edit.
@@ -1 +1 @@
1
- {"version":3,"file":"tekus-design-system-components-dropdown.mjs","sources":["../../../projects/design-system/components/dropdown/src/dropdown.component.ts","../../../projects/design-system/components/dropdown/src/dropdown.component.html","../../../projects/design-system/components/dropdown/tekus-design-system-components-dropdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PopoverModule, Popover } from 'primeng/popover';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { MenuComponent } from '@tekus/design-system/components/menu';\nimport { TooltipComponent, TooltipPosition } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component DropdownComponent\n * @description\n * A dropdown component that acts as a context menu or \"more options\" button.\n * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,\n * and a `tk-menu` for the list of options.\n *\n * @usage\n * ```html\n * <tk-dropdown [model]=\"items\"></tk-dropdown>\n * ```\n */\n@Component({\n selector: 'tk-dropdown',\n standalone: true,\n imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent],\n templateUrl: './dropdown.component.html',\n styleUrl: './dropdown.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownComponent {\n /**\n * Reference to the PrimeNG Popover component instance.\n */\n popover = viewChild<Popover>('op');\n\n /**\n * An array of menu items to display.\n */\n model = input<MenuItem[]>([]);\n\n /**\n * Icon for the trigger button.\n * @default 'ellipsis-vertical'\n */\n icon = input<string>('ellipsis-vertical');\n\n /**\n * Text for the trigger button.\n * If provided, it will be displayed alongside the icon (if any).\n */\n label = input<string | undefined>();\n\n /**\n * Position of the icon relative to the label.\n * @default 'left'\n */\n iconPosition = input<'left' | 'right'>('left');\n\n /**\n * Size of the trigger button.\n * @default undefined\n */\n size = input<'small' | 'large' | undefined>();\n\n /**\n * Optional tooltip text for the trigger button.\n */\n tooltip = input<string | undefined>();\n\n /**\n * Position of the tooltip.\n * @default 'top'\n */\n tooltipPosition = input<TooltipPosition>('top');\n\n /**\n * Toggles the popover visibility.\n * @param event The event that triggered the toggle.\n */\n toggle(event: Event) {\n this.popover()?.toggle(event);\n }\n\n /**\n * Closes the popover when an item is clicked.\n */\n onItemClick() {\n this.popover()?.hide();\n }\n}\n","<ng-template #trigger>\n <tk-button\n [icon]=\"icon()\"\n [label]=\"label()\"\n [size]=\"size()\"\n [iconPosition]=\"iconPosition()\"\n severity=\"secondary\"\n variant=\"text\"\n (click)=\"toggle($event)\"\n (keydown.enter)=\"toggle($event)\"\n (keydown.space)=\"toggle($event); $event.preventDefault()\"\n ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n </tk-tooltip>\n} @else {\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n <tk-menu\n [model]=\"model()\"\n (itemClick)=\"onItemClick()\"\n ></tk-menu>\n</p-popover>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tekus-design-system-components-dropdown.mjs","sources":["../../../projects/design-system/components/dropdown/src/dropdown.component.ts","../../../projects/design-system/components/dropdown/src/dropdown.component.html","../../../projects/design-system/components/dropdown/tekus-design-system-components-dropdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PopoverModule, Popover } from 'primeng/popover';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { MenuComponent } from '@tekus/design-system/components/menu';\nimport { TooltipComponent, TooltipPosition } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component DropdownComponent\n * @description\n * A dropdown component that acts as a context menu or \"more options\" button.\n * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,\n * and a `tk-menu` for the list of options.\n *\n * @usage\n * ```html\n * <tk-dropdown [model]=\"items\"></tk-dropdown>\n * ```\n */\n@Component({\n selector: 'tk-dropdown',\n standalone: true,\n imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent],\n templateUrl: './dropdown.component.html',\n styleUrl: './dropdown.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownComponent {\n /**\n * Reference to the PrimeNG Popover component instance.\n */\n popover = viewChild<Popover>('op');\n\n /**\n * An array of menu items to display.\n */\n model = input<MenuItem[]>([]);\n\n /**\n * Icon for the trigger button.\n * @default 'ellipsis-vertical'\n */\n icon = input<string>('ellipsis-vertical');\n\n /**\n * Text for the trigger button.\n * If provided, it will be displayed alongside the icon (if any).\n */\n label = input<string | undefined>();\n\n /**\n * Position of the icon relative to the label.\n * @default 'left'\n */\n iconPosition = input<'left' | 'right'>('left');\n\n /**\n * Size of the trigger button.\n * @default undefined\n */\n size = input<'small' | 'large' | undefined>();\n\n /**\n * Whether the dropdown trigger button is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Optional tooltip text for the trigger button.\n */\n tooltip = input<string | undefined>();\n\n /**\n * Position of the tooltip.\n * @default 'top'\n */\n tooltipPosition = input<TooltipPosition>('top');\n\n /**\n * Toggles the popover visibility.\n * @param event The event that triggered the toggle.\n */\n toggle(event: Event) {\n this.popover()?.toggle(event);\n }\n\n /**\n * Closes the popover when an item is clicked.\n */\n onItemClick() {\n this.popover()?.hide();\n }\n}\n","<ng-template #trigger>\n <tk-button\n [icon]=\"icon()\"\n [label]=\"label()\"\n [size]=\"size()\"\n [iconPosition]=\"iconPosition()\"\n [disabled]=\"disabled()\"\n severity=\"secondary\"\n variant=\"text\"\n (click)=\"toggle($event)\"\n (keydown.enter)=\"toggle($event)\"\n (keydown.space)=\"toggle($event); $event.preventDefault()\"\n ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n </tk-tooltip>\n} @else {\n <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n <tk-menu\n [model]=\"model()\"\n (itemClick)=\"onItemClick()\"\n ></tk-menu>\n</p-popover>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -165,6 +165,7 @@ class TableComponent {
165
165
  icon: a.icon,
166
166
  label: a.label,
167
167
  action: () => a.action(row),
168
+ disabled: typeof a.disabled === 'function' ? a.disabled(row) : (a.disabled ?? false),
168
169
  })));
169
170
  }
170
171
  return rowCache.get(row);
@@ -382,7 +383,7 @@ class TableComponent {
382
383
  }
383
384
  }
384
385
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
385
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group [actions]=\"getActionGroup(col.actionGroup!, row)\" [maxVisible]=\"col.actionGroupMaxVisible ?? 2\" (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__cell-img{display:block;object-fit:cover}.tk-table__cell-img--clickable{cursor:pointer}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__header-content{display:flex;align-items:center;gap:.25rem;width:100%}.tk-table__header-label{white-space:nowrap}.tk-table__header--active{background-color:var(--tk-primary-100, #b7b0d2)!important}.tk-table__filter-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:var(--tk-border-radius-xs, 4px);cursor:pointer;color:var(--tk-surface-500, #8a8a8b);transition:background-color .2s,color .2s;padding:0;margin-left:auto}.tk-table__filter-trigger:hover{background-color:var(--tk-surface-200, #e4e4e4);color:var(--tk-surface-700, #424243)}.tk-table__filter-trigger--active{color:var(--tk-primary-700, #10004f);background-color:var(--tk-primary-50, #e8e6f1)}.tk-table__filter-trigger--active:hover{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}.tk-table__filter-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:transparent}.tk-table__filter-overlay{position:fixed;z-index:1000;min-width:10rem;max-height:15rem;background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-200, #e4e4e4);border-radius:var(--tk-border-radius-s, 8px);box-shadow:0 4px 16px #0000001f;overflow:hidden;display:flex;flex-direction:column;animation:tk-filter-fade-in .15s ease-out}.tk-table__filter-list{margin:0;padding:.25rem 0;overflow-y:auto;max-height:12rem;display:flex;flex-direction:column}.tk-table__filter-option{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;color:var(--tk-surface-950, #191a1b);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background:transparent;text-align:left}.tk-table__filter-option:hover{background-color:var(--tk-surface-100, #f2f1f1)}.tk-table__filter-option--selected{background-color:var(--tk-primary-50, #e8e6f1);color:var(--tk-primary-700, #10004f);font-weight:600}.tk-table__filter-option--selected:hover{background-color:var(--tk-primary-100, #b7b0d2)}.tk-table__filter-clear{border-top:1px solid var(--tk-surface-200, #e4e4e4);padding:.375rem .75rem;display:flex;justify-content:center}.tk-table__filter-clear-btn{background:transparent;border:none;color:var(--tk-primary-500, #16006f);font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--tk-border-radius-xs, 4px);transition:background-color .15s}.tk-table__filter-clear-btn:hover{background-color:var(--tk-primary-50, #e8e6f1)}:host ::ng-deep .p-datatable-thead>tr>th{position:relative}@keyframes tk-filter-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { 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: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: TimeAgoComponent, selector: "tk-time-ago", inputs: ["dateTime", "severity", "tooltipText", "tooltipFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
386
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group\n [actions]=\"getActionGroup(col.actionGroup!, row)\"\n [maxVisible]=\"col.actionGroupMaxVisible ?? 2\"\n [disabled]=\"col.actionGroupDisabled ?? false\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n ></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__cell-img{display:block;object-fit:cover}.tk-table__cell-img--clickable{cursor:pointer}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__header-content{display:flex;align-items:center;gap:.25rem;width:100%}.tk-table__header-label{white-space:nowrap}.tk-table__header--active{background-color:var(--tk-primary-100, #b7b0d2)!important}.tk-table__filter-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:var(--tk-border-radius-xs, 4px);cursor:pointer;color:var(--tk-surface-500, #8a8a8b);transition:background-color .2s,color .2s;padding:0;margin-left:auto}.tk-table__filter-trigger:hover{background-color:var(--tk-surface-200, #e4e4e4);color:var(--tk-surface-700, #424243)}.tk-table__filter-trigger--active{color:var(--tk-primary-700, #10004f);background-color:var(--tk-primary-50, #e8e6f1)}.tk-table__filter-trigger--active:hover{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}.tk-table__filter-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:transparent}.tk-table__filter-overlay{position:fixed;z-index:1000;min-width:10rem;max-height:15rem;background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-200, #e4e4e4);border-radius:var(--tk-border-radius-s, 8px);box-shadow:0 4px 16px #0000001f;overflow:hidden;display:flex;flex-direction:column;animation:tk-filter-fade-in .15s ease-out}.tk-table__filter-list{margin:0;padding:.25rem 0;overflow-y:auto;max-height:12rem;display:flex;flex-direction:column}.tk-table__filter-option{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;color:var(--tk-surface-950, #191a1b);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background:transparent;text-align:left}.tk-table__filter-option:hover{background-color:var(--tk-surface-100, #f2f1f1)}.tk-table__filter-option--selected{background-color:var(--tk-primary-50, #e8e6f1);color:var(--tk-primary-700, #10004f);font-weight:600}.tk-table__filter-option--selected:hover{background-color:var(--tk-primary-100, #b7b0d2)}.tk-table__filter-clear{border-top:1px solid var(--tk-surface-200, #e4e4e4);padding:.375rem .75rem;display:flex;justify-content:center}.tk-table__filter-clear-btn{background:transparent;border:none;color:var(--tk-primary-500, #16006f);font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--tk-border-radius-xs, 4px);transition:background-color .15s}.tk-table__filter-clear-btn:hover{background-color:var(--tk-primary-50, #e8e6f1)}:host ::ng-deep .p-datatable-thead>tr>th{position:relative}@keyframes tk-filter-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { 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: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: TimeAgoComponent, selector: "tk-time-ago", inputs: ["dateTime", "severity", "tooltipText", "tooltipFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
386
387
  }
387
388
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TableComponent, decorators: [{
388
389
  type: Component,
@@ -396,7 +397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
396
397
  ActionGroupComponent,
397
398
  IconComponent,
398
399
  TimeAgoComponent,
399
- ], template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group [actions]=\"getActionGroup(col.actionGroup!, row)\" [maxVisible]=\"col.actionGroupMaxVisible ?? 2\" (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__cell-img{display:block;object-fit:cover}.tk-table__cell-img--clickable{cursor:pointer}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__header-content{display:flex;align-items:center;gap:.25rem;width:100%}.tk-table__header-label{white-space:nowrap}.tk-table__header--active{background-color:var(--tk-primary-100, #b7b0d2)!important}.tk-table__filter-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:var(--tk-border-radius-xs, 4px);cursor:pointer;color:var(--tk-surface-500, #8a8a8b);transition:background-color .2s,color .2s;padding:0;margin-left:auto}.tk-table__filter-trigger:hover{background-color:var(--tk-surface-200, #e4e4e4);color:var(--tk-surface-700, #424243)}.tk-table__filter-trigger--active{color:var(--tk-primary-700, #10004f);background-color:var(--tk-primary-50, #e8e6f1)}.tk-table__filter-trigger--active:hover{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}.tk-table__filter-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:transparent}.tk-table__filter-overlay{position:fixed;z-index:1000;min-width:10rem;max-height:15rem;background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-200, #e4e4e4);border-radius:var(--tk-border-radius-s, 8px);box-shadow:0 4px 16px #0000001f;overflow:hidden;display:flex;flex-direction:column;animation:tk-filter-fade-in .15s ease-out}.tk-table__filter-list{margin:0;padding:.25rem 0;overflow-y:auto;max-height:12rem;display:flex;flex-direction:column}.tk-table__filter-option{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;color:var(--tk-surface-950, #191a1b);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background:transparent;text-align:left}.tk-table__filter-option:hover{background-color:var(--tk-surface-100, #f2f1f1)}.tk-table__filter-option--selected{background-color:var(--tk-primary-50, #e8e6f1);color:var(--tk-primary-700, #10004f);font-weight:600}.tk-table__filter-option--selected:hover{background-color:var(--tk-primary-100, #b7b0d2)}.tk-table__filter-clear{border-top:1px solid var(--tk-surface-200, #e4e4e4);padding:.375rem .75rem;display:flex;justify-content:center}.tk-table__filter-clear-btn{background:transparent;border:none;color:var(--tk-primary-500, #16006f);font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--tk-border-radius-xs, 4px);transition:background-color .15s}.tk-table__filter-clear-btn:hover{background-color:var(--tk-primary-50, #e8e6f1)}:host ::ng-deep .p-datatable-thead>tr>th{position:relative}@keyframes tk-filter-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
400
+ ], template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group\n [actions]=\"getActionGroup(col.actionGroup!, row)\"\n [maxVisible]=\"col.actionGroupMaxVisible ?? 2\"\n [disabled]=\"col.actionGroupDisabled ?? false\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n ></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__cell-img{display:block;object-fit:cover}.tk-table__cell-img--clickable{cursor:pointer}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__header-content{display:flex;align-items:center;gap:.25rem;width:100%}.tk-table__header-label{white-space:nowrap}.tk-table__header--active{background-color:var(--tk-primary-100, #b7b0d2)!important}.tk-table__filter-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:var(--tk-border-radius-xs, 4px);cursor:pointer;color:var(--tk-surface-500, #8a8a8b);transition:background-color .2s,color .2s;padding:0;margin-left:auto}.tk-table__filter-trigger:hover{background-color:var(--tk-surface-200, #e4e4e4);color:var(--tk-surface-700, #424243)}.tk-table__filter-trigger--active{color:var(--tk-primary-700, #10004f);background-color:var(--tk-primary-50, #e8e6f1)}.tk-table__filter-trigger--active:hover{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}.tk-table__filter-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:transparent}.tk-table__filter-overlay{position:fixed;z-index:1000;min-width:10rem;max-height:15rem;background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-200, #e4e4e4);border-radius:var(--tk-border-radius-s, 8px);box-shadow:0 4px 16px #0000001f;overflow:hidden;display:flex;flex-direction:column;animation:tk-filter-fade-in .15s ease-out}.tk-table__filter-list{margin:0;padding:.25rem 0;overflow-y:auto;max-height:12rem;display:flex;flex-direction:column}.tk-table__filter-option{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;color:var(--tk-surface-950, #191a1b);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background:transparent;text-align:left}.tk-table__filter-option:hover{background-color:var(--tk-surface-100, #f2f1f1)}.tk-table__filter-option--selected{background-color:var(--tk-primary-50, #e8e6f1);color:var(--tk-primary-700, #10004f);font-weight:600}.tk-table__filter-option--selected:hover{background-color:var(--tk-primary-100, #b7b0d2)}.tk-table__filter-clear{border-top:1px solid var(--tk-surface-200, #e4e4e4);padding:.375rem .75rem;display:flex;justify-content:center}.tk-table__filter-clear-btn{background:transparent;border:none;color:var(--tk-primary-500, #16006f);font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--tk-border-radius-xs, 4px);transition:background-color .15s}.tk-table__filter-clear-btn:hover{background-color:var(--tk-primary-50, #e8e6f1)}:host ::ng-deep .p-datatable-thead>tr>th{position:relative}@keyframes tk-filter-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
400
401
  }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], tableRef: [{ type: i0.ViewChild, args: ['tableRef', { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }] } });
401
402
 
402
403
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"tekus-design-system-components-table.mjs","sources":["../../../projects/design-system/components/table/src/table.component.ts","../../../projects/design-system/components/table/src/table.component.html","../../../projects/design-system/components/table/tekus-design-system-components-table.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n input,\n model,\n signal,\n viewChild,\n} from '@angular/core';\nimport { Table, TableModule } from 'primeng/table';\nimport { TagModule } from 'primeng/tag';\nimport { ButtonModule } from 'primeng/button';\nimport { TableColumn } from './table.interface';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { SortEvent } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport {\n ActionGroupComponent,\n TkAction,\n} from '@tekus/design-system/components/action-group';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { TimeAgoComponent } from '@tekus/design-system/components/time-ago';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-table',\n imports: [\n TableModule,\n TagModule,\n ButtonModule,\n TagComponent,\n ButtonComponent,\n CheckboxComponent,\n ActionGroupComponent,\n IconComponent,\n TimeAgoComponent,\n ],\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n})\n/**\n * @component TableComponent\n * @description\n * Generic table wrapper around PrimeNG Table component.\n * Displays tabular data with configurable columns and support for custom rendering via template.\n *\n * @usage\n * ```html\n * <tk-table [data]=\"items\" [columns]=\"columnConfig\"></tk-table>\n * ```\n */\nexport class TableComponent<T = unknown> {\n /**\n * @property {InputSignal<T[]>} data\n * @description\n * Array of data objects to display in the table rows.\n * Each object corresponds to one row; properties are mapped to columns via the `columns` input.\n *\n * @default []\n *\n * @example\n * [data]=\"[\n * { id: 1, name: 'John', status: 'active' },\n * { id: 2, name: 'Jane', status: 'inactive' }\n * ]\"\n */\n data = input<T[]>([]);\n\n /**\n * @property {viewChild} tableRef\n * @description\n * Reference to the PrimeNG Table component instance.\n * Used to access table methods and properties directly.\n */\n readonly tableRef = viewChild<Table>('tableRef');\n\n /**\n * @property {InputSignal<TableColumn<T>[]>} columns\n * @description\n * Array of column definitions that describe how to render each column.\n * Each column object specifies the field name, header label, and optional rendering behavior.\n *\n * @default []\n *\n * @example\n * [columns]=\"[\n * { field: 'id', header: 'ID' },\n * { field: 'name', header: 'Name' },\n * { field: 'status', header: 'Status', renderAs: 'tag' }\n * ]\"\n */\n columns = input<TableColumn<T>[]>([]);\n\n /**\n * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode\n * @description\n * Selection mode of the table.\n */\n selectionMode = input<'single' | 'multiple' | undefined>(undefined);\n\n /**\n * @property {ModelSignal<any[]>} selection\n * @description\n * Selected row(s) in the table.\n */\n selection = model<T[]>([]);\n\n /**\n * @property {InputSignal<string | undefined>} dataKey\n * @description\n * Property name to uniquely identify a row.\n */\n dataKey = input<string | undefined>(undefined);\n\n readonly initialData = signal<T[]>([]);\n readonly internalData = signal<T[]>([]);\n readonly isSorted = signal<boolean | null>(null);\n\n /** Tracks which column's filter overlay is currently open */\n readonly activeFilterColumn = signal<string | null>(null);\n\n /** Stores the selected filter value per column field (null = no filter) */\n readonly columnFilters = signal<Record<string, string | null>>({});\n\n /** Position of the filter overlay (fixed, relative to viewport) */\n readonly filterOverlayPosition = signal<{ top: number; left: number }>({\n top: 0,\n left: 0,\n });\n\n /**\n * @computed isAllSelected\n * @description\n * Returns true if all visible rows are selected.\n */\n isAllSelected = computed(() => {\n const data = this.internalData();\n const selected = this.selection();\n if (data.length === 0 || selected.length === 0) return false;\n\n // We strictly use full objects for selection now.\n return data.every(row => selected.includes(row));\n });\n\n /**\n * @computed isPartiallySelected\n * @description\n * Returns true if some but not all rows are selected.\n */\n isPartiallySelected = computed(() => {\n const data = this.internalData();\n const selected = this.selection();\n if (data.length === 0 || selected.length === 0) return false;\n\n const allSelected = this.isAllSelected();\n return !allSelected && selected.length > 0;\n });\n\n constructor() {\n /**\n * @effect data → initialData sync\n * @description\n * Whenever the data input changes, update initialData and reset sort state.\n */\n effect(() => {\n this.internalData.set([...this.data()]);\n this.initialData.set([...this.data()]);\n });\n }\n\n /**\n * @method toggleAll\n * @description\n * Toggles selection of all visible rows using full objects.\n * @param checked {unknown}\n */\n toggleAll(checked: unknown) {\n if (checked) {\n this.selection.set([...this.internalData()]);\n } else {\n this.selection.set([]);\n }\n }\n\n /**\n * @method updateSelection\n * @description\n * Updates row selection state from checkbox interaction.\n * @param value {any[]}\n */\n updateSelection(value: T[]) {\n this.selection.set([...value]);\n }\n\n private readonly actionGroupCache = new Map<\n unknown,\n Map<unknown, TkAction[]>\n >();\n\n getActionGroup(\n actions: NonNullable<TableColumn<T>['actionGroup']>,\n row: T\n ): TkAction[] {\n if (!actions) return [];\n if (!this.actionGroupCache.has(actions)) {\n this.actionGroupCache.set(actions, new Map());\n }\n const rowCache = this.actionGroupCache.get(actions)!;\n if (!rowCache.has(row)) {\n rowCache.set(\n row,\n actions.map(a => ({\n icon: a.icon,\n label: a.label,\n action: () => a.action(row),\n }))\n );\n }\n return rowCache.get(row)!;\n }\n\n customSort(event: SortEvent) {\n if (this.isSorted() === null || this.isSorted() === undefined) {\n this.isSorted.set(true);\n this.sortTableData(event);\n } else if (this.isSorted()) {\n this.isSorted.set(false);\n this.sortTableData(event);\n } else {\n this.isSorted.set(null);\n // Reset to filtered data (not initialData) so active filters are preserved\n this.internalData.set(this.getFilteredData());\n this.tableRef()?.reset();\n }\n }\n\n sortTableData(event: SortEvent) {\n if (!event.data || !event.field) return;\n\n event.data.sort((data1, data2) => {\n const value1 = data1[event.field!];\n const value2 = data2[event.field!];\n let result = null;\n if (value1 == null && value2 != null) result = -1;\n else if (value1 != null && value2 == null) result = 1;\n else if (value1 == null && value2 == null) result = 0;\n else if (typeof value1 === 'string' && typeof value2 === 'string')\n result = value1.localeCompare(value2);\n else if (value1 < value2) {\n result = -1;\n } else if (value1 > value2) {\n result = 1;\n } else {\n result = 0;\n }\n\n return (event.order ?? 1) * result;\n });\n }\n\n // ─── Filter Methods ───────────────────────────────────────────────────────────\n\n /**\n * @method toggleFilterOverlay\n * @description\n * Opens or closes the filter overlay for a given column.\n * Captures the trigger button position to render the overlay in fixed position.\n */\n toggleFilterOverlay(field: string, event: MouseEvent): void {\n event.stopPropagation();\n if (this.activeFilterColumn() === field) {\n this.activeFilterColumn.set(null);\n } else {\n const trigger = event.currentTarget as HTMLElement;\n const rect = trigger.getBoundingClientRect();\n this.filterOverlayPosition.set({\n top: rect.bottom + 4,\n left: rect.left,\n });\n this.activeFilterColumn.set(field);\n }\n }\n\n /**\n * @method closeFilterOverlay\n * @description\n * Closes the filter overlay.\n */\n closeFilterOverlay(): void {\n this.activeFilterColumn.set(null);\n }\n\n /**\n * @method getUniqueColumnValues\n * @description\n * Returns the unique values for a given column, considering active filters\n * on other columns. This ensures the list only shows values that exist\n * in the currently filtered dataset.\n */\n getUniqueColumnValues(field: string): string[] {\n const filters = this.columnFilters();\n let data = [...this.initialData()];\n\n // Apply all filters EXCEPT the one for the current field\n for (const filterField of Object.keys(filters)) {\n if (filterField === field) continue;\n const selectedValue = filters[filterField];\n if (selectedValue == null) continue;\n\n data = data.filter(row => {\n const cellValue = (row as Record<string, unknown>)[filterField];\n return (\n cellValue != null && this.cellToString(cellValue) === selectedValue\n );\n });\n }\n\n const values = data\n .map(row => (row as Record<string, unknown>)[field])\n .filter(\n (v): v is string | number | boolean =>\n v != null && typeof v !== 'object'\n )\n .map(String);\n\n return [...new Set(values)].sort((a, b) => a.localeCompare(b));\n }\n\n /**\n * @method selectFilterValue\n * @description\n * Selects a value from the filter list and applies the filter.\n */\n selectFilterValue(field: string, value: string): void {\n const filters = { ...this.columnFilters() };\n filters[field] = value;\n this.columnFilters.set(filters);\n this.applyAllFilters();\n this.activeFilterColumn.set(null);\n }\n\n /**\n * @method clearFilter\n * @description\n * Clears the filter for a specific column and re-applies remaining filters.\n */\n clearFilter(field: string): void {\n const filters = { ...this.columnFilters() };\n delete filters[field];\n this.columnFilters.set(filters);\n this.applyAllFilters();\n this.activeFilterColumn.set(null);\n }\n\n /**\n * @method isColumnFiltered\n * @description\n * Returns whether a column currently has an active filter.\n */\n isColumnFiltered(field: string): boolean {\n return this.columnFilters()[field] != null;\n }\n\n /**\n * @method getActiveFilterValue\n * @description\n * Returns the currently selected filter value for a column, or null.\n */\n getActiveFilterValue(field: string): string | null {\n return this.columnFilters()[field] ?? null;\n }\n\n /**\n * @method applyAllFilters\n * @description\n * Applies all active column filters to the initial data set.\n */\n private applyAllFilters(): void {\n this.internalData.set(this.getFilteredData());\n }\n\n /**\n * @method getFilteredData\n * @description\n * Returns the initial data filtered by all active column filters.\n * Used by both applyAllFilters and customSort (reset) to ensure\n * sorting never discards active filters.\n */\n private getFilteredData(): T[] {\n const filters = this.columnFilters();\n let filtered = [...this.initialData()];\n\n for (const field of Object.keys(filters)) {\n const selectedValue = filters[field];\n if (selectedValue == null) continue;\n\n filtered = filtered.filter(row => {\n const cellValue = (row as Record<string, unknown>)[field];\n return (\n cellValue != null && this.cellToString(cellValue) === selectedValue\n );\n });\n }\n\n return filtered;\n }\n\n /**\n * @method cellToString\n * @description\n * Safely converts a cell value to its string representation.\n * Handles primitives directly and avoids [object Object] for complex types.\n */\n private cellToString(value: unknown): string {\n if (typeof value === 'string') return value;\n if (typeof value === 'number' || typeof value === 'boolean')\n return `${value}`;\n return JSON.stringify(value);\n }\n\n /**\n * @method handleImageClick\n * @description\n * Handles click events on image-type cells.\n * Stops row selection propagation and invokes the column's imageAction callback when defined.\n * No-op when imageAction is not set, preserving default row-click behavior.\n * @param event {Event} - The native click event.\n * @param col {TableColumn<T>} - The column definition that may carry an imageAction.\n * @param row {T} - The data row associated with the clicked image.\n */\n handleImageClick(event: Event, col: TableColumn<T>, row: T): void {\n if (col.imageAction) {\n event.stopPropagation();\n col.imageAction(row);\n }\n }\n\n /**\n * @method onImageError\n * @description\n * Handles image load errors by replacing the broken src with a fallback URL.\n * Called from the template's (error) binding on image-type columns.\n * @param event {Event} - The native error event from the <img> element.\n * @param fallback {string | undefined} - Optional URL to use as replacement src.\n */\n onImageError(event: Event, fallback?: string): void {\n if (fallback) {\n (event.target as HTMLImageElement).src = fallback;\n }\n }\n}\n","<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group [actions]=\"getActionGroup(col.actionGroup!, row)\" [maxVisible]=\"col.actionGroupMaxVisible ?? 2\" (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tekus-design-system-components-table.mjs","sources":["../../../projects/design-system/components/table/src/table.component.ts","../../../projects/design-system/components/table/src/table.component.html","../../../projects/design-system/components/table/tekus-design-system-components-table.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n input,\n model,\n signal,\n viewChild,\n} from '@angular/core';\nimport { Table, TableModule } from 'primeng/table';\nimport { TagModule } from 'primeng/tag';\nimport { ButtonModule } from 'primeng/button';\nimport { TableColumn } from './table.interface';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { SortEvent } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport {\n ActionGroupComponent,\n TkAction,\n} from '@tekus/design-system/components/action-group';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { TimeAgoComponent } from '@tekus/design-system/components/time-ago';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-table',\n imports: [\n TableModule,\n TagModule,\n ButtonModule,\n TagComponent,\n ButtonComponent,\n CheckboxComponent,\n ActionGroupComponent,\n IconComponent,\n TimeAgoComponent,\n ],\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n})\n/**\n * @component TableComponent\n * @description\n * Generic table wrapper around PrimeNG Table component.\n * Displays tabular data with configurable columns and support for custom rendering via template.\n *\n * @usage\n * ```html\n * <tk-table [data]=\"items\" [columns]=\"columnConfig\"></tk-table>\n * ```\n */\nexport class TableComponent<T = unknown> {\n /**\n * @property {InputSignal<T[]>} data\n * @description\n * Array of data objects to display in the table rows.\n * Each object corresponds to one row; properties are mapped to columns via the `columns` input.\n *\n * @default []\n *\n * @example\n * [data]=\"[\n * { id: 1, name: 'John', status: 'active' },\n * { id: 2, name: 'Jane', status: 'inactive' }\n * ]\"\n */\n data = input<T[]>([]);\n\n /**\n * @property {viewChild} tableRef\n * @description\n * Reference to the PrimeNG Table component instance.\n * Used to access table methods and properties directly.\n */\n readonly tableRef = viewChild<Table>('tableRef');\n\n /**\n * @property {InputSignal<TableColumn<T>[]>} columns\n * @description\n * Array of column definitions that describe how to render each column.\n * Each column object specifies the field name, header label, and optional rendering behavior.\n *\n * @default []\n *\n * @example\n * [columns]=\"[\n * { field: 'id', header: 'ID' },\n * { field: 'name', header: 'Name' },\n * { field: 'status', header: 'Status', renderAs: 'tag' }\n * ]\"\n */\n columns = input<TableColumn<T>[]>([]);\n\n /**\n * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode\n * @description\n * Selection mode of the table.\n */\n selectionMode = input<'single' | 'multiple' | undefined>(undefined);\n\n /**\n * @property {ModelSignal<any[]>} selection\n * @description\n * Selected row(s) in the table.\n */\n selection = model<T[]>([]);\n\n /**\n * @property {InputSignal<string | undefined>} dataKey\n * @description\n * Property name to uniquely identify a row.\n */\n dataKey = input<string | undefined>(undefined);\n\n readonly initialData = signal<T[]>([]);\n readonly internalData = signal<T[]>([]);\n readonly isSorted = signal<boolean | null>(null);\n\n /** Tracks which column's filter overlay is currently open */\n readonly activeFilterColumn = signal<string | null>(null);\n\n /** Stores the selected filter value per column field (null = no filter) */\n readonly columnFilters = signal<Record<string, string | null>>({});\n\n /** Position of the filter overlay (fixed, relative to viewport) */\n readonly filterOverlayPosition = signal<{ top: number; left: number }>({\n top: 0,\n left: 0,\n });\n\n /**\n * @computed isAllSelected\n * @description\n * Returns true if all visible rows are selected.\n */\n isAllSelected = computed(() => {\n const data = this.internalData();\n const selected = this.selection();\n if (data.length === 0 || selected.length === 0) return false;\n\n // We strictly use full objects for selection now.\n return data.every(row => selected.includes(row));\n });\n\n /**\n * @computed isPartiallySelected\n * @description\n * Returns true if some but not all rows are selected.\n */\n isPartiallySelected = computed(() => {\n const data = this.internalData();\n const selected = this.selection();\n if (data.length === 0 || selected.length === 0) return false;\n\n const allSelected = this.isAllSelected();\n return !allSelected && selected.length > 0;\n });\n\n constructor() {\n /**\n * @effect data → initialData sync\n * @description\n * Whenever the data input changes, update initialData and reset sort state.\n */\n effect(() => {\n this.internalData.set([...this.data()]);\n this.initialData.set([...this.data()]);\n });\n }\n\n /**\n * @method toggleAll\n * @description\n * Toggles selection of all visible rows using full objects.\n * @param checked {unknown}\n */\n toggleAll(checked: unknown) {\n if (checked) {\n this.selection.set([...this.internalData()]);\n } else {\n this.selection.set([]);\n }\n }\n\n /**\n * @method updateSelection\n * @description\n * Updates row selection state from checkbox interaction.\n * @param value {any[]}\n */\n updateSelection(value: T[]) {\n this.selection.set([...value]);\n }\n\n private readonly actionGroupCache = new Map<\n unknown,\n Map<unknown, TkAction[]>\n >();\n\n getActionGroup(\n actions: NonNullable<TableColumn<T>['actionGroup']>,\n row: T\n ): TkAction[] {\n if (!actions) return [];\n if (!this.actionGroupCache.has(actions)) {\n this.actionGroupCache.set(actions, new Map());\n }\n const rowCache = this.actionGroupCache.get(actions)!;\n if (!rowCache.has(row)) {\n rowCache.set(\n row,\n actions.map(a => ({\n icon: a.icon,\n label: a.label,\n action: () => a.action(row),\n disabled: typeof a.disabled === 'function' ? a.disabled(row) : (a.disabled ?? false),\n }))\n );\n }\n return rowCache.get(row)!;\n }\n\n customSort(event: SortEvent) {\n if (this.isSorted() === null || this.isSorted() === undefined) {\n this.isSorted.set(true);\n this.sortTableData(event);\n } else if (this.isSorted()) {\n this.isSorted.set(false);\n this.sortTableData(event);\n } else {\n this.isSorted.set(null);\n // Reset to filtered data (not initialData) so active filters are preserved\n this.internalData.set(this.getFilteredData());\n this.tableRef()?.reset();\n }\n }\n\n sortTableData(event: SortEvent) {\n if (!event.data || !event.field) return;\n\n event.data.sort((data1, data2) => {\n const value1 = data1[event.field!];\n const value2 = data2[event.field!];\n let result = null;\n if (value1 == null && value2 != null) result = -1;\n else if (value1 != null && value2 == null) result = 1;\n else if (value1 == null && value2 == null) result = 0;\n else if (typeof value1 === 'string' && typeof value2 === 'string')\n result = value1.localeCompare(value2);\n else if (value1 < value2) {\n result = -1;\n } else if (value1 > value2) {\n result = 1;\n } else {\n result = 0;\n }\n\n return (event.order ?? 1) * result;\n });\n }\n\n // ─── Filter Methods ───────────────────────────────────────────────────────────\n\n /**\n * @method toggleFilterOverlay\n * @description\n * Opens or closes the filter overlay for a given column.\n * Captures the trigger button position to render the overlay in fixed position.\n */\n toggleFilterOverlay(field: string, event: MouseEvent): void {\n event.stopPropagation();\n if (this.activeFilterColumn() === field) {\n this.activeFilterColumn.set(null);\n } else {\n const trigger = event.currentTarget as HTMLElement;\n const rect = trigger.getBoundingClientRect();\n this.filterOverlayPosition.set({\n top: rect.bottom + 4,\n left: rect.left,\n });\n this.activeFilterColumn.set(field);\n }\n }\n\n /**\n * @method closeFilterOverlay\n * @description\n * Closes the filter overlay.\n */\n closeFilterOverlay(): void {\n this.activeFilterColumn.set(null);\n }\n\n /**\n * @method getUniqueColumnValues\n * @description\n * Returns the unique values for a given column, considering active filters\n * on other columns. This ensures the list only shows values that exist\n * in the currently filtered dataset.\n */\n getUniqueColumnValues(field: string): string[] {\n const filters = this.columnFilters();\n let data = [...this.initialData()];\n\n // Apply all filters EXCEPT the one for the current field\n for (const filterField of Object.keys(filters)) {\n if (filterField === field) continue;\n const selectedValue = filters[filterField];\n if (selectedValue == null) continue;\n\n data = data.filter(row => {\n const cellValue = (row as Record<string, unknown>)[filterField];\n return (\n cellValue != null && this.cellToString(cellValue) === selectedValue\n );\n });\n }\n\n const values = data\n .map(row => (row as Record<string, unknown>)[field])\n .filter(\n (v): v is string | number | boolean =>\n v != null && typeof v !== 'object'\n )\n .map(String);\n\n return [...new Set(values)].sort((a, b) => a.localeCompare(b));\n }\n\n /**\n * @method selectFilterValue\n * @description\n * Selects a value from the filter list and applies the filter.\n */\n selectFilterValue(field: string, value: string): void {\n const filters = { ...this.columnFilters() };\n filters[field] = value;\n this.columnFilters.set(filters);\n this.applyAllFilters();\n this.activeFilterColumn.set(null);\n }\n\n /**\n * @method clearFilter\n * @description\n * Clears the filter for a specific column and re-applies remaining filters.\n */\n clearFilter(field: string): void {\n const filters = { ...this.columnFilters() };\n delete filters[field];\n this.columnFilters.set(filters);\n this.applyAllFilters();\n this.activeFilterColumn.set(null);\n }\n\n /**\n * @method isColumnFiltered\n * @description\n * Returns whether a column currently has an active filter.\n */\n isColumnFiltered(field: string): boolean {\n return this.columnFilters()[field] != null;\n }\n\n /**\n * @method getActiveFilterValue\n * @description\n * Returns the currently selected filter value for a column, or null.\n */\n getActiveFilterValue(field: string): string | null {\n return this.columnFilters()[field] ?? null;\n }\n\n /**\n * @method applyAllFilters\n * @description\n * Applies all active column filters to the initial data set.\n */\n private applyAllFilters(): void {\n this.internalData.set(this.getFilteredData());\n }\n\n /**\n * @method getFilteredData\n * @description\n * Returns the initial data filtered by all active column filters.\n * Used by both applyAllFilters and customSort (reset) to ensure\n * sorting never discards active filters.\n */\n private getFilteredData(): T[] {\n const filters = this.columnFilters();\n let filtered = [...this.initialData()];\n\n for (const field of Object.keys(filters)) {\n const selectedValue = filters[field];\n if (selectedValue == null) continue;\n\n filtered = filtered.filter(row => {\n const cellValue = (row as Record<string, unknown>)[field];\n return (\n cellValue != null && this.cellToString(cellValue) === selectedValue\n );\n });\n }\n\n return filtered;\n }\n\n /**\n * @method cellToString\n * @description\n * Safely converts a cell value to its string representation.\n * Handles primitives directly and avoids [object Object] for complex types.\n */\n private cellToString(value: unknown): string {\n if (typeof value === 'string') return value;\n if (typeof value === 'number' || typeof value === 'boolean')\n return `${value}`;\n return JSON.stringify(value);\n }\n\n /**\n * @method handleImageClick\n * @description\n * Handles click events on image-type cells.\n * Stops row selection propagation and invokes the column's imageAction callback when defined.\n * No-op when imageAction is not set, preserving default row-click behavior.\n * @param event {Event} - The native click event.\n * @param col {TableColumn<T>} - The column definition that may carry an imageAction.\n * @param row {T} - The data row associated with the clicked image.\n */\n handleImageClick(event: Event, col: TableColumn<T>, row: T): void {\n if (col.imageAction) {\n event.stopPropagation();\n col.imageAction(row);\n }\n }\n\n /**\n * @method onImageError\n * @description\n * Handles image load errors by replacing the broken src with a fallback URL.\n * Called from the template's (error) binding on image-type columns.\n * @param event {Event} - The native error event from the <img> element.\n * @param fallback {string | undefined} - Optional URL to use as replacement src.\n */\n onImageError(event: Event, fallback?: string): void {\n if (fallback) {\n (event.target as HTMLImageElement).src = fallback;\n }\n }\n}\n","<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group\n [actions]=\"getActionGroup(col.actionGroup!, row)\"\n [maxVisible]=\"col.actionGroupMaxVisible ?? 2\"\n [disabled]=\"col.actionGroupDisabled ?? false\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n ></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tekus/design-system",
3
3
  "description": "Tekus design system library",
4
- "version": "5.32.0",
4
+ "version": "5.33.0",
5
5
  "license": "UNLICENSED",
6
6
  "peerDependencies": {
7
7
  "@angular/core": "^21.0.0",
@@ -14,6 +14,11 @@ interface TkAction {
14
14
  * The function to execute when the action is triggered.
15
15
  */
16
16
  action: () => void;
17
+ /**
18
+ * Whether this specific action is disabled.
19
+ * Takes effect independently of the component-level `disabled` input.
20
+ */
21
+ disabled?: boolean;
17
22
  }
18
23
 
19
24
  /**
@@ -38,6 +43,12 @@ declare class ActionGroupComponent {
38
43
  * @default 2
39
44
  */
40
45
  maxVisible: _angular_core.InputSignal<number>;
46
+ /**
47
+ * Disables all actions in the group.
48
+ * Individual actions can also be disabled via `TkAction.disabled`.
49
+ * @default false
50
+ */
51
+ disabled: _angular_core.InputSignal<boolean>;
41
52
  /**
42
53
  * The subset of actions to display directly as buttons.
43
54
  */
@@ -48,7 +59,7 @@ declare class ActionGroupComponent {
48
59
  */
49
60
  overflowMenuItems: _angular_core.Signal<MenuItem[]>;
50
61
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionGroupComponent, never>;
51
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionGroupComponent, "tk-action-group", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "maxVisible": { "alias": "maxVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
62
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionGroupComponent, "tk-action-group", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "maxVisible": { "alias": "maxVisible"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
52
63
  }
53
64
 
54
65
  export { ActionGroupComponent };
@@ -77,6 +77,8 @@ declare class CardComponent {
77
77
  actionGroup: _angular_core.InputSignal<TkAction[]>;
78
78
  /** Maximum number of actions to show as buttons before dropping into menu (used with actionGroup) */
79
79
  actionGroupMaxVisible: _angular_core.InputSignal<number>;
80
+ /** Disables all actions in the action group globally (e.g. for read-only or permission gates) */
81
+ actionGroupDisabled: _angular_core.InputSignal<boolean>;
80
82
  /** Dynamic list of informational elements (tags, progress bars, etc.). */
81
83
  infoElements: _angular_core.InputSignal<TkCardInfoElement[]>;
82
84
  /**
@@ -101,7 +103,7 @@ declare class CardComponent {
101
103
  */
102
104
  getStatusBarSeverity(severity?: string): 'primary' | 'secondary' | 'success' | 'error';
103
105
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
104
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "tk-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "titleHref": { "alias": "titleHref"; "required": false; "isSignal": true; }; "titleIcon": { "alias": "titleIcon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "showImage": { "alias": "showImage"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "secondaryBadgeText": { "alias": "secondaryBadgeText"; "required": false; "isSignal": true; }; "connectionStatusDate": { "alias": "connectionStatusDate"; "required": false; "isSignal": true; }; "connectionStatusSeverity": { "alias": "connectionStatusSeverity"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionGroup": { "alias": "actionGroup"; "required": false; "isSignal": true; }; "actionGroupMaxVisible": { "alias": "actionGroupMaxVisible"; "required": false; "isSignal": true; }; "infoElements": { "alias": "infoElements"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
106
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "tk-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "titleHref": { "alias": "titleHref"; "required": false; "isSignal": true; }; "titleIcon": { "alias": "titleIcon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "showImage": { "alias": "showImage"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "secondaryBadgeText": { "alias": "secondaryBadgeText"; "required": false; "isSignal": true; }; "connectionStatusDate": { "alias": "connectionStatusDate"; "required": false; "isSignal": true; }; "connectionStatusSeverity": { "alias": "connectionStatusSeverity"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionGroup": { "alias": "actionGroup"; "required": false; "isSignal": true; }; "actionGroupMaxVisible": { "alias": "actionGroupMaxVisible"; "required": false; "isSignal": true; }; "actionGroupDisabled": { "alias": "actionGroupDisabled"; "required": false; "isSignal": true; }; "infoElements": { "alias": "infoElements"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
105
107
  }
106
108
 
107
109
  export { CardComponent };
@@ -44,6 +44,11 @@ declare class DropdownComponent {
44
44
  * @default undefined
45
45
  */
46
46
  size: _angular_core.InputSignal<"small" | "large" | undefined>;
47
+ /**
48
+ * Whether the dropdown trigger button is disabled.
49
+ * @default false
50
+ */
51
+ disabled: _angular_core.InputSignal<boolean>;
47
52
  /**
48
53
  * Optional tooltip text for the trigger button.
49
54
  */
@@ -63,7 +68,7 @@ declare class DropdownComponent {
63
68
  */
64
69
  onItemClick(): void;
65
70
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
66
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tk-dropdown", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
71
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tk-dropdown", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
67
72
  }
68
73
 
69
74
  export { DropdownComponent };
@@ -23,8 +23,10 @@ interface TableColumn<T = unknown> {
23
23
  icon: string;
24
24
  label: string;
25
25
  action: (row: T) => void;
26
+ disabled?: boolean | ((row: T) => boolean);
26
27
  }>;
27
28
  actionGroupMaxVisible?: number;
29
+ actionGroupDisabled?: boolean;
28
30
  imageAlt?: (row: T) => string;
29
31
  imageWidth?: string;
30
32
  imageHeight?: string;