@eagami/ui 5.41.0 → 5.42.0

package/fesm2022/eagami-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, untracked, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, RendererStyleFlags2, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID, afterRenderEffect } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, DestroyRef, Injector, afterNextRender, viewChild, ElementRef, untracked, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, RendererStyleFlags2, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID, afterRenderEffect } from '@angular/core';
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TouchedChangeEvent, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /** DI token carrying the consumer-supplied i18n configuration. */
 const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
@@ -4210,32 +4210,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--error\"\n    [id]=\"id() + '-error'\"\n    role=\"alert\">\n    <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n    {{ error() }}\n  </p>\n} @else if (hint()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--hint\"\n    [id]=\"id() + '-hint'\">\n    {{ hint() }}\n  </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em;transform:translateY(-.0625em)}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
+/**
+ * Tracks where the press behind the current `click` started and ended.
+ *
+ * A `click` is dispatched on the nearest common ancestor of the press and the
+ * release, so a drag that begins on a panel and ends on the backdrop arrives as
+ * a click on the backdrop. Dismissal handlers that only read `event.target`
+ * therefore treat "select text in a dialog, release outside it" as an outside
+ * click, and shut the dialog under the user. Consulting both ends of the press
+ * keeps a dismissal to presses that stayed outside from start to finish.
+ *
+ * Both ends read `null` for a click with no pointer behind it (keyboard
+ * activation, `element.click()`), which every check below treats as a plain
+ * click on its target.
+ *
+ * It also knows whether a press is still in progress, so work that would move
+ * content under the pointer can wait until the press has landed its click.
+ */
+class PointerPressTracker {
+    downTarget = null;
+    upTarget = null;
+    pressing = false;
+    pressEndCallbacks = new Set();
+    onDown = (event) => {
+        this.downTarget = event.target;
+        this.upTarget = null;
+        this.pressing = true;
+    };
+    onUp = (event) => {
+        this.upTarget = event.target;
+    };
+    // A click is already bound to its target by the time capture listeners run,
+    // so work released from here can no longer redirect it
+    onPressEnd = () => {
+        this.pressing = false;
+        const callbacks = [...this.pressEndCallbacks];
+        this.pressEndCallbacks.clear();
+        callbacks.forEach(callback => callback());
+    };
+    // A keyboard-driven click carries no pointer events of its own, and would
+    // otherwise be read against whichever press came before it
+    onKeydown = () => {
+        this.downTarget = null;
+        this.upTarget = null;
+        this.onPressEnd();
+    };
+    constructor() {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        // Capture phase, so a handler that stops propagation cannot hide the press
+        document.addEventListener('pointerdown', this.onDown, true);
+        document.addEventListener('pointerup', this.onUp, true);
+        document.addEventListener('click', this.onPressEnd, true);
+        document.addEventListener('pointercancel', this.onPressEnd, true);
+        document.addEventListener('keydown', this.onKeydown, true);
+        inject(DestroyRef).onDestroy(() => {
+            document.removeEventListener('pointerdown', this.onDown, true);
+            document.removeEventListener('pointerup', this.onUp, true);
+            document.removeEventListener('click', this.onPressEnd, true);
+            document.removeEventListener('pointercancel', this.onPressEnd, true);
+            document.removeEventListener('keydown', this.onKeydown, true);
+        });
+    }
+    /** True when either end of the press landed on `el` or inside it. */
+    touchedInside(el) {
+        if (!el) {
+            return false;
+        }
+        return ((this.downTarget !== null && el.contains(this.downTarget)) ||
+            (this.upTarget !== null && el.contains(this.upTarget)));
+    }
+    /** True when neither end of the press landed anywhere but `el` itself. */
+    stayedOn(el) {
+        if (!el) {
+            return false;
+        }
+        return ((this.downTarget === null || this.downTarget === el) &&
+            (this.upTarget === null || this.upTarget === el));
+    }
+    /**
+     * Runs `callback` once the press in progress has landed its click or been
+     * cancelled, or straight away when no press is in progress. Returns a
+     * function that drops the pending call.
+     */
+    whenPressEnds(callback) {
+        if (!this.pressing) {
+            callback();
+            return () => undefined;
+        }
+        this.pressEndCallbacks.add(callback);
+        return () => this.pressEndCallbacks.delete(callback);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Derives a form control's display error from, in priority order: an explicit
  * `errorMsg`, a consumer `errorMessages` override, then the library's localized
  * default for the active `ValidationErrors` key. Auto-derived messages surface
  * only once the bound control is `invalid && touched`, matching the moment a
- * user expects validation feedback. The control arrives as a signal so callers
- * decide how it is resolved: from the host's own `NgControl` (CVA components)
- * or from projected content (`<ea-form-field>`).
+ * user expects validation feedback. A message revealed by a pointer press
+ * moving focus away waits until that press has landed its click. The control
+ * arrives as a signal so callers decide how it is resolved: from the host's own
+ * `NgControl` (CVA components) or from projected content (`<ea-form-field>`).
  */
 function controlErrorStateFrom(control, config) {
     const i18n = inject(EagamiI18nService);
+    const press = inject(PointerPressTracker);
     // Bumped on every status/touched change so the computed re-reads the control
     const revision = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    // The message a blur reveals grows the field and shifts the layout under the
+    // pointer, so while the press behind that blur is down the click would land
+    // on whatever moved into its place
+    const revealPending = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealPending" }] : /* istanbul ignore next */ []));
     effect(onCleanup => {
         const ctrl = control();
         if (!ctrl) {
             return;
         }
-        const sub = ctrl.events.subscribe(() => revision.update(r => r + 1));
-        onCleanup(() => sub.unsubscribe());
+        let dropPendingReveal = null;
+        const sub = ctrl.events.subscribe(event => {
+            if (event instanceof TouchedChangeEvent && event.touched) {
+                dropPendingReveal?.();
+                revealPending.set(true);
+                dropPendingReveal = press.whenPressEnds(() => revealPending.set(false));
+            }
+            revision.update(r => r + 1);
+        });
+        onCleanup(() => {
+            sub.unsubscribe();
+            dropPendingReveal?.();
+            revealPending.set(false);
+        });
     });
     const autoError = computed(() => {
         revision();
         const ctrl = control();
-        if (!ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) {
+        if (revealPending() || !ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) {
             return null;
         }
         return resolveValidationMessage(ctrl.errors, config.errorMessages(), i18n.messages());
@@ -4315,74 +4434,6 @@ function isRtl(element) {
     return getComputedStyle(element).direction === 'rtl';
 }
 
-/**
- * Tracks where the press behind the current `click` started and ended.
- *
- * A `click` is dispatched on the nearest common ancestor of the press and the
- * release, so a drag that begins on a panel and ends on the backdrop arrives as
- * a click on the backdrop. Dismissal handlers that only read `event.target`
- * therefore treat "select text in a dialog, release outside it" as an outside
- * click, and shut the dialog under the user. Consulting both ends of the press
- * keeps a dismissal to presses that stayed outside from start to finish.
- *
- * Both ends read `null` for a click with no pointer behind it (keyboard
- * activation, `element.click()`), which every check below treats as a plain
- * click on its target.
- */
-class PointerPressTracker {
-    downTarget = null;
-    upTarget = null;
-    onDown = (event) => {
-        this.downTarget = event.target;
-        this.upTarget = null;
-    };
-    onUp = (event) => {
-        this.upTarget = event.target;
-    };
-    // A keyboard-driven click carries no pointer events of its own, and would
-    // otherwise be read against whichever press came before it
-    onKeydown = () => {
-        this.downTarget = null;
-        this.upTarget = null;
-    };
-    constructor() {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        // Capture phase, so a handler that stops propagation cannot hide the press
-        document.addEventListener('pointerdown', this.onDown, true);
-        document.addEventListener('pointerup', this.onUp, true);
-        document.addEventListener('keydown', this.onKeydown, true);
-        inject(DestroyRef).onDestroy(() => {
-            document.removeEventListener('pointerdown', this.onDown, true);
-            document.removeEventListener('pointerup', this.onUp, true);
-            document.removeEventListener('keydown', this.onKeydown, true);
-        });
-    }
-    /** True when either end of the press landed on `el` or inside it. */
-    touchedInside(el) {
-        if (!el) {
-            return false;
-        }
-        return ((this.downTarget !== null && el.contains(this.downTarget)) ||
-            (this.upTarget !== null && el.contains(this.upTarget)));
-    }
-    /** True when neither end of the press landed anywhere but `el` itself. */
-    stayedOn(el) {
-        if (!el) {
-            return false;
-        }
-        return ((this.downTarget === null || this.downTarget === el) &&
-            (this.upTarget === null || this.upTarget === el));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
 /*
  * A modal `<dialog>` (`showModal()`) renders in the browser's top layer, which
  * paints above every z-index in the normal layer. An overlay portaled to
@@ -9460,6 +9511,14 @@ class DataTableComponent {
     ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     data = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Rows holding each column's widest content. They are laid out but never shown,
+     * so column widths come from them rather than from whichever rows are in `data`,
+     * and stay put across pages and while data loads. Moot with `stickyHeader`, whose
+     * columns share the width equally unless given a `width`.
+     */
+    sizingRows = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizingRows" }] : /* istanbul ignore next */ []));
     /** Accessible name for the table, announced when it takes focus as a grid. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** Visible caption rendered above the table; also names it for assistive technology. */
@@ -9693,7 +9752,7 @@ class DataTableComponent {
             ?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      (keydown)=\"onGridKeydown($event)\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--2xs{--ea-data-table-font-size: var(--font-size-2xs)}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:calc(var(--ea-data-table-font-size) * .5) calc(var(--ea-data-table-font-size) * .75);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, sizingRows: { classPropertyName: "sizingRows", publicName: "sizingRows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      (keydown)=\"onGridKeydown($event)\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      @if (sizingRows().length) {\n        <tbody\n          class=\"ea-data-table__sizing\"\n          aria-hidden=\"true\">\n          @for (row of sizingRows(); track $index) {\n            <tr class=\"ea-data-table__row ea-data-table__row--sizing\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell ea-data-table__cell--sizing\"\n                  [style.width]=\"col.width ?? null\">\n                  <div class=\"ea-data-table__sizing-content\">\n                    @if (col.cellTemplate) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"col.cellTemplate\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          value: getCellValue(row, col.key),\n                        }\" />\n                    } @else if (col.format) {\n                      {{ col.format(getCellValue(row, col.key)) }}\n                    } @else {\n                      {{ getCellValue(row, col.key) }}\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--2xs{--ea-data-table-font-size: var(--font-size-2xs)}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:calc(var(--ea-data-table-font-size) * .5) calc(var(--ea-data-table-font-size) * .75);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table__sizing .ea-data-table__row{border-bottom:none}.ea-data-table__sizing .ea-data-table__cell{padding-top:0;padding-bottom:0}.ea-data-table__sizing-content{overflow:hidden;visibility:hidden;height:0}.ea-data-table--sticky .ea-data-table__sizing{display:none}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -9703,8 +9762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         ChevronsUpDownIconComponent,
                         NgClass,
                         NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      (keydown)=\"onGridKeydown($event)\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--2xs{--ea-data-table-font-size: var(--font-size-2xs)}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:calc(var(--ea-data-table-font-size) * .5) calc(var(--ea-data-table-font-size) * .75);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      (keydown)=\"onGridKeydown($event)\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      @if (sizingRows().length) {\n        <tbody\n          class=\"ea-data-table__sizing\"\n          aria-hidden=\"true\">\n          @for (row of sizingRows(); track $index) {\n            <tr class=\"ea-data-table__row ea-data-table__row--sizing\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell ea-data-table__cell--sizing\"\n                  [style.width]=\"col.width ?? null\">\n                  <div class=\"ea-data-table__sizing-content\">\n                    @if (col.cellTemplate) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"col.cellTemplate\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          value: getCellValue(row, col.key),\n                        }\" />\n                    } @else if (col.format) {\n                      {{ col.format(getCellValue(row, col.key)) }}\n                    } @else {\n                      {{ getCellValue(row, col.key) }}\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--2xs{--ea-data-table-font-size: var(--font-size-2xs)}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:calc(var(--ea-data-table-font-size) * .5) calc(var(--ea-data-table-font-size) * .75);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table__sizing .ea-data-table__row{border-bottom:none}.ea-data-table__sizing .ea-data-table__cell{padding-top:0;padding-bottom:0}.ea-data-table__sizing-content{overflow:hidden;visibility:hidden;height:0}.ea-data-table--sticky .ea-data-table__sizing{display:none}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], sizingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizingRows", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
 
 /**
  * Verification code entry made up of one input per digit. Auto-advances on