@eui/ecl 22.0.0-alpha.39 → 22.0.0-alpha.40

package/fesm2022/eui-ecl-components-ecl-table.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, HostBinding, Component, input, booleanAttribute, EventEmitter, contentChildren, forwardRef, IterableDiffers, Output, Input, Directive, ElementRef, ViewContainerRef, Renderer2, HostListener, ChangeDetectorRef } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { inject, Component, input, booleanAttribute, linkedSignal, output, contentChildren, forwardRef, effect, Directive, ElementRef, ViewContainerRef, Renderer2, afterNextRender, ChangeDetectorRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { ECLBaseDirective, EclThemeService, EclBaseEvent } from '@eui/ecl/core';
 import { AsyncPipe } from '@angular/common';
 import * as i1 from '@eui/ecl/components/ecl-icon';
@@ -32,18 +31,15 @@ class EclTableSortButtonComponent extends ECLBaseDirective {
         return [super.getCssClasses('ecl-table__arrow')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableSortButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclTableSortButtonComponent, isStandalone: true, selector: "button[eclTableSortButton]", host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclTableSortButtonComponent, isStandalone: true, selector: "button[eclTableSortButton]", host: { properties: { "attr.aria-label": "ariaLabel", "class": "cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableSortButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[eclTableSortButton]', imports: [...EUI_ECL_ICON, AsyncPipe], template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n" }]
-        }], propDecorators: { ariaLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'button[eclTableSortButton]', imports: [...EUI_ECL_ICON, AsyncPipe], host: {
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[class]': 'cssClasses',
+                    }, template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'xs' : 'm'\"> </ecl-icon>\n" }]
+        }] });
 
 /**
  * Event emitted when the table sort order changes.
@@ -85,7 +81,7 @@ class EclTableDirective extends ECLBaseDirective {
      * Computed list of CSS classes for the host element.
      */
     get cssClasses() {
-        return [super.getCssClasses('ecl-table'), this.isZebra() ? 'ecl-table--zebra' : '', this.isSimple ? 'ecl-table--simple' : ''].join(' ').trim();
+        return [super.getCssClasses('ecl-table'), this.isZebra() ? 'ecl-table--zebra' : '', this.isSimpleTable() ? 'ecl-table--simple' : ''].join(' ').trim();
     }
     constructor() {
         super();
@@ -94,29 +90,63 @@ class EclTableDirective extends ECLBaseDirective {
          */
         this.isZebra = input(false, { ...(ngDevMode ? { debugName: "isZebra" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Applies the "simple" table variant if true.
-         * Automatically enabled if no header is detected.
+         * Opts out of the enhanced mobile layout and applies the "simple" table variant
+         * by adding the `ecl-table--simple` class.
+         *
+         * This only affects narrow (mobile) viewports; on desktop both variants render as
+         * a standard table, so this input is effectively a no-op there.
+         * - Default (enhanced): on mobile each row collapses into a stacked, card-like layout
+         *   that uses the `eclTableCellHeader` value as the label for each cell.
+         * - Simple: on mobile the table keeps its native structure and scrolls horizontally
+         *   inside the responsive wrapper instead of collapsing.
+         *
+         * Automatically enabled if no header is detected, since the enhanced mobile layout
+         * has no header labels to project onto the cells.
          */
-        this.isSimple = false;
+        this.isSimple = input(false, { ...(ngDevMode ? { debugName: "isSimple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Writable internal "simple" state, seeded from the `isSimple` input.
+         * May be forced to `true` internally when no header is detected.
+         */
+        this.isSimpleTable = linkedSignal(() => this.isSimple(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSimpleTable" }] : /* istanbul ignore next */ []));
+        /**
+         * The HTML ID attribute of the table. If not provided, a UUID is generated.
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Writable internal id, seeded from the `id` input and falling back to a
+         * generated UUID when none is provided.
+         */
+        this.tableId = linkedSignal(() => this.id(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableId" }] : /* istanbul ignore next */ []));
         /**
          * Emits an event when a column sort is triggered.
          */
-        this.sort = new EventEmitter();
+        this.sort = output();
         /**
          * List of header directives detected in the content.
          */
         this.eclTableHeaders = contentChildren(forwardRef(() => EclTableHeaderDirective), { ...(ngDevMode ? { debugName: "eclTableHeaders" } : /* istanbul ignore next */ {}), descendants: true });
-        this.destroy$ = new Subject();
-        this.differs = inject(IterableDiffers);
-        this.differ = this.differs.find([]).create();
+        // Re-emit each header's sort event through the table's own `sort` output.
+        // Re-subscribes whenever the set of headers changes, disposing the previous
+        // subscriptions so removed headers don't leak.
+        effect((onCleanup) => {
+            const subscription = new Subscription();
+            this.eclTableHeaders().forEach((header) => {
+                subscription.add(header.sort.subscribe((evt) => this.sort.emit(evt)));
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
     }
     /**
      * Lifecycle hook that runs on component initialization.
      * Generates a unique ID if none is provided.
      */
     ngOnInit() {
-        if (!this.id) {
-            this.id = crypto.randomUUID();
+        if (!this.tableId()) {
+            this.tableId.set(crypto.randomUUID());
         }
     }
     /**
@@ -127,55 +157,30 @@ class EclTableDirective extends ECLBaseDirective {
         this.convertToSimpleVariant();
     }
     /**
-     * Custom change detection for dynamically added header directives.
-     */
-    ngDoCheck() {
-        const diff = this.differ.diff(this.eclTableHeaders());
-        if (diff) {
-            diff.forEachAddedItem((change) => {
-                change.item.sort.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-                    this.sort.emit(evt);
-                });
-            });
-        }
-    }
-    /**
-     * Cleans up subscriptions on destroy to prevent memory leaks.
-     */
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
-    }
-    /**
-     * Sets the table to "simple" variant if no header directives are found.
+     * Forces the "simple" variant when no header directives are found.
+     *
+     * The enhanced mobile layout relies on header cells to supply the per-cell labels
+     * (via `eclTableCellHeader`); without headers there is nothing to project, so the
+     * table falls back to the simple (horizontal-scroll) variant on mobile.
      */
     convertToSimpleVariant() {
         if (this.eclTableHeaders().length === 0) {
-            this.isSimple = true;
+            this.isSimpleTable.set(true);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclTableDirective, isStandalone: true, selector: "[eclTable]", inputs: { isZebra: { classPropertyName: "isZebra", publicName: "isZebra", isSignal: true, isRequired: false, transformFunction: null }, isSimple: { classPropertyName: "isSimple", publicName: "isSimple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sort: "sort" }, host: { properties: { "attr.id": "this.id", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclTableDirective, isStandalone: true, selector: "[eclTable]", inputs: { isZebra: { classPropertyName: "isZebra", publicName: "isZebra", isSignal: true, isRequired: false, transformFunction: null }, isSimple: { classPropertyName: "isSimple", publicName: "isSimple", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort" }, host: { properties: { "attr.id": "tableId()", "class": "cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTable]',
+                    host: {
+                        '[attr.id]': 'tableId()',
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { isZebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "isZebra", required: false }] }], isSimple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], id: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.id']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], sort: [{
-                type: Output
-            }], eclTableHeaders: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTableHeaderDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { isZebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "isZebra", required: false }] }], isSimple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSimple", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], eclTableHeaders: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTableHeaderDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 /**
  * Directive applied to `<thead>` elements inside a table.
  * Detects header changes and manages ARIA attributes.
@@ -193,51 +198,48 @@ class EclTableHeadDirective extends ECLBaseDirective {
          * List of header directives under this head element.
          */
         this.eclTableHeaders = contentChildren(forwardRef(() => EclTableHeaderDirective), { ...(ngDevMode ? { debugName: "eclTableHeaders" } : /* istanbul ignore next */ {}), descendants: true });
-        this.differs = inject(IterableDiffers);
-        this.destroy$ = new Subject();
-        this.differ = this.differs.find([]).create();
-    }
-    /**
-     * Detects dynamic addition of header directives and resets ARIA sorting attributes.
-     */
-    ngDoCheck() {
-        const diff = this.differ.diff(this.eclTableHeaders());
-        if (diff) {
-            diff.forEachAddedItem((change) => {
-                change.item.sort.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-                    this.eclTableHeaders().forEach((th) => {
-                        th.removeAriaSort();
-                    });
-                });
+        // When any header is sorted, reset the `aria-sort` state on every header so
+        // only the active column reports a sort direction. Re-subscribes whenever the
+        // set of headers changes, disposing the previous subscriptions.
+        effect((onCleanup) => {
+            const headers = this.eclTableHeaders();
+            const subscription = new Subscription();
+            headers.forEach((header) => {
+                subscription.add(header.sort.subscribe(() => {
+                    headers.forEach((th) => th.removeAriaSort());
+                }));
             });
-        }
-    }
-    /**
-     * Cleans up subscriptions on destroy to prevent memory leaks.
-     */
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
+            onCleanup(() => subscription.unsubscribe());
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableHeadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclTableHeadDirective, isStandalone: true, selector: "[eclTableHead]", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclTableHeadDirective, isStandalone: true, selector: "[eclTableHead]", host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableHeadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableHead]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], eclTableHeaders: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTableHeaderDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { eclTableHeaders: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTableHeaderDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 /**
  * Directive representing a single table header cell in an ECL table.
  * Supports sorting functionality and accessibility attributes.
  */
 class EclTableHeaderDirective extends ECLBaseDirective {
+    get ariaSort() {
+        return this.sortOrder ?? 'none';
+    }
+    /**
+     * Computes the CSS classes applied to the header element.
+     */
+    get cssClasses() {
+        return [super.getCssClasses('ecl-table__header')].join(' ').trim();
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Current sort order of the column (`ascending`, `descending`, or `null`).
          * This sets the `aria-sort` attribute used for accessibility.
@@ -247,50 +249,57 @@ class EclTableHeaderDirective extends ECLBaseDirective {
          * Enables sorting on the header. Also sets the `data-ecl-table-sort-toggle` attribute.
          * Acts as the unique identifier for the column when sorting.
          */
-        this.eclSortable = null;
+        this.eclSortable = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclSortable" }] : /* istanbul ignore next */ []));
         /**
          * Scope of the table header. Default is `col`. Sets the `scope` attribute.
          */
-        this.scope = 'col';
+        this.scope = input('col', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+        /**
+         * HTML `id` attribute of the table header cell. If not provided, a UUID will be generated.
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Writable internal id, seeded from the `id` input and falling back to a
+         * generated UUID when none is provided.
+         */
+        this.headerId = linkedSignal(() => this.id(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
         /**
          * Aria-label for the sort button that will be injected into the header cell.
+         *
+         * When provided, the value is used verbatim: it is NOT translated and is NOT
+         * updated as the sort direction changes. The consumer is responsible for passing
+         * an already-localized string (e.g. `[sortButtonAriaLabel]="'my.key' | translate"`).
+         *
+         * When omitted, the directive manages the label internally and translates it via
+         * the `ecl.table.SORT-LABEL.*` keys, updating it on each sort toggle.
          */
         this.sortButtonAriaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sortButtonAriaLabel" }] : /* istanbul ignore next */ []));
         /**
          * Emits an `EclSortTableEvent` when the header is clicked and sorting is triggered.
          */
-        this.sort = new EventEmitter();
+        this.sort = output();
         this.el = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
         this.translateService = inject(TranslateService);
-    }
-    get ariaSort() {
-        return this.sortOrder ?? 'none';
-    }
-    /**
-     * Computes the CSS classes applied to the header element.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-table__header')].join(' ').trim();
+        // Inject the sort button after the next render. `afterNextRender` only runs in
+        // the browser, so the button is created client-side (never during SSR).
+        afterNextRender(() => this.initSortButtons());
     }
     /**
      * Lifecycle hook that runs on component initialization.
      * Generates a unique `id` if not already defined.
      */
     ngOnInit() {
-        if (!this.id) {
-            this.id = crypto.randomUUID();
+        if (!this.headerId()) {
+            this.headerId.set(crypto.randomUUID());
         }
     }
-    /**
-     * Lifecycle hook that runs after the view is initialized.
-     * Injects the sort button into the header cell if sorting is enabled.
-     */
-    ngAfterContentInit() {
-        this.initSortButtons();
-    }
     /**
      * Clears the `aria-sort` attribute, used to visually and semantically reset previous sort state.
      *
@@ -307,7 +316,7 @@ class EclTableHeaderDirective extends ECLBaseDirective {
      * Click triggers 1 -> asc sorting, 2 -> desc sorting then 3 -> initial sorting
      */
     onClick(evt) {
-        if (this.eclSortable) {
+        if (this.eclSortable()) {
             switch (this.sortOrder) {
                 case null: {
                     this.sortOrder = SortOrder.ASCENDING;
@@ -325,11 +334,11 @@ class EclTableHeaderDirective extends ECLBaseDirective {
                     break;
                 }
             }
-            this.sort.emit(new EclSortTableEvent(this.sortOrder, this.eclSortable));
+            this.sort.emit(new EclSortTableEvent(this.sortOrder, this.eclSortable()));
         }
     }
     changeButtonAriaLabel(newAriaLabel) {
-        if (!this.sortButtonAriaLabel()) {
+        if (!this.sortButtonAriaLabel() && this.containerComponentRef) {
             this.containerComponentRef.instance.ariaLabel = newAriaLabel;
         }
     }
@@ -338,55 +347,35 @@ class EclTableHeaderDirective extends ECLBaseDirective {
      * Optionally sets the button's `aria-label` if provided.
      */
     initSortButtons() {
-        if (this.eclSortable) {
-            setTimeout(() => {
-                this.containerComponentRef = this.viewContainerRef.createComponent(EclTableSortButtonComponent);
-                this.renderer.appendChild(this.el.nativeElement, this.containerComponentRef.location.nativeElement);
-                const sortButtonAriaLabel = this.sortButtonAriaLabel();
-                if (sortButtonAriaLabel) {
-                    this.containerComponentRef.instance.ariaLabel = sortButtonAriaLabel;
-                }
-                else {
-                    this.containerComponentRef.instance.ariaLabel = this.translateService.instant('ecl.table.SORT-LABEL.default');
-                }
-            });
+        if (this.eclSortable()) {
+            this.containerComponentRef = this.viewContainerRef.createComponent(EclTableSortButtonComponent);
+            this.renderer.appendChild(this.el.nativeElement, this.containerComponentRef.location.nativeElement);
+            const sortButtonAriaLabel = this.sortButtonAriaLabel();
+            if (sortButtonAriaLabel) {
+                this.containerComponentRef.instance.ariaLabel = sortButtonAriaLabel;
+            }
+            else {
+                this.containerComponentRef.instance.ariaLabel = this.translateService.instant('ecl.table.SORT-LABEL.default');
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableHeaderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclTableHeaderDirective, isStandalone: true, selector: "[eclTableHeader]", inputs: { eclSortable: { classPropertyName: "eclSortable", publicName: "eclSortable", isSignal: false, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, sortButtonAriaLabel: { classPropertyName: "sortButtonAriaLabel", publicName: "sortButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "this.ariaSort", "attr.data-ecl-table-sort-toggle": "this.eclSortable", "attr.scope": "this.scope", "attr.id": "this.id", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclTableHeaderDirective, isStandalone: true, selector: "[eclTableHeader]", inputs: { eclSortable: { classPropertyName: "eclSortable", publicName: "eclSortable", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sortButtonAriaLabel: { classPropertyName: "sortButtonAriaLabel", publicName: "sortButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "ariaSort", "attr.data-ecl-table-sort-toggle": "eclSortable()", "attr.scope": "scope()", "attr.id": "headerId()", "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableHeader]',
+                    host: {
+                        '[attr.aria-sort]': 'ariaSort',
+                        '[attr.data-ecl-table-sort-toggle]': 'eclSortable()',
+                        '[attr.scope]': 'scope()',
+                        '[attr.id]': 'headerId()',
+                        '[class]': 'cssClasses',
+                        '(click)': 'onClick($event)',
+                    },
                 }]
-        }], propDecorators: { ariaSort: [{
-                type: HostBinding,
-                args: ['attr.aria-sort']
-            }], eclSortable: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ecl-table-sort-toggle']
-            }], scope: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.scope']
-            }], id: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.id']
-            }], sortButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortButtonAriaLabel", required: false }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], sort: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { eclSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclSortable", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sortButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortButtonAriaLabel", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }] } });
 /**
  * Directive for applying ECL row styling to a table row element.
  */
@@ -398,17 +387,17 @@ class EclTableRowDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-table__row')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableRowDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableRowDirective, isStandalone: true, selector: "[eclTableRow]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableRowDirective, isStandalone: true, selector: "[eclTableRow]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableRow]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Directive for applying ECL body styling to a table body element.
  */
@@ -420,62 +409,70 @@ class EclTableBodyDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-table__body')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableBodyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableBodyDirective, isStandalone: true, selector: "[eclTableBody]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableBodyDirective, isStandalone: true, selector: "[eclTableBody]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableBodyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableBody]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Directive for styling individual table cells in the ECL table.
  */
 class EclTableCellDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Provides a reference to the related table header.
+         * Sets the `data-ecl-table-header` attribute for accessibility or responsive behavior.
+         */
+        this.eclTableCellHeader = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "eclTableCellHeader" }] : /* istanbul ignore next */ []));
         /**
          * If `true`, applies additional group styling to the cell.
          */
-        this.isGroup = false;
+        this.isGroup = input(false, { ...(ngDevMode ? { debugName: "isGroup" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     /**
      * Computes and applies appropriate CSS classes for the table cell.
      */
     get cssClasses() {
-        return [super.getCssClasses('ecl-table__cell'), this.isGroup ? 'ecl-table__cell--group' : ''].join(' ').trim();
+        return [super.getCssClasses('ecl-table__cell'), this.isGroup() ? 'ecl-table__cell--group' : ''].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableCellDirective, isStandalone: true, selector: "[eclTableCell]", inputs: { eclTableCellHeader: "eclTableCellHeader", isGroup: "isGroup" }, host: { properties: { "attr.data-ecl-table-header": "this.eclTableCellHeader", "class.ecl-table__cell--group": "this.isGroup", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclTableCellDirective, isStandalone: true, selector: "[eclTableCell]", inputs: { eclTableCellHeader: { classPropertyName: "eclTableCellHeader", publicName: "eclTableCellHeader", isSignal: true, isRequired: false, transformFunction: null }, isGroup: { classPropertyName: "isGroup", publicName: "isGroup", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ecl-table-header": "eclTableCellHeader()", "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableCell]',
+                    host: {
+                        '[attr.data-ecl-table-header]': 'eclTableCellHeader()',
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { eclTableCellHeader: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ecl-table-header']
-            }], isGroup: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.ecl-table__cell--group']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { eclTableCellHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTableCellHeader", required: false }] }], isGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroup", required: false }] }] } });
 /**
  * Directive used to group multiple table cells under a shared header group.
  */
 class EclTableCellGroupDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Sets the `data-ecl-table-header-group` attribute to link to a header group.
+         */
+        this.eclTableCellGroup = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "eclTableCellGroup" }] : /* istanbul ignore next */ []));
+        /**
+         * Writable internal group value, seeded from the `eclTableCellGroup` input.
+         * An empty string is normalized to `null` so the attribute is omitted.
+         */
+        this.cellGroup = linkedSignal(() => this.eclTableCellGroup(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellGroup" }] : /* istanbul ignore next */ []));
         this.cd = inject(ChangeDetectorRef);
     }
     /**
@@ -488,26 +485,22 @@ class EclTableCellGroupDirective extends ECLBaseDirective {
      * Ensures `data-ecl-table-header-group` is not empty and triggers change detection.
      */
     ngAfterViewInit() {
-        this.eclTableCellGroup = this.eclTableCellGroup !== '' ? this.eclTableCellGroup : null;
+        this.cellGroup.set(this.cellGroup() !== '' ? this.cellGroup() : null);
         this.cd.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableCellGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableCellGroupDirective, isStandalone: true, selector: "[eclTableCellGroup]", inputs: { eclTableCellGroup: "eclTableCellGroup" }, host: { properties: { "attr.data-ecl-table-header-group": "this.eclTableCellGroup", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclTableCellGroupDirective, isStandalone: true, selector: "[eclTableCellGroup]", inputs: { eclTableCellGroup: { classPropertyName: "eclTableCellGroup", publicName: "eclTableCellGroup", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ecl-table-header-group": "cellGroup()", "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableCellGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableCellGroup]',
+                    host: {
+                        '[attr.data-ecl-table-header-group]': 'cellGroup()',
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { eclTableCellGroup: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ecl-table-header-group']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { eclTableCellGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTableCellGroup", required: false }] }] } });
 /**
  * Directive for applying ECL responsive wrapper to a table container.
  */
@@ -519,40 +512,33 @@ class EclTableResponsiveDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-table-responsive')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableResponsiveDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableResponsiveDirective, isStandalone: true, selector: "[eclTableResponsive]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableResponsiveDirective, isStandalone: true, selector: "[eclTableResponsive]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableResponsiveDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableResponsive]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Directive for applying styling to a table caption element.
  */
 class EclTableCaptionDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies the `ecl-table__caption` class to the caption.
-         */
-        this.hasClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableCaptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableCaptionDirective, isStandalone: true, selector: "caption[eclTableCaption]", host: { properties: { "class.ecl-table__caption": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTableCaptionDirective, isStandalone: true, selector: "caption[eclTableCaption]", host: { properties: { "class.ecl-table__caption": "true" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTableCaptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'caption[eclTableCaption]',
+                    host: {
+                        '[class.ecl-table__caption]': 'true',
+                    },
                 }]
-        }], propDecorators: { hasClass: [{
-                type: HostBinding,
-                args: ['class.ecl-table__caption']
-            }] } });
+        }] });
 
 const EUI_ECL_TABLE = [
     EclTableCaptionDirective,