@tekus/design-system 5.39.0 → 5.41.0

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

@@ -111,11 +111,11 @@ class PanelComponent {
         this.toggled.emit({ collapsed: newState });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content-wrapper{min-width:0}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity", "overlay"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"] }]
+            args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content-wrapper{min-width:0}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n *   header=\"Panel Title\"\n *   [toggleable]=\"true\"\n *   [(collapsed)]=\"isCollapsed\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n  templateUrl: './panel.component.html',\n  styleUrl: './panel.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   *\n   * @default undefined\n   */\n  header = input<string>();\n\n  /**\n   * @property {string | number} badge\n   * @description\n   * Optional badge value to display in the header.\n   *\n   * @default undefined\n   */\n  badge = input<string | number>();\n\n  /**\n   * @property {BadgeSeverity} badgeSeverity\n   * @description\n   * Severity of the badge.\n   *\n   * @default 'danger'\n   */\n  badgeSeverity = input<BadgeSeverity>('danger');\n\n  /**\n   * @property {string} helpIcon\n   * @description\n   * The name of the icon to display for information/help.\n   *\n   * @default 'circle-question'\n   */\n  helpIcon = input<string>('circle-question');\n\n  /**\n   * @property {string} helpText\n   * @description\n   * Optional help text to display as a tooltip on a help icon in the header.\n   *\n   * @default undefined\n   */\n  helpText = input<string>();\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   *\n   * @default false\n   */\n  toggleable = input<boolean>(false);\n\n  /**\n   * @property {ModelSignal<boolean>} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding via [(collapsed)].\n   *\n   * @default false\n   */\n  collapsed = model<boolean>(false);\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   *\n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  toggled = output<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   *\n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed?: boolean }): void {\n    const newState = event.collapsed ?? this.collapsed();\n    this.toggled.emit({ collapsed: newState });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n *   header=\"Panel Title\"\n *   [toggleable]=\"true\"\n *   [(collapsed)]=\"isCollapsed\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n  templateUrl: './panel.component.html',\n  styleUrl: './panel.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   *\n   * @default undefined\n   */\n  header = input<string>();\n\n  /**\n   * @property {string | number} badge\n   * @description\n   * Optional badge value to display in the header.\n   *\n   * @default undefined\n   */\n  badge = input<string | number>();\n\n  /**\n   * @property {BadgeSeverity} badgeSeverity\n   * @description\n   * Severity of the badge.\n   *\n   * @default 'danger'\n   */\n  badgeSeverity = input<BadgeSeverity>('danger');\n\n  /**\n   * @property {string} helpIcon\n   * @description\n   * The name of the icon to display for information/help.\n   *\n   * @default 'circle-question'\n   */\n  helpIcon = input<string>('circle-question');\n\n  /**\n   * @property {string} helpText\n   * @description\n   * Optional help text to display as a tooltip on a help icon in the header.\n   *\n   * @default undefined\n   */\n  helpText = input<string>();\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   *\n   * @default false\n   */\n  toggleable = input<boolean>(false);\n\n  /**\n   * @property {ModelSignal<boolean>} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding via [(collapsed)].\n   *\n   * @default false\n   */\n  collapsed = model<boolean>(false);\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   *\n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  toggled = output<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   *\n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed?: boolean }): void {\n    const newState = event.collapsed ?? this.collapsed();\n    this.toggled.emit({ collapsed: newState });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;QACH,IAAA,CAAA,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAExB;;;;;;AAMG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAmB;AAEhC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAgB,QAAQ,oFAAC;AAE9C;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,iBAAiB,+EAAC;AAE3C;;;;;;AAMG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE1B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;AAElC;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;AAEjC;;;;;;;;;;AAUG;QACH,IAAA,CAAA,OAAO,GAAG,MAAM,EAA0B;AAc3C,IAAA;AAZC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA8B,EAAA;QACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;QACpD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC5C;+GAzFW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChC3B,ojCAsCA,EAAA,MAAA,EAAA,CAAA,8zEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXY,WAAW,qaAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAK3D,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAGtD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ojCAAA,EAAA,MAAA,EAAA,CAAA,8zEAAA,CAAA,EAAA;;;AE9BjD;;AAEG;;;;"}

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

@@ -100,11 +100,11 @@ class StepperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .p-steppanel-content-wrapper{min-width:0}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-stepper', imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"] }]
+            args: [{ selector: 'tk-stepper', imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .p-steppanel-content-wrapper{min-width:0}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n *   [steps]=\"steps\"\n *   [(activeStep)]=\"currentStep\"\n *   [linear]=\"true\"\n *   orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n  selector: 'tk-stepper',\n  imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n  templateUrl: './stepper.component.html',\n  styleUrl: './stepper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n  /**\n   * @property {InputSignal<StepData[]>} steps\n   * @description Array of step configurations to display.\n   */\n  steps = input<StepData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeStep\n   * @description The 0-based index of the currently active step. Supports two-way binding.\n   * @default 0\n   */\n  activeStep = model<number>(0);\n\n  /**\n   * @property {InputSignal<boolean>} linear\n   * @description If true, blocks navigation to steps ahead of the active step.\n   * @default true\n   */\n  linear = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n   * @description Defines the layout orientation of the stepper.\n   * @default 'horizontal'\n   */\n  orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /**\n   * @property {InputSignal<boolean>} showFooter\n   * @description Whether to render the default footer action buttons for each step.\n   * @default true\n   */\n  showFooter = input<boolean>(true);\n\n  /**\n   * @event stepChange\n   * @description Emitted when the active step changes.\n   */\n  stepChange = output<{\n    index: number;\n    step: StepData;\n  }>();\n\n  /**\n   * Checks if a step header should be disabled.\n   * Steps ahead of the active index are disabled in linear mode.\n   */\n  isStepDisabled(index: number): boolean {\n    const step = this.steps()[index];\n    if (!step) return true;\n    if (step.disabled) return true;\n    if (this.linear() && index > this.activeStep()) return true;\n    return false;\n  }\n\n  /**\n   * Helper to evaluate button disabled states dynamically.\n   */\n  evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n    if (disabled === undefined) return false;\n    if (typeof disabled === 'function') return disabled();\n    return disabled;\n  }\n\n  /**\n   * Handles step transition events.\n   */\n  onStepChange(index: number) {\n    if (this.activeStep() === index) return;\n    this.activeStep.set(index);\n    if (this.steps()[index]) {\n      this.stepChange.emit({\n        index,\n        step: this.steps()[index],\n      });\n    }\n  }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n *   [steps]=\"steps\"\n *   [(activeStep)]=\"currentStep\"\n *   [linear]=\"true\"\n *   orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n  selector: 'tk-stepper',\n  imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n  templateUrl: './stepper.component.html',\n  styleUrl: './stepper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n  /**\n   * @property {InputSignal<StepData[]>} steps\n   * @description Array of step configurations to display.\n   */\n  steps = input<StepData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeStep\n   * @description The 0-based index of the currently active step. Supports two-way binding.\n   * @default 0\n   */\n  activeStep = model<number>(0);\n\n  /**\n   * @property {InputSignal<boolean>} linear\n   * @description If true, blocks navigation to steps ahead of the active step.\n   * @default true\n   */\n  linear = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n   * @description Defines the layout orientation of the stepper.\n   * @default 'horizontal'\n   */\n  orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /**\n   * @property {InputSignal<boolean>} showFooter\n   * @description Whether to render the default footer action buttons for each step.\n   * @default true\n   */\n  showFooter = input<boolean>(true);\n\n  /**\n   * @event stepChange\n   * @description Emitted when the active step changes.\n   */\n  stepChange = output<{\n    index: number;\n    step: StepData;\n  }>();\n\n  /**\n   * Checks if a step header should be disabled.\n   * Steps ahead of the active index are disabled in linear mode.\n   */\n  isStepDisabled(index: number): boolean {\n    const step = this.steps()[index];\n    if (!step) return true;\n    if (step.disabled) return true;\n    if (this.linear() && index > this.activeStep()) return true;\n    return false;\n  }\n\n  /**\n   * Helper to evaluate button disabled states dynamically.\n   */\n  evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n    if (disabled === undefined) return false;\n    if (typeof disabled === 'function') return disabled();\n    return disabled;\n  }\n\n  /**\n   * Handles step transition events.\n   */\n  onStepChange(index: number) {\n    if (this.activeStep() === index) return;\n    this.activeStep.set(index);\n    if (this.steps()[index]) {\n      this.stepChange.emit({\n        index,\n        step: this.steps()[index],\n      });\n    }\n  }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, viewChild, model, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { TagModule } from 'primeng/tag';
@@ -10,6 +11,10 @@ import { CheckboxComponent } from '@tekus/design-system/components/checkbox';
 import { ActionGroupComponent } from '@tekus/design-system/components/action-group';
 import { IconComponent } from '@tekus/design-system/components/icon';
 import { TimeAgoComponent } from '@tekus/design-system/components/time-ago';
+import { CounterComponent } from '@tekus/design-system/components/counter';
+import { BadgeComponent } from '@tekus/design-system/components/badge';
+import { ToggleComponent } from '@tekus/design-system/components/toggle';
+import { TooltipComponent } from '@tekus/design-system/components/tooltip';
 import * as i2 from 'primeng/api';
 
 /**
@@ -81,6 +86,16 @@ class TableComponent {
          * Property name to uniquely identify a row.
          */
         this.dataKey = input(undefined, ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<string | null>} minTableWidth
+         * @description
+         * CSS `min-width` applied to the underlying PrimeNG table. Pass `null` to
+         * remove the minimum entirely (e.g. inside a narrow container such as a
+         * wizard step or modal) so the table can shrink to fit instead of forcing
+         * horizontal overflow.
+         * @default '60rem'
+         */
+        this.minTableWidth = input('60rem', ...(ngDevMode ? [{ debugName: "minTableWidth" }] : /* istanbul ignore next */ []));
         this.initialData = signal([], ...(ngDevMode ? [{ debugName: "initialData" }] : /* istanbul ignore next */ []));
         this.internalData = signal([], ...(ngDevMode ? [{ debugName: "internalData" }] : /* istanbul ignore next */ []));
         this.isSorted = signal(null, ...(ngDevMode ? [{ debugName: "isSorted" }] : /* istanbul ignore next */ []));
@@ -437,6 +452,77 @@ class TableComponent {
             col.imageAction(row);
         }
     }
+    /**
+     * @method isCounterDisabled
+     * @description
+     * Resolves a counter column's `counterDisabled`, which may be a boolean or a
+     * per-row predicate — the same shape `getActionGroup` already accepts.
+     * @param col {TableColumn<T>} - The counter column definition.
+     * @param row {T} - The data row being rendered.
+     * @returns Whether this row's counter should be disabled.
+     */
+    isCounterDisabled(col, row) {
+        return typeof col.counterDisabled === 'function'
+            ? col.counterDisabled(row)
+            : (col.counterDisabled ?? false);
+    }
+    /**
+     * @method onCounterChange
+     * @description
+     * Writes a counter cell's new value into the row and notifies the consumer.
+     * The value arrives already clamped into the column's range by `tk-counter`.
+     * Mutating the row in place matches how the `checkbox` column type behaves.
+     * @param col {TableColumn<T>} - The counter column definition.
+     * @param row {T} - The data row being edited.
+     * @param value {number} - The new, clamped value.
+     */
+    onCounterChange(col, row, value) {
+        if (col.field) {
+            row[col.field] = value;
+        }
+        col.counterChange?.(row, value);
+    }
+    /**
+     * @method isToggleDisabled
+     * @description
+     * Resolves a toggle column's `toggleDisabled`, which may be a boolean or a
+     * per-row predicate — the same shape `isCounterDisabled` already accepts.
+     * @param col {TableColumn<T>} - The toggle column definition.
+     * @param row {T} - The data row being rendered.
+     * @returns Whether this row's toggle should be disabled.
+     */
+    isToggleDisabled(col, row) {
+        return typeof col.toggleDisabled === 'function'
+            ? col.toggleDisabled(row)
+            : (col.toggleDisabled ?? false);
+    }
+    /**
+     * @method onToggleChange
+     * @description
+     * Writes a toggle cell's new value into the row and notifies the consumer.
+     * Mutating the row in place matches how the `checkbox` column type behaves.
+     * @param col {TableColumn<T>} - The toggle column definition.
+     * @param row {T} - The data row being edited.
+     * @param value {boolean} - The new switch value.
+     */
+    onToggleChange(col, row, value) {
+        if (col.field) {
+            row[col.field] = value;
+        }
+        col.toggleChange?.(row, value);
+    }
+    /**
+     * @method getImageCount
+     * @description
+     * Resolves how many images are available for an image-type cell via the
+     * column's `imageCount` callback. Returns 0 when not configured, so the
+     * template only overlays a `tk-badge` when there is more than one image.
+     * @param col {TableColumn<T>} - The image column definition.
+     * @param row {T} - The data row being rendered.
+     */
+    getImageCount(col, row) {
+        return col.imageCount ? col.imageCount(row) : 0;
+    }
     /**
      * @method onImageError
      * @description
@@ -451,7 +537,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", columnFilters: "columnFiltersChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange" }, 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", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "hint", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }, minTableWidth: { classPropertyName: "minTableWidth", publicName: "minTableWidth", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", columnFilters: "columnFiltersChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange" }, 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]=\"minTableWidth() ? { 'min-width': minTableWidth() } : {}\" 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      <!-- COUNTER (editable integer field) -->\n      @if (col.type === 'counter') {\n      <td>\n        <tk-counter\n          [value]=\"$any(row[col.field!]) ?? 0\"\n          [min]=\"col.counterMin ?? 0\"\n          [max]=\"col.counterMax ?? 99\"\n          [step]=\"col.counterStep ?? 1\"\n          [disabled]=\"isCounterDisabled(col, row)\"\n          [ariaLabel]=\"col.counterAriaLabel ? col.counterAriaLabel(row) : col.header\"\n          [decreaseLabel]=\"col.counterDecreaseLabel ?? 'Decrease'\"\n          [increaseLabel]=\"col.counterIncreaseLabel ?? 'Increase'\"\n          (valueChange)=\"onCounterChange(col, row, $event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"></tk-counter>\n      </td>\n      }\n\n      <!-- TOGGLE (Boolean field, switch) -->\n      @if (col.type === 'toggle') {\n      <td>\n        @if (col.toggleTooltip) {\n        <tk-tooltip [content]=\"col.toggleTooltip(row, $any(row[col.field!]) ?? false)\">\n          <ng-container [ngTemplateOutlet]=\"toggleSwitch\" />\n        </tk-tooltip>\n        } @else {\n        <ng-container [ngTemplateOutlet]=\"toggleSwitch\" />\n        }\n        <ng-template #toggleSwitch>\n          <tk-toggle\n            [model]=\"$any(row[col.field!]) ?? false\"\n            [disabled]=\"isToggleDisabled(col, row)\"\n            [label]=\"col.toggleLabel ? col.toggleLabel(row) : ''\"\n            (modelChange)=\"onToggleChange(col, row, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (keypress)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"></tk-toggle>\n        </ng-template>\n      </td>\n      }\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td\n        [class.tk-table__cell--truncate]=\"col.truncate\"\n        [style.max-width]=\"col.truncate ? (col.width ?? '200px') : null\">\n        @if (col.icon) {\n        <span class=\"tk-table__cell-icon-text\">\n          <tk-icon [icon]=\"col.icon(row)\" [color]=\"col.iconColor ? col.iconColor(row) : undefined\" size=\"sm\" />\n          <span>{{ row[col.field!] }}</span>\n        </span>\n        } @else {\n        {{ row[col.field!] }}\n        }\n      </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        <div class=\"tk-table__cell-img-wrapper\">\n          @let imageCount = getImageCount(col, row);\n          @if (imageCount > 1) {\n          <tk-badge\n            [value]=\"imageCount + ''\"\n            [severity]=\"col.imageCountSeverity ? col.imageCountSeverity(row) : 'primary'\"\n            [overlay]=\"true\">\n            <ng-container [ngTemplateOutlet]=\"cellImg\" />\n          </tk-badge>\n          } @else {\n          <ng-container [ngTemplateOutlet]=\"cellImg\" />\n          }\n        </div>\n        <ng-template #cellImg>\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        </ng-template>\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}", styles: [":host{display:block;min-width:0}: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}:host ::ng-deep .tk-table__cell--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-table__cell-icon-text{display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__cell-img-wrapper{display:inline-flex}.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", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "hint", "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"] }, { kind: "component", type: CounterComponent, selector: "tk-counter", inputs: ["value", "min", "max", "step", "disabled", "readonly", "control", "decreaseLabel", "increaseLabel", "ariaLabel", "ariaLabelledby"], outputs: ["valueChange", "disabledChange"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity", "overlay"] }, { kind: "component", type: ToggleComponent, selector: "tk-toggle", inputs: ["model", "label", "name", "inputId", "control", "errorMessage", "hint", "disabled"], outputs: ["modelChange", "disabledChange"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -465,8 +551,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ActionGroupComponent,
                         IconComponent,
                         TimeAgoComponent,
-                    ], 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"] }]
-        }], 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 }] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }] } });
+                        CounterComponent,
+                        BadgeComponent,
+                        ToggleComponent,
+                        TooltipComponent,
+                        NgTemplateOutlet,
+                    ], template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\" [tableStyle]=\"minTableWidth() ? { 'min-width': minTableWidth() } : {}\" 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      <!-- COUNTER (editable integer field) -->\n      @if (col.type === 'counter') {\n      <td>\n        <tk-counter\n          [value]=\"$any(row[col.field!]) ?? 0\"\n          [min]=\"col.counterMin ?? 0\"\n          [max]=\"col.counterMax ?? 99\"\n          [step]=\"col.counterStep ?? 1\"\n          [disabled]=\"isCounterDisabled(col, row)\"\n          [ariaLabel]=\"col.counterAriaLabel ? col.counterAriaLabel(row) : col.header\"\n          [decreaseLabel]=\"col.counterDecreaseLabel ?? 'Decrease'\"\n          [increaseLabel]=\"col.counterIncreaseLabel ?? 'Increase'\"\n          (valueChange)=\"onCounterChange(col, row, $event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"></tk-counter>\n      </td>\n      }\n\n      <!-- TOGGLE (Boolean field, switch) -->\n      @if (col.type === 'toggle') {\n      <td>\n        @if (col.toggleTooltip) {\n        <tk-tooltip [content]=\"col.toggleTooltip(row, $any(row[col.field!]) ?? false)\">\n          <ng-container [ngTemplateOutlet]=\"toggleSwitch\" />\n        </tk-tooltip>\n        } @else {\n        <ng-container [ngTemplateOutlet]=\"toggleSwitch\" />\n        }\n        <ng-template #toggleSwitch>\n          <tk-toggle\n            [model]=\"$any(row[col.field!]) ?? false\"\n            [disabled]=\"isToggleDisabled(col, row)\"\n            [label]=\"col.toggleLabel ? col.toggleLabel(row) : ''\"\n            (modelChange)=\"onToggleChange(col, row, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (keypress)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"></tk-toggle>\n        </ng-template>\n      </td>\n      }\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td\n        [class.tk-table__cell--truncate]=\"col.truncate\"\n        [style.max-width]=\"col.truncate ? (col.width ?? '200px') : null\">\n        @if (col.icon) {\n        <span class=\"tk-table__cell-icon-text\">\n          <tk-icon [icon]=\"col.icon(row)\" [color]=\"col.iconColor ? col.iconColor(row) : undefined\" size=\"sm\" />\n          <span>{{ row[col.field!] }}</span>\n        </span>\n        } @else {\n        {{ row[col.field!] }}\n        }\n      </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        <div class=\"tk-table__cell-img-wrapper\">\n          @let imageCount = getImageCount(col, row);\n          @if (imageCount > 1) {\n          <tk-badge\n            [value]=\"imageCount + ''\"\n            [severity]=\"col.imageCountSeverity ? col.imageCountSeverity(row) : 'primary'\"\n            [overlay]=\"true\">\n            <ng-container [ngTemplateOutlet]=\"cellImg\" />\n          </tk-badge>\n          } @else {\n          <ng-container [ngTemplateOutlet]=\"cellImg\" />\n          }\n        </div>\n        <ng-template #cellImg>\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        </ng-template>\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}", styles: [":host{display:block;min-width:0}: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}:host ::ng-deep .tk-table__cell--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-table__cell-icon-text{display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__cell-img-wrapper{display:inline-flex}.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"] }]
+        }], 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 }] }], minTableWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTableWidth", required: false }] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.