@tekus/design-system 5.38.1 → 5.40.0

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

@@ -0,0 +1,193 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, inject, computed, ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { TagComponent } from '@tekus/design-system/components/tag';
+import { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';
+
+/**
+ * Provided by `tk-stat-group`, injected optionally by `tk-stat`.
+ *
+ * This is how a stat discovers that it lives inside a group and must drop its own
+ * surface — the group owns the background, so the children must not paint their
+ * own. A stat never sets its grouped appearance itself, and a consumer never has
+ * to hand it down.
+ */
+const TK_STAT_GROUP = new InjectionToken('TK_STAT_GROUP');
+
+/**
+ * Counter backing the unique id that links a stat's label to its `aria-labelledby`.
+ * A module-level counter (rather than a random uuid) keeps the id stable between
+ * server and client renders and deterministic in tests.
+ */
+let _statUid = 0;
+/**
+ * @component StatComponent
+ * @description
+ * Displays a single highlighted metric: a large dominant value, a small label above
+ * it, and optionally a status tag, a description and a progress bar. Used at the top
+ * of listings, summaries and dashboards to surface a key figure at a glance.
+ *
+ * This component supports:
+ * - `label` / `value`: the two required parts. The value is the dominant figure.
+ * - `severity`: the feedback intent. Colors the value — and nothing else.
+ * - `prefix` / `suffix`: small muted affixes flanking the value (e.g. `'$'`, `'/200'`).
+ * - `description`: a secondary line below the value.
+ * - `tagValue` / `tagSeverity`: a trailing tag in the header, via `tk-tag`.
+ * - `progress`: shows a `tk-progress-bar` below the content when set.
+ * - `severityLabel`: screen-reader-only text so `severity` is not color-only.
+ *
+ * There is no `grouped` input: wrapping stats in `tk-stat-group` applies the grouped
+ * appearance automatically.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-stat label="Usuarios mensuales" [value]="500" description="Audiencia estimada" />
+ * <tk-stat label="Slots" [value]="25" suffix="/200" [progress]="12" tagValue="Disponible" tagSeverity="success" />
+ * ```
+ */
+class StatComponent {
+    constructor() {
+        /** The small title shown above the value. */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * The dominant figure. Accepts a number or an already-formatted string
+         * (`'1.2K'`, `'99,9 %'`) so the consumer keeps control of formatting and locale.
+         */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * The feedback intent of the stat, which colors the value.
+         * @default 'secondary'
+         */
+        this.severity = input('secondary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /** Small muted text rendered immediately before the value (e.g. `'$'`). */
+        this.prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        /** Small muted text rendered immediately after the value (e.g. `'/200'`, `'/GB'`). */
+        this.suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+        /** A secondary line below the value, giving context or the origin of the figure. */
+        this.description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /** The text of the trailing header tag. The tag is only rendered when this is set. */
+        this.tagValue = input('', ...(ngDevMode ? [{ debugName: "tagValue" }] : /* istanbul ignore next */ []));
+        /**
+         * The severity of the trailing header tag.
+         * @default 'secondary'
+         */
+        this.tagSeverity = input('secondary', ...(ngDevMode ? [{ debugName: "tagSeverity" }] : /* istanbul ignore next */ []));
+        /**
+         * The completion percentage (0-100) shown as a progress bar below the content.
+         * Leave `undefined` to omit the bar — `0` is a valid value and renders an empty bar.
+         */
+        this.progress = input(undefined, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        /**
+         * Screen-reader-only text describing what this stat's `severity` means (e.g.
+         * `'sobre la cuota'`). Set it whenever `severity` is not `'secondary'`, so the
+         * meaning is not carried by color alone. Saying it visibly through `tagValue` or
+         * `description` is usually better, since it serves sighted users too.
+         */
+        this.severityLabel = input('', ...(ngDevMode ? [{ debugName: "severityLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * The group this stat is projected into, if any. Injected optionally: a standalone
+         * stat resolves `null` and keeps its own surface.
+         */
+        this.group = inject(TK_STAT_GROUP, { optional: true });
+        /** Whether this stat is projected inside a `tk-stat-group`. */
+        this.grouped = this.group !== null;
+        /** Unique DOM id linking the rendered label to the host's `aria-labelledby`. */
+        this.labelId = `tk-stat-label-${++_statUid}`;
+        /**
+         * Whether a progress bar should be rendered. Tests for `null`/`undefined` rather
+         * than truthiness so that `progress = 0` still renders an empty bar.
+         */
+        this.hasProgress = computed(() => this.progress() != null, ...(ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []));
+        /** Computed host class: the BEM block plus the severity and grouped modifiers. */
+        this.hostClass = computed(() => {
+            const classes = ['tk-stat', `tk-stat--${this.severity()}`];
+            if (this.grouped) {
+                classes.push('tk-stat--grouped');
+            }
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StatComponent, isStandalone: true, selector: "tk-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, tagValue: { classPropertyName: "tagValue", publicName: "tagValue", isSignal: true, isRequired: false, transformFunction: null }, tagSeverity: { classPropertyName: "tagSeverity", publicName: "tagSeverity", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, severityLabel: { classPropertyName: "severityLabel", publicName: "severityLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "hostClass()", "attr.aria-labelledby": "labelId" } }, ngImport: i0, template: "<div class=\"tk-stat__header\">\n  <span class=\"tk-stat__label\" [id]=\"labelId\">{{ label() }}</span>\n  @if (tagValue()) {\n    <tk-tag class=\"tk-stat__tag\" [value]=\"tagValue()\" [severity]=\"tagSeverity()\" />\n  }\n</div>\n\n<p class=\"tk-stat__value\">\n  @if (prefix()) {\n    <span class=\"tk-stat__affix\">{{ prefix() }}</span>\n  }\n  <span class=\"tk-stat__amount\">{{ value() }}</span>\n  @if (suffix()) {\n    <span class=\"tk-stat__affix\">{{ suffix() }}</span>\n  }\n  @if (severityLabel()) {\n    <span class=\"tk-stat__sr-only\">{{ severityLabel() }}</span>\n  }\n</p>\n\n@if (description()) {\n  <p class=\"tk-stat__description\">{{ description() }}</p>\n}\n\n@if (hasProgress()) {\n  <tk-progress-bar\n    class=\"tk-stat__progress\"\n    [value]=\"progress()!\"\n    size=\"small\"\n    aria-hidden=\"true\" />\n}\n", styles: [":host{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--tk-spacing-gap-xs, .25rem);min-width:var(--tk-size-base-1000, 10rem);max-width:var(--tk-stat-max-width, var(--tk-size-base-2000, 20rem));padding:var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-theme-m, var(--tk-borderRadius-m, 1rem));background-color:var(--tk-color-background-soft, #f2f1f1);font-family:var(--tk-font-family, Poppins, sans-serif)}.tk-stat__header{display:flex;align-items:center;justify-content:space-between;gap:var(--tk-spacing-gap-xs, .25rem);width:100%;height:var(--tk-size-base-150, 1.5rem)}.tk-stat__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1.143;color:var(--tk-color-text-default, #191a1b)}.tk-stat__tag{flex-shrink:0}.tk-stat__value{display:flex;align-items:flex-end;max-width:100%;margin:0;white-space:nowrap}.tk-stat__amount{font-weight:var(--tk-font-weight-600, 600);font-size:var(--tk-font-size-headers-xl, 2.5rem);line-height:1}.tk-stat__affix{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-l, 1.125rem);line-height:1.4;color:var(--tk-color-text-muted, #8a8a8b)}.tk-stat__description{min-width:0;max-width:100%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-m, .75rem);line-height:1.334;color:var(--tk-color-text-subtle, #5d5d5e)}.tk-stat__progress{width:100%}.tk-stat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.tk-stat--secondary) .tk-stat__amount{color:var(--tk-color-text-default, #191a1b)}:host(.tk-stat--primary) .tk-stat__amount{color:var(--tk-color-primary-default, #16006f)}:host(.tk-stat--success) .tk-stat__amount{color:var(--tk-color-feedback-success-default, #22c55e)}:host(.tk-stat--warn) .tk-stat__amount{color:var(--tk-color-feedback-warn-default, #ffd21b)}:host(.tk-stat--danger) .tk-stat__amount{color:var(--tk-color-feedback-danger-default, #ff6640)}:host(.tk-stat--grouped){background-color:transparent}\n"], dependencies: [{ kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ProgressBarComponent, selector: "tk-progress-bar", inputs: ["value", "showValue", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-stat', imports: [TagComponent, ProgressBarComponent], host: {
+                        '[class]': 'hostClass()',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId',
+                    }, template: "<div class=\"tk-stat__header\">\n  <span class=\"tk-stat__label\" [id]=\"labelId\">{{ label() }}</span>\n  @if (tagValue()) {\n    <tk-tag class=\"tk-stat__tag\" [value]=\"tagValue()\" [severity]=\"tagSeverity()\" />\n  }\n</div>\n\n<p class=\"tk-stat__value\">\n  @if (prefix()) {\n    <span class=\"tk-stat__affix\">{{ prefix() }}</span>\n  }\n  <span class=\"tk-stat__amount\">{{ value() }}</span>\n  @if (suffix()) {\n    <span class=\"tk-stat__affix\">{{ suffix() }}</span>\n  }\n  @if (severityLabel()) {\n    <span class=\"tk-stat__sr-only\">{{ severityLabel() }}</span>\n  }\n</p>\n\n@if (description()) {\n  <p class=\"tk-stat__description\">{{ description() }}</p>\n}\n\n@if (hasProgress()) {\n  <tk-progress-bar\n    class=\"tk-stat__progress\"\n    [value]=\"progress()!\"\n    size=\"small\"\n    aria-hidden=\"true\" />\n}\n", styles: [":host{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--tk-spacing-gap-xs, .25rem);min-width:var(--tk-size-base-1000, 10rem);max-width:var(--tk-stat-max-width, var(--tk-size-base-2000, 20rem));padding:var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-theme-m, var(--tk-borderRadius-m, 1rem));background-color:var(--tk-color-background-soft, #f2f1f1);font-family:var(--tk-font-family, Poppins, sans-serif)}.tk-stat__header{display:flex;align-items:center;justify-content:space-between;gap:var(--tk-spacing-gap-xs, .25rem);width:100%;height:var(--tk-size-base-150, 1.5rem)}.tk-stat__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1.143;color:var(--tk-color-text-default, #191a1b)}.tk-stat__tag{flex-shrink:0}.tk-stat__value{display:flex;align-items:flex-end;max-width:100%;margin:0;white-space:nowrap}.tk-stat__amount{font-weight:var(--tk-font-weight-600, 600);font-size:var(--tk-font-size-headers-xl, 2.5rem);line-height:1}.tk-stat__affix{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-paragraph-l, 1.125rem);line-height:1.4;color:var(--tk-color-text-muted, #8a8a8b)}.tk-stat__description{min-width:0;max-width:100%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-m, .75rem);line-height:1.334;color:var(--tk-color-text-subtle, #5d5d5e)}.tk-stat__progress{width:100%}.tk-stat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.tk-stat--secondary) .tk-stat__amount{color:var(--tk-color-text-default, #191a1b)}:host(.tk-stat--primary) .tk-stat__amount{color:var(--tk-color-primary-default, #16006f)}:host(.tk-stat--success) .tk-stat__amount{color:var(--tk-color-feedback-success-default, #22c55e)}:host(.tk-stat--warn) .tk-stat__amount{color:var(--tk-color-feedback-warn-default, #ffd21b)}:host(.tk-stat--danger) .tk-stat__amount{color:var(--tk-color-feedback-danger-default, #ff6640)}:host(.tk-stat--grouped){background-color:transparent}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tagValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagValue", required: false }] }], tagSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagSeverity", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], severityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "severityLabel", required: false }] }] } });
+
+/**
+ * @component StatGroupComponent
+ * @description
+ * Wraps a row of related `tk-stat` into a single shared surface, inserting a
+ * separator between each pair. The group owns the background and the radius; every
+ * stat projected into it drops its own surface automatically, through the
+ * {@link TK_STAT_GROUP} token this component provides.
+ *
+ * This component supports:
+ * - `orientation`: `'auto'` (a row that collapses to a column on small screens),
+ *   `'row'` or `'column'`.
+ * - `ariaLabel`: names the group for assistive tech. Only when set does the group
+ *   expose `role="group"` — an unnamed group is noise.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-stat-group ariaLabel="Resumen de la campaña">
+ *   <tk-stat label="Usuarios mensuales" [value]="500" description="Audiencia estimada" />
+ *   <tk-stat label="Estado de la pantalla" [value]="500" severity="success" description="12 de 12 días" />
+ *   <tk-stat label="Slots" [value]="25" suffix="/200" [progress]="12" />
+ * </tk-stat-group>
+ * ```
+ */
+class StatGroupComponent {
+    constructor() {
+        /**
+         * How the stats are laid out.
+         * - `'auto'`: horizontal, collapsing to a column on viewports narrower than a
+         *   vertical tablet. This is the responsive default the design calls for.
+         * - `'row'` / `'column'`: force one direction — for a group inside a narrow
+         *   sidebar on a wide screen, or one that must stay horizontal on mobile.
+         * @default 'auto'
+         */
+        this.orientation = input('auto', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /**
+         * The accessible name of the group. When set, the group exposes itself as
+         * `role="group"` with this label; when omitted it stays structurally invisible to
+         * assistive tech, since an unnamed group adds nothing but noise.
+         */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: StatGroupComponent, isStandalone: true, selector: "tk-stat-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tk-stat-group--auto": "orientation() === \"auto\"", "class.tk-stat-group--column": "orientation() === \"column\"", "attr.role": "ariaLabel() ? \"group\" : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "tk-stat-group" }, providers: [
+            {
+                provide: TK_STAT_GROUP,
+                useExisting: forwardRef(() => StatGroupComponent),
+            },
+        ], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;box-sizing:border-box;flex-direction:row;align-items:stretch;max-width:100%;overflow-x:auto;gap:var(--tk-spacing-gap-m, 1rem);border-radius:var(--tk-borderRadius-theme-m, var(--tk-borderRadius-m, 1rem));background-color:var(--tk-color-background-soft, #f2f1f1);vertical-align:top}:host ::ng-deep>tk-stat{position:relative;flex:0 1 auto}:host ::ng-deep>tk-stat+tk-stat:before{content:\"\";position:absolute;top:var(--tk-spacing-padding-s, .5rem);bottom:var(--tk-spacing-padding-s, .5rem);left:calc(-.5 * var(--tk-spacing-gap-m, 1rem));width:1px;background-color:var(--tk-color-border-subtle, #e4e4e4)}:host(.tk-stat-group--column){flex-direction:column;width:100%}:host(.tk-stat-group--column) ::ng-deep>tk-stat{max-width:none}:host(.tk-stat-group--column) ::ng-deep>tk-stat+tk-stat:before{top:calc(-.5 * var(--tk-spacing-gap-m, 1rem));right:var(--tk-spacing-padding-s, .5rem);bottom:auto;left:var(--tk-spacing-padding-s, .5rem);width:auto;height:1px}@media screen and (max-width:767px){:host(.tk-stat-group--auto){flex-direction:column;width:100%}:host(.tk-stat-group--auto) ::ng-deep>tk-stat{max-width:none}:host(.tk-stat-group--auto) ::ng-deep>tk-stat+tk-stat:before{top:calc(-.5 * var(--tk-spacing-gap-m, 1rem));right:var(--tk-spacing-padding-s, .5rem);bottom:auto;left:var(--tk-spacing-padding-s, .5rem);width:auto;height:1px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatGroupComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-stat-group', template: '<ng-content />', providers: [
+                        {
+                            provide: TK_STAT_GROUP,
+                            useExisting: forwardRef(() => StatGroupComponent),
+                        },
+                    ], host: {
+                        class: 'tk-stat-group',
+                        '[class.tk-stat-group--auto]': 'orientation() === "auto"',
+                        '[class.tk-stat-group--column]': 'orientation() === "column"',
+                        '[attr.role]': 'ariaLabel() ? "group" : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                    }, styles: [":host{display:inline-flex;box-sizing:border-box;flex-direction:row;align-items:stretch;max-width:100%;overflow-x:auto;gap:var(--tk-spacing-gap-m, 1rem);border-radius:var(--tk-borderRadius-theme-m, var(--tk-borderRadius-m, 1rem));background-color:var(--tk-color-background-soft, #f2f1f1);vertical-align:top}:host ::ng-deep>tk-stat{position:relative;flex:0 1 auto}:host ::ng-deep>tk-stat+tk-stat:before{content:\"\";position:absolute;top:var(--tk-spacing-padding-s, .5rem);bottom:var(--tk-spacing-padding-s, .5rem);left:calc(-.5 * var(--tk-spacing-gap-m, 1rem));width:1px;background-color:var(--tk-color-border-subtle, #e4e4e4)}:host(.tk-stat-group--column){flex-direction:column;width:100%}:host(.tk-stat-group--column) ::ng-deep>tk-stat{max-width:none}:host(.tk-stat-group--column) ::ng-deep>tk-stat+tk-stat:before{top:calc(-.5 * var(--tk-spacing-gap-m, 1rem));right:var(--tk-spacing-padding-s, .5rem);bottom:auto;left:var(--tk-spacing-padding-s, .5rem);width:auto;height:1px}@media screen and (max-width:767px){:host(.tk-stat-group--auto){flex-direction:column;width:100%}:host(.tk-stat-group--auto) ::ng-deep>tk-stat{max-width:none}:host(.tk-stat-group--auto) ::ng-deep>tk-stat+tk-stat:before{top:calc(-.5 * var(--tk-spacing-gap-m, 1rem));right:var(--tk-spacing-padding-s, .5rem);bottom:auto;left:var(--tk-spacing-padding-s, .5rem);width:auto;height:1px}}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatComponent, StatGroupComponent, TK_STAT_GROUP };
+//# sourceMappingURL=tekus-design-system-components-stat.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-stat.mjs","sources":["../../../projects/design-system/components/stat/src/stat.types.ts","../../../projects/design-system/components/stat/src/stat.component.ts","../../../projects/design-system/components/stat/src/stat.component.html","../../../projects/design-system/components/stat/src/stat-group.component.ts","../../../projects/design-system/components/stat/tekus-design-system-components-stat.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\n/**\n * The feedback intent of a stat. It drives the color of the value — and only the\n * value: the surface, the label, the description and the progress bar are\n * identical across every severity.\n */\nexport type StatSeverity =\n  | 'secondary'\n  | 'primary'\n  | 'success'\n  | 'warn'\n  | 'danger';\n\n/**\n * How a `tk-stat-group` lays its children out.\n * - `auto`: a row that collapses to a column on small screens.\n * - `row`: always horizontal.\n * - `column`: always vertical.\n */\nexport type StatGroupOrientation = 'auto' | 'row' | 'column';\n\n/** The contract a `tk-stat-group` exposes to the `tk-stat` children it projects. */\nexport interface StatGroupContext {\n  readonly orientation: Signal<StatGroupOrientation>;\n}\n\n/**\n * Provided by `tk-stat-group`, injected optionally by `tk-stat`.\n *\n * This is how a stat discovers that it lives inside a group and must drop its own\n * surface — the group owns the background, so the children must not paint their\n * own. A stat never sets its grouped appearance itself, and a consumer never has\n * to hand it down.\n */\nexport const TK_STAT_GROUP = new InjectionToken<StatGroupContext>('TK_STAT_GROUP');\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { TagComponent, TagSeverity } from '@tekus/design-system/components/tag';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatSeverity, TK_STAT_GROUP } from './stat.types';\n\n/**\n * Counter backing the unique id that links a stat's label to its `aria-labelledby`.\n * A module-level counter (rather than a random uuid) keeps the id stable between\n * server and client renders and deterministic in tests.\n */\nlet _statUid = 0;\n\n/**\n * @component StatComponent\n * @description\n * Displays a single highlighted metric: a large dominant value, a small label above\n * it, and optionally a status tag, a description and a progress bar. Used at the top\n * of listings, summaries and dashboards to surface a key figure at a glance.\n *\n * This component supports:\n * - `label` / `value`: the two required parts. The value is the dominant figure.\n * - `severity`: the feedback intent. Colors the value — and nothing else.\n * - `prefix` / `suffix`: small muted affixes flanking the value (e.g. `'$'`, `'/200'`).\n * - `description`: a secondary line below the value.\n * - `tagValue` / `tagSeverity`: a trailing tag in the header, via `tk-tag`.\n * - `progress`: shows a `tk-progress-bar` below the content when set.\n * - `severityLabel`: screen-reader-only text so `severity` is not color-only.\n *\n * There is no `grouped` input: wrapping stats in `tk-stat-group` applies the grouped\n * appearance automatically.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-stat label=\"Usuarios mensuales\" [value]=\"500\" description=\"Audiencia estimada\" />\n * <tk-stat label=\"Slots\" [value]=\"25\" suffix=\"/200\" [progress]=\"12\" tagValue=\"Disponible\" tagSeverity=\"success\" />\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-stat',\n  imports: [TagComponent, ProgressBarComponent],\n  templateUrl: './stat.component.html',\n  styleUrl: './stat.component.scss',\n  host: {\n    '[class]': 'hostClass()',\n    role: 'group',\n    '[attr.aria-labelledby]': 'labelId',\n  },\n})\nexport class StatComponent {\n  /** The small title shown above the value. */\n  label = input.required<string>();\n\n  /**\n   * The dominant figure. Accepts a number or an already-formatted string\n   * (`'1.2K'`, `'99,9 %'`) so the consumer keeps control of formatting and locale.\n   */\n  value = input.required<string | number>();\n\n  /**\n   * The feedback intent of the stat, which colors the value.\n   * @default 'secondary'\n   */\n  severity = input<StatSeverity>('secondary');\n\n  /** Small muted text rendered immediately before the value (e.g. `'$'`). */\n  prefix = input<string>('');\n\n  /** Small muted text rendered immediately after the value (e.g. `'/200'`, `'/GB'`). */\n  suffix = input<string>('');\n\n  /** A secondary line below the value, giving context or the origin of the figure. */\n  description = input<string>('');\n\n  /** The text of the trailing header tag. The tag is only rendered when this is set. */\n  tagValue = input<string>('');\n\n  /**\n   * The severity of the trailing header tag.\n   * @default 'secondary'\n   */\n  tagSeverity = input<TagSeverity>('secondary');\n\n  /**\n   * The completion percentage (0-100) shown as a progress bar below the content.\n   * Leave `undefined` to omit the bar — `0` is a valid value and renders an empty bar.\n   */\n  progress = input<number | undefined>(undefined);\n\n  /**\n   * Screen-reader-only text describing what this stat's `severity` means (e.g.\n   * `'sobre la cuota'`). Set it whenever `severity` is not `'secondary'`, so the\n   * meaning is not carried by color alone. Saying it visibly through `tagValue` or\n   * `description` is usually better, since it serves sighted users too.\n   */\n  severityLabel = input<string>('');\n\n  /**\n   * The group this stat is projected into, if any. Injected optionally: a standalone\n   * stat resolves `null` and keeps its own surface.\n   */\n  private readonly group = inject(TK_STAT_GROUP, { optional: true });\n\n  /** Whether this stat is projected inside a `tk-stat-group`. */\n  readonly grouped = this.group !== null;\n\n  /** Unique DOM id linking the rendered label to the host's `aria-labelledby`. */\n  readonly labelId = `tk-stat-label-${++_statUid}`;\n\n  /**\n   * Whether a progress bar should be rendered. Tests for `null`/`undefined` rather\n   * than truthiness so that `progress = 0` still renders an empty bar.\n   */\n  hasProgress = computed(() => this.progress() != null);\n\n  /** Computed host class: the BEM block plus the severity and grouped modifiers. */\n  hostClass = computed(() => {\n    const classes = ['tk-stat', `tk-stat--${this.severity()}`];\n    if (this.grouped) {\n      classes.push('tk-stat--grouped');\n    }\n    return classes.join(' ');\n  });\n}\n","<div class=\"tk-stat__header\">\n  <span class=\"tk-stat__label\" [id]=\"labelId\">{{ label() }}</span>\n  @if (tagValue()) {\n    <tk-tag class=\"tk-stat__tag\" [value]=\"tagValue()\" [severity]=\"tagSeverity()\" />\n  }\n</div>\n\n<p class=\"tk-stat__value\">\n  @if (prefix()) {\n    <span class=\"tk-stat__affix\">{{ prefix() }}</span>\n  }\n  <span class=\"tk-stat__amount\">{{ value() }}</span>\n  @if (suffix()) {\n    <span class=\"tk-stat__affix\">{{ suffix() }}</span>\n  }\n  @if (severityLabel()) {\n    <span class=\"tk-stat__sr-only\">{{ severityLabel() }}</span>\n  }\n</p>\n\n@if (description()) {\n  <p class=\"tk-stat__description\">{{ description() }}</p>\n}\n\n@if (hasProgress()) {\n  <tk-progress-bar\n    class=\"tk-stat__progress\"\n    [value]=\"progress()!\"\n    size=\"small\"\n    aria-hidden=\"true\" />\n}\n","import { ChangeDetectionStrategy, Component, forwardRef, input } from '@angular/core';\nimport { StatGroupContext, StatGroupOrientation, TK_STAT_GROUP } from './stat.types';\n\n/**\n * @component StatGroupComponent\n * @description\n * Wraps a row of related `tk-stat` into a single shared surface, inserting a\n * separator between each pair. The group owns the background and the radius; every\n * stat projected into it drops its own surface automatically, through the\n * {@link TK_STAT_GROUP} token this component provides.\n *\n * This component supports:\n * - `orientation`: `'auto'` (a row that collapses to a column on small screens),\n *   `'row'` or `'column'`.\n * - `ariaLabel`: names the group for assistive tech. Only when set does the group\n *   expose `role=\"group\"` — an unnamed group is noise.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-stat-group ariaLabel=\"Resumen de la campaña\">\n *   <tk-stat label=\"Usuarios mensuales\" [value]=\"500\" description=\"Audiencia estimada\" />\n *   <tk-stat label=\"Estado de la pantalla\" [value]=\"500\" severity=\"success\" description=\"12 de 12 días\" />\n *   <tk-stat label=\"Slots\" [value]=\"25\" suffix=\"/200\" [progress]=\"12\" />\n * </tk-stat-group>\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-stat-group',\n  template: '<ng-content />',\n  styleUrl: './stat-group.component.scss',\n  providers: [\n    {\n      provide: TK_STAT_GROUP,\n      useExisting: forwardRef(() => StatGroupComponent),\n    },\n  ],\n  host: {\n    class: 'tk-stat-group',\n    '[class.tk-stat-group--auto]': 'orientation() === \"auto\"',\n    '[class.tk-stat-group--column]': 'orientation() === \"column\"',\n    '[attr.role]': 'ariaLabel() ? \"group\" : null',\n    '[attr.aria-label]': 'ariaLabel() || null',\n  },\n})\nexport class StatGroupComponent implements StatGroupContext {\n  /**\n   * How the stats are laid out.\n   * - `'auto'`: horizontal, collapsing to a column on viewports narrower than a\n   *   vertical tablet. This is the responsive default the design calls for.\n   * - `'row'` / `'column'`: force one direction — for a group inside a narrow\n   *   sidebar on a wide screen, or one that must stay horizontal on mobile.\n   * @default 'auto'\n   */\n  orientation = input<StatGroupOrientation>('auto');\n\n  /**\n   * The accessible name of the group. When set, the group exposes itself as\n   * `role=\"group\"` with this label; when omitted it stays structurally invisible to\n   * assistive tech, since an unnamed group adds nothing but noise.\n   */\n  ariaLabel = input<string>('');\n}\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

@@ -10,6 +10,7 @@ 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 * as i2 from 'primeng/api';
 
 /**
@@ -437,6 +438,36 @@ 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 onImageError
      * @description
@@ -451,7 +482,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 }, 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      <!-- 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      <!-- 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"] }, { kind: "component", type: CounterComponent, selector: "tk-counter", inputs: ["value", "min", "max", "step", "disabled", "readonly", "control", "decreaseLabel", "increaseLabel", "ariaLabel", "ariaLabelledby"], outputs: ["valueChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -465,7 +496,8 @@ 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"] }]
+                        CounterComponent,
+                    ], 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      <!-- 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      <!-- 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"] }] } });
 
 /**