@eagami/ui 5.41.1 → 5.42.0

package/fesm2022/eagami-ui.mjs

@@ -9511,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. */
@@ -9744,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,
@@ -9754,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