@eui/components 18.0.0-next.29 → 18.0.0-next.30

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

@@ -201,104 +201,17 @@ var MultisortParam = class {
 };
 
 // eui-table.component.mjs
-import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation } from "@angular/core";
-import { BehaviorSubject as BehaviorSubject3, combineLatest, Subject, Subscription } from "rxjs";
-import { takeUntil } from "rxjs/operators";
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation, booleanAttribute } from "@angular/core";
+import { BehaviorSubject as BehaviorSubject3, combineLatest, Subject, Subscription, takeUntil } from "rxjs";
 import { EuiTemplateDirective } from "@eui/components/directives";
-import { BaseDirective } from "@eui/components/shared";
+import { BaseStatesDirective } from "@eui/components/shared";
 import * as i03 from "@angular/core";
-import * as i3 from "@angular/common";
-var EuiTableComponent = class _EuiTableComponent extends BaseDirective {
-  get hasLoading() {
-    return this.loading;
-  }
-  get loading() {
-    return this._loading;
-  }
-  set loading(value) {
-    this._loading = coerceBooleanProperty(value);
-  }
-  get asyncTable() {
-    return this._asyncTable;
-  }
-  set asyncTable(value) {
-    this._asyncTable = coerceBooleanProperty(value);
-  }
-  get paginable() {
-    return this._paginable;
-  }
-  set paginable(value) {
-    this._paginable = coerceBooleanProperty(value);
-  }
-  get euiTableResponsive() {
-    return this._euiTableResponsive;
-  }
-  set euiTableResponsive(value) {
-    this._euiTableResponsive = coerceBooleanProperty(value);
-  }
-  get euiTableFixedLayout() {
-    return this._euiTableFixedLayout;
-  }
-  set euiTableFixedLayout(value) {
-    this._euiTableFixedLayout = coerceBooleanProperty(value);
-  }
-  get euiTableDraggable() {
-    return this._euiTableDraggable;
-  }
-  set euiTableDraggable(value) {
-    this._euiTableDraggable = coerceBooleanProperty(value);
-  }
-  get euiTableCards() {
-    return this._euiTableCards;
-  }
-  set euiTableCards(value) {
-    this._euiTableCards = coerceBooleanProperty(value);
-  }
-  get euiTableBordered() {
-    return this._euiTableBordered;
-  }
-  set euiTableBordered(value) {
-    this._euiTableBordered = coerceBooleanProperty(value);
-  }
-  get euiTableCompact() {
-    return this._euiTableCompact;
-  }
-  set euiTableCompact(value) {
-    this._euiTableCompact = coerceBooleanProperty(value);
-  }
-  get hasStickyHeader() {
-    return this._hasStickyHeader;
-  }
-  set hasStickyHeader(value) {
-    this._hasStickyHeader = coerceBooleanProperty(value);
-  }
-  get hasStickyColumns() {
-    return this._hasStickyColumns;
-  }
-  set hasStickyColumns(value) {
-    this._hasStickyColumns = coerceBooleanProperty(value);
-  }
-  get isSelectOnlyVisibleRows() {
-    return this._isSelectOnlyVisibleRows;
-  }
-  set isSelectOnlyVisibleRows(value) {
-    this._isSelectOnlyVisibleRows = coerceBooleanProperty(value);
-  }
-  get isColsOrderable() {
-    return this._isColsOrderable;
-  }
-  set isColsOrderable(value) {
-    this._isColsOrderable = coerceBooleanProperty(value);
-  }
-  get isHoverable() {
-    return this._isHoverable;
-  }
-  set isHoverable(value) {
-    this._isHoverable = coerceBooleanProperty(value);
-  }
+import * as i3 from "@eui/components/shared";
+import * as i4 from "@angular/common";
+var EuiTableComponent = class _EuiTableComponent {
   get cssClasses() {
     return [
+      this.baseStatesDirective.getCssClasses("eui-table"),
       this.euiTableResponsive ? "eui-table--responsive" : "",
       this.euiTableFixedLayout ? "eui-table--fixed-layout" : "",
       this.euiTableBordered ? "eui-table--bordered" : "",
@@ -309,19 +222,33 @@ var EuiTableComponent = class _EuiTableComponent extends BaseDirective {
       this.hasStickyColumns ? "eui-table--sticky-columns" : "",
       this.isColsOrderable ? "eui-table--cols-orderable" : "",
       this.isHoverable ? "eui-table--hoverable" : "",
-      super.getCssClasses("eui-table")
+      this.loading ? "eui-table__loading" : ""
     ].join(" ").trim();
   }
-  constructor(euiTableSortService, cd, euiTableSelectableRowService, elementRef) {
-    super();
+  constructor(euiTableSortService, cd, euiTableSelectableRowService, elementRef, baseStatesDirective) {
     this.euiTableSortService = euiTableSortService;
     this.cd = cd;
     this.euiTableSelectableRowService = euiTableSelectableRowService;
     this.elementRef = elementRef;
+    this.baseStatesDirective = baseStatesDirective;
     this.rows = [];
     this.propId = "id";
+    this.e2eAttr = "eui-table";
     this.preselectedRows = [];
-    this.string = "eui-table";
+    this.loading = false;
+    this.asyncTable = false;
+    this.paginable = false;
+    this.euiTableResponsive = false;
+    this.euiTableFixedLayout = false;
+    this.euiTableDraggable = false;
+    this.euiTableCards = false;
+    this.euiTableBordered = false;
+    this.euiTableCompact = false;
+    this.hasStickyHeader = false;
+    this.hasStickyColumns = false;
+    this.isSelectOnlyVisibleRows = false;
+    this.isColsOrderable = false;
+    this.isHoverable = false;
     this.selectedRows = new EventEmitter();
     this.sortChange = new EventEmitter();
     this.multiSortChange = new EventEmitter();
@@ -330,20 +257,6 @@ var EuiTableComponent = class _EuiTableComponent extends BaseDirective {
     this.pageSize = 0;
     this.showStickyHeader = false;
     this.filteredRows = [];
-    this._loading = false;
-    this._asyncTable = false;
-    this._paginable = false;
-    this._euiTableResponsive = false;
-    this._euiTableFixedLayout = false;
-    this._euiTableDraggable = false;
-    this._euiTableCards = false;
-    this._euiTableBordered = false;
-    this._euiTableCompact = false;
-    this._hasStickyHeader = false;
-    this._hasStickyColumns = false;
-    this._isSelectOnlyVisibleRows = false;
-    this._isColsOrderable = false;
-    this._isHoverable = false;
     this.rowsSrc = null;
     this.destroy$ = new Subject();
     this.tableFeaturesHandlerSubscription = new Subscription();
@@ -390,9 +303,6 @@ var EuiTableComponent = class _EuiTableComponent extends BaseDirective {
     this.rowsSrc = [...this.rows];
   }
   ngAfterContentInit() {
-    if (!this.e2eAttr) {
-      this.e2eAttr = "eui-table";
-    }
     this.templates.forEach((item) => {
       if (item.getType() === "header") {
         this.headerTemplate = item.template;
@@ -432,9 +342,6 @@ var EuiTableComponent = class _EuiTableComponent extends BaseDirective {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();
   }
-  trackByFn(index) {
-    return index;
-  }
   selectAllRows() {
     this.euiTableSelectableRowService.selectAllRows();
   }
@@ -716,31 +623,77 @@ var EuiTableComponent = class _EuiTableComponent extends BaseDirective {
     return prop ? prop.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj || self) : null;
   }
   static {
-    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _EuiTableComponent, deps: [{ token: EuiTableSortService }, { token: i03.ChangeDetectorRef }, { token: EuiTableSelectableRowService }, { token: i03.ElementRef }], target: i03.ɵɵFactoryTarget.Component });
+    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _EuiTableComponent, deps: [{ token: EuiTableSortService }, { token: i03.ChangeDetectorRef }, { token: EuiTableSelectableRowService }, { token: i03.ElementRef }, { token: i3.BaseStatesDirective }], target: i03.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", loading: "loading", asyncTable: "asyncTable", paginable: "paginable", euiTableResponsive: "euiTableResponsive", euiTableFixedLayout: "euiTableFixedLayout", euiTableDraggable: "euiTableDraggable", euiTableCards: "euiTableCards", euiTableBordered: "euiTableBordered", euiTableCompact: "euiTableCompact", hasStickyHeader: "hasStickyHeader", hasStickyColumns: "hasStickyColumns", isSelectOnlyVisibleRows: "isSelectOnlyVisibleRows", isColsOrderable: "isColsOrderable", isHoverable: "isHoverable" }, outputs: { selectedRows: "selectedRows", sortChange: "sortChange", multiSortChange: "multiSortChange" }, host: { properties: { "class": "this.cssClasses", "class.eui-table__loading": "this.hasLoading" } }, providers: [EuiTableSortService, EuiTableSelectableRowService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i03, template: '<thead #theadRef *ngIf="headerTemplate">\n    <ng-template [ngTemplateOutlet]="headerTemplate"></ng-template>\n</thead>\n<tbody #tbodyRef *ngIf="bodyTemplate">\n    <ng-container *ngFor="let row of rowsRendered; let i = index; trackBy: trackByFn">\n        <ng-template\n            [ngTemplateOutlet]="bodyTemplate"\n            [ngTemplateOutletContext]="{ $implicit: row, index: i + page * pageSize }">\n        </ng-template>\n    </ng-container>\n    <ng-container *ngIf="emptyMessageTemplate && rowsRendered.length === 0">\n        <ng-template [ngTemplateOutlet]="emptyMessageTemplate"></ng-template>\n    </ng-container>\n</tbody>\n<tfoot #tfootRef *ngIf="footerTemplate">\n    <ng-template [ngTemplateOutlet]="footerTemplate"></ng-template>\n</tfoot>\n', styles: ['.eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-base-color-grey-25);border-color:transparent;padding:calc(var(--eui-base-spacing-m) - 2px) var(--eui-base-spacing-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-hover-background-color: var(--eui-base-color-primary-10);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-base-color-primary-25)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-base-color-white);color:var(--eui-base-color-info-100);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:"";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);text-align:left;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n'], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i03.ChangeDetectionStrategy.OnPush, encapsulation: i03.ViewEncapsulation.None });
+    this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", e2eAttr: "e2eAttr", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", loading: ["loading", "loading", booleanAttribute], asyncTable: ["asyncTable", "asyncTable", booleanAttribute], paginable: ["paginable", "paginable", booleanAttribute], euiTableResponsive: ["euiTableResponsive", "euiTableResponsive", booleanAttribute], euiTableFixedLayout: ["euiTableFixedLayout", "euiTableFixedLayout", booleanAttribute], euiTableDraggable: ["euiTableDraggable", "euiTableDraggable", booleanAttribute], euiTableCards: ["euiTableCards", "euiTableCards", booleanAttribute], euiTableBordered: ["euiTableBordered", "euiTableBordered", booleanAttribute], euiTableCompact: ["euiTableCompact", "euiTableCompact", booleanAttribute], hasStickyHeader: ["hasStickyHeader", "hasStickyHeader", booleanAttribute], hasStickyColumns: ["hasStickyColumns", "hasStickyColumns", booleanAttribute], isSelectOnlyVisibleRows: ["isSelectOnlyVisibleRows", "isSelectOnlyVisibleRows", booleanAttribute], isColsOrderable: ["isColsOrderable", "isColsOrderable", booleanAttribute], isHoverable: ["isHoverable", "isHoverable", booleanAttribute] }, outputs: { selectedRows: "selectedRows", sortChange: "sortChange", multiSortChange: "multiSortChange" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiTableSortService, EuiTableSelectableRowService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective }], ngImport: i03, template: '@if (headerTemplate) {\n    <thead #theadRef>\n        <ng-template [ngTemplateOutlet]="headerTemplate"></ng-template>\n    </thead>\n}\n@if (bodyTemplate) {\n    <tbody #tbodyRef>\n        @for (row of rowsRendered; let i = $index; track row) {\n            <ng-template\n                [ngTemplateOutlet]="bodyTemplate"\n                [ngTemplateOutletContext]="{ $implicit: row, index: i + page * pageSize }">\n            </ng-template>\n        }\n\n        @if (emptyMessageTemplate && rowsRendered.length === 0) {\n            <ng-template [ngTemplateOutlet]="emptyMessageTemplate"></ng-template>\n        }\n    </tbody>\n}\n@if (footerTemplate) {\n    <tfoot #tfootRef>\n        <ng-template [ngTemplateOutlet]="footerTemplate"></ng-template>\n    </tfoot>\n}\n', styles: ['.eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-base-color-grey-25);border-color:transparent;padding:calc(var(--eui-base-spacing-m) - 2px) var(--eui-base-spacing-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-hover-background-color: var(--eui-base-color-primary-10);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-base-color-info-25)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-base-color-white);color:var(--eui-base-color-info-100);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-info-130);content:"";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);text-align:left;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n'], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i03.ChangeDetectionStrategy.OnPush, encapsulation: i03.ViewEncapsulation.None });
   }
 };
 i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: EuiTableComponent, decorators: [{
   type: Component,
-  args: [{ selector: "eui-table, table[euiTable]", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [EuiTableSortService, EuiTableSelectableRowService], template: '<thead #theadRef *ngIf="headerTemplate">\n    <ng-template [ngTemplateOutlet]="headerTemplate"></ng-template>\n</thead>\n<tbody #tbodyRef *ngIf="bodyTemplate">\n    <ng-container *ngFor="let row of rowsRendered; let i = index; trackBy: trackByFn">\n        <ng-template\n            [ngTemplateOutlet]="bodyTemplate"\n            [ngTemplateOutletContext]="{ $implicit: row, index: i + page * pageSize }">\n        </ng-template>\n    </ng-container>\n    <ng-container *ngIf="emptyMessageTemplate && rowsRendered.length === 0">\n        <ng-template [ngTemplateOutlet]="emptyMessageTemplate"></ng-template>\n    </ng-container>\n</tbody>\n<tfoot #tfootRef *ngIf="footerTemplate">\n    <ng-template [ngTemplateOutlet]="footerTemplate"></ng-template>\n</tfoot>\n', styles: ['.eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-base-color-grey-25);border-color:transparent;padding:calc(var(--eui-base-spacing-m) - 2px) var(--eui-base-spacing-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-hover-background-color: var(--eui-base-color-primary-10);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-base-color-primary-25)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-base-color-white);color:var(--eui-base-color-info-100);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:"";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);text-align:left;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n'] }]
-}], ctorParameters: () => [{ type: EuiTableSortService }, { type: i03.ChangeDetectorRef }, { type: EuiTableSelectableRowService }, { type: i03.ElementRef }], propDecorators: { rows: [{
+  args: [{ selector: "eui-table, table[euiTable]", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [EuiTableSortService, EuiTableSelectableRowService], hostDirectives: [
+    {
+      directive: BaseStatesDirective,
+      inputs: []
+    }
+  ], template: '@if (headerTemplate) {\n    <thead #theadRef>\n        <ng-template [ngTemplateOutlet]="headerTemplate"></ng-template>\n    </thead>\n}\n@if (bodyTemplate) {\n    <tbody #tbodyRef>\n        @for (row of rowsRendered; let i = $index; track row) {\n            <ng-template\n                [ngTemplateOutlet]="bodyTemplate"\n                [ngTemplateOutletContext]="{ $implicit: row, index: i + page * pageSize }">\n            </ng-template>\n        }\n\n        @if (emptyMessageTemplate && rowsRendered.length === 0) {\n            <ng-template [ngTemplateOutlet]="emptyMessageTemplate"></ng-template>\n        }\n    </tbody>\n}\n@if (footerTemplate) {\n    <tfoot #tfootRef>\n        <ng-template [ngTemplateOutlet]="footerTemplate"></ng-template>\n    </tfoot>\n}\n', styles: ['.eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-base-color-grey-25);border-color:transparent;padding:calc(var(--eui-base-spacing-m) - 2px) var(--eui-base-spacing-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-hover-background-color: var(--eui-base-color-primary-10);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-base-color-info-25)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-base-color-white);color:var(--eui-base-color-info-100);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-info-130);content:"";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);text-align:left;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n'] }]
+}], ctorParameters: () => [{ type: EuiTableSortService }, { type: i03.ChangeDetectorRef }, { type: EuiTableSelectableRowService }, { type: i03.ElementRef }, { type: i3.BaseStatesDirective }], propDecorators: { cssClasses: [{
+  type: HostBinding,
+  args: ["class"]
+}], rows: [{
   type: Input
 }], propId: [{
   type: Input
+}], e2eAttr: [{
+  type: Input
 }], paginator: [{
   type: Input
 }], filter: [{
   type: Input
 }], preselectedRows: [{
   type: Input
-}], string: [{
-  type: HostBinding,
-  args: ["class"]
-}], hasLoading: [{
-  type: HostBinding,
-  args: ["class.eui-table__loading"]
+}], loading: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], asyncTable: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], paginable: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], euiTableResponsive: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], euiTableFixedLayout: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], euiTableDraggable: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], euiTableCards: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], euiTableBordered: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], euiTableCompact: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], hasStickyHeader: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], hasStickyColumns: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isSelectOnlyVisibleRows: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isColsOrderable: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isHoverable: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
 }], selectedRows: [{
   type: Output
 }], sortChange: [{
@@ -759,95 +712,37 @@ i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
 }], tfootRef: [{
   type: ViewChild,
   args: ["tfootRef"]
-}], loading: [{
-  type: Input
-}], asyncTable: [{
-  type: Input
-}], paginable: [{
-  type: Input
-}], euiTableResponsive: [{
-  type: Input
-}], euiTableFixedLayout: [{
-  type: Input
-}], euiTableDraggable: [{
-  type: Input
-}], euiTableCards: [{
-  type: Input
-}], euiTableBordered: [{
-  type: Input
-}], euiTableCompact: [{
-  type: Input
-}], hasStickyHeader: [{
-  type: Input
-}], hasStickyColumns: [{
-  type: Input
-}], isSelectOnlyVisibleRows: [{
-  type: Input
-}], isColsOrderable: [{
-  type: Input
-}], isHoverable: [{
-  type: Input
-}], cssClasses: [{
-  type: HostBinding,
-  args: ["class"]
 }] } });
 
 // sortable-col/eui-table-sortable-col.component.mjs
-import { Component as Component2, Input as Input2, HostBinding as HostBinding2, ViewChild as ViewChild2 } from "@angular/core";
-import { Subject as Subject2, combineLatest as combineLatest2 } from "rxjs";
-import { takeUntil as takeUntil2 } from "rxjs/operators";
-import { coerceBooleanProperty as coerceBooleanProperty2, coerceNumberProperty } from "@angular/cdk/coercion";
+import { Component as Component2, Input as Input2, HostBinding as HostBinding2, ViewChild as ViewChild2, numberAttribute, booleanAttribute as booleanAttribute2 } from "@angular/core";
+import { Subject as Subject2, combineLatest as combineLatest2, takeUntil as takeUntil2 } from "rxjs";
 import { FormGroup as FormGroup2 } from "@angular/forms";
 import { EuiDropdownComponent } from "@eui/components/eui-dropdown";
 import * as i04 from "@angular/core";
 import * as i2 from "@angular/common";
 import * as i32 from "@angular/forms";
-import * as i4 from "@eui/components/eui-icon";
+import * as i42 from "@eui/components/eui-icon";
 import * as i5 from "@eui/components/eui-dropdown";
 import * as i6 from "@eui/components/eui-button";
 import * as i7 from "@eui/components/eui-feedback-message";
 import * as i8 from "@eui/components/eui-select";
 import * as i9 from "@ngx-translate/core";
 var EuiTableSortableColComponent = class _EuiTableSortableColComponent {
-  get defaultMultiOrder() {
-    return this._defaultMultiOrder;
-  }
-  set defaultMultiOrder(value) {
-    this._defaultMultiOrder = coerceNumberProperty(value);
-  }
-  get defaultOrder() {
-    return this._defaultOrder;
-  }
-  set defaultOrder(value) {
-    this._defaultOrder = coerceBooleanProperty2(value);
-  }
-  get sortDisabled() {
-    return this._sortDisabled;
-  }
-  set sortDisabled(value) {
-    this._sortDisabled = coerceBooleanProperty2(value);
-  }
-  get isMultiSortable() {
-    return this._isMultiSortable;
-  }
-  set isMultiSortable(value) {
-    this._isMultiSortable = coerceBooleanProperty2(value);
-  }
   get cssClasses() {
     return ["eui-table__sortable-col", this.sortDisabled ? "eui-table__sortable-col--disabled" : ""].join(" ").trim();
   }
-  constructor(euiTableSortService, cd) {
+  constructor(euiTableSortService) {
     this.euiTableSortService = euiTableSortService;
-    this.cd = cd;
     this.sortOrder = "desc";
+    this.defaultMultiOrder = null;
+    this.defaultOrder = false;
+    this.sortDisabled = false;
+    this.isMultiSortable = false;
     this.order = "desc";
     this.multisortParams = [];
     this.currentMultiSortPosition = 0;
     this.error = false;
-    this._defaultMultiOrder = null;
-    this._defaultOrder = false;
-    this._sortDisabled = false;
-    this._isMultiSortable = false;
     this.destroy$ = new Subject2();
   }
   ngOnInit() {
@@ -963,29 +858,27 @@ var EuiTableSortableColComponent = class _EuiTableSortableColComponent {
     return arr.filter((col) => col.name === el.name).length === 1;
   }
   static {
-    this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: _EuiTableSortableColComponent, deps: [{ token: EuiTableSortService }, { token: i04.ChangeDetectorRef }], target: i04.ɵɵFactoryTarget.Component });
+    this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: _EuiTableSortableColComponent, deps: [{ token: EuiTableSortService }], target: i04.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTableSortableColComponent, selector: "th[sortable]", inputs: { sortOn: "sortOn", sortOrder: "sortOrder", defaultMultiOrder: "defaultMultiOrder", defaultOrder: "defaultOrder", sortDisabled: "sortDisabled", isMultiSortable: "isMultiSortable" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: EuiDropdownComponent, descendants: true }], ngImport: i04, template: `<div class="eui-table__sortable-col-content">
+    this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EuiTableSortableColComponent, selector: "th[sortable]", inputs: { sortOn: "sortOn", sortOrder: "sortOrder", defaultMultiOrder: ["defaultMultiOrder", "defaultMultiOrder", numberAttribute], defaultOrder: ["defaultOrder", "defaultOrder", booleanAttribute2], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute2], isMultiSortable: ["isMultiSortable", "isMultiSortable", booleanAttribute2] }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: EuiDropdownComponent, descendants: true }], ngImport: i04, template: `<div class="eui-table__sortable-col-content">
     <ng-content></ng-content>
-    <button type="button" *ngIf="!sortDisabled" euiSizeS euiButton euiIconButton euiBasicButton class="eui-table__sortable-icon-button" (click)="click()">
-        <eui-icon-svg
-            *ngIf="!order"
-            icon="eui-swap-vertical"
-            fillColor="grey-50"
-            [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
-        <eui-icon-svg
-            *ngIf="order === 'asc'"
-            icon="eui-arrow-up"
-            fillColor="primary-100"
-            [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
-        <eui-icon-svg
-            *ngIf="order === 'desc'"
-            icon="eui-arrow-down"
-            fillColor="primary-100"
-            [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
-    </button>
-    <ng-template *ngIf="isMultiSortable" [ngTemplateOutlet]="sortDropdown"></ng-template>
+    @if (!sortDisabled) {
+        <button type="button" euiSizeS euiButton euiIconButton euiBasicButton class="eui-table__sortable-icon-button" (click)="click()">
+            @if (!order) {
+                <eui-icon-svg icon="eui-swap-vertical" fillColor="grey-50" [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
+            }
+            @if (order === 'asc') {
+                <eui-icon-svg icon="eui-arrow-up" fillColor="primary-100" [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
+            }
+            @if (order === 'desc') {
+                <eui-icon-svg icon="eui-arrow-down" fillColor="primary-100" [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
+            }
+        </button>
+    }
+    @if (isMultiSortable) {
+        <ng-template [ngTemplateOutlet]="sortDropdown"></ng-template>
+    }
 </div>
 <ng-template #sortDropdown let-index>
     <eui-dropdown [hasClosedOnClickInside]="false">
@@ -996,59 +889,43 @@ var EuiTableSortableColComponent = class _EuiTableSortableColComponent {
             <div class="eui-u-pt-xs eui-u-pl-s">
                 <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>
             </div>
-            <form [formGroup]="form" *ngIf="form">
-                <ng-container formArrayName="columns">
-                    <ng-container *ngFor="let columnForm of columns.controls; let i = index">
-                        <div class="eui-u-flex eui-u-p-s" [formGroup]="form.get('columns')['controls'][i]">
-                            <span euiLabel class="eui-u-mr-s">{{ i + 1 }}</span>
-                            <select euiSelect euiSizeS formControlName="name" class="eui-u-mr-s">
-                                <option value=""></option>
-                                <option *ngFor="let column of multisortParams" [value]="column.name">
-                                    {{ column.name }}
-                                </option>
-                            </select>
-                            <button type="button"
-                                *ngIf="!getOrderByIndex(i)"
-                                euiSizeS
-                                euiSecondary
-                                euiButton
-                                euiIconButton
-                                euiBasicButton
-                                (click)="onClickMultisortOrder(i + 1, 'asc')">
-                                <eui-icon-svg
-                                    icon="eui-swap-vertical"
-                                    [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
-                            </button>
-                            <button type="button"
-                                *ngIf="getOrderByIndex(i) === 'asc'"
-                                euiSizeS
-                                euiPrimary
-                                euiButton
-                                euiIconButton
-                                euiBasicButton
-                                (click)="onClickMultisortOrder(i + 1, 'desc')">
-                                <eui-icon-svg icon="eui-arrow-up" [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
-                            </button>
-                            <button type="button"
-                                *ngIf="getOrderByIndex(i) === 'desc'"
-                                euiSizeS
-                                euiPrimary
-                                euiButton
-                                euiIconButton
-                                euiBasicButton
-                                (click)="onClickMultisortOrder(i + 1, null)">
-                                <eui-icon-svg
-                                    icon="eui-arrow-down"
-                                    [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
-                            </button>
-                        </div>
+            @if (form) {
+                <form [formGroup]="form">
+                    <ng-container formArrayName="columns">
+                        @for (columnForm of columns.controls; let i = $index; track columnForm) {
+                            <div class="eui-u-flex eui-u-p-s" [formGroup]="form.get('columns')['controls'][i]">
+                                <span euiLabel class="eui-u-mr-s">{{ i + 1 }}</span>
+                                <select euiSelect euiSizeS formControlName="name" class="eui-u-mr-s">
+                                    <option value=""></option>
+                                    @for (column of multisortParams; track column) {
+                                        <option [value]="column.name">{{ column.name }}</option>
+                                    }
+                                </select>
+                                @if (!getOrderByIndex(i)) {
+                                    <button type="button" euiSizeS euiSecondary euiButton euiIconButton euiBasicButton (click)="onClickMultisortOrder(i + 1, 'asc')">
+                                        <eui-icon-svg icon="eui-swap-vertical" [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
+                                    </button>
+                                }
+                                @if (getOrderByIndex(i) === 'asc') {
+                                    <button type="button" euiSizeS euiPrimary euiButton euiIconButton euiBasicButton (click)="onClickMultisortOrder(i + 1, 'desc')">
+                                        <eui-icon-svg icon="eui-arrow-up" [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
+                                    </button>
+                                }
+                                @if (getOrderByIndex(i) === 'desc') {
+                                    <button type="button" euiSizeS euiPrimary euiButton euiIconButton euiBasicButton (click)="onClickMultisortOrder(i + 1, null)">
+                                        <eui-icon-svg icon="eui-arrow-down" [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
+                                    </button>
+                                }
+                            </div>
+                        }
                     </ng-container>
-                </ng-container>
-            </form>
-            <!-- Footer-->
-            <p class="eui-u-mt-none eui-u-mb-none eui-u-ml-s" *ngIf="error">
-                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>
-            </p>
+                </form>
+            }
+            @if (error) {
+                <p class="eui-u-mt-none eui-u-mb-none eui-u-ml-s">
+                    <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>
+                </p>
+            }
             <div class="eui-u-flex eui-u-flex-justify-content-between eui-u-p-s">
                 <button type="button" euiButton euiSizeS euiSecondary (click)="onCancelMultiSort()">{{ 'eui.CANCEL' | translate }}</button>
                 <button type="button" euiButton euiSizeS euiPrimary (click)="onSubmitMultiSort()">{{ 'eui.APPLY' | translate }}</button>
@@ -1056,31 +933,29 @@ var EuiTableSortableColComponent = class _EuiTableSortableColComponent {
         </eui-dropdown-content>
     </eui-dropdown>
 </ng-template>
-`, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i32.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i32.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i32.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i32.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i32.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i32.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i32.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i32.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i32.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.EuiFeedbackMessageComponent, selector: "eui-feedback-message" }, { kind: "component", type: i8.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i8.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i8.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i8.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i32.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i32.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i32.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i32.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i32.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i32.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i42.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i32.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i32.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i32.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.EuiFeedbackMessageComponent, selector: "eui-feedback-message" }, { kind: "component", type: i8.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i8.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i8.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i8.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
   }
 };
 i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: EuiTableSortableColComponent, decorators: [{
   type: Component2,
   args: [{ selector: "th[sortable]", template: `<div class="eui-table__sortable-col-content">
     <ng-content></ng-content>
-    <button type="button" *ngIf="!sortDisabled" euiSizeS euiButton euiIconButton euiBasicButton class="eui-table__sortable-icon-button" (click)="click()">
-        <eui-icon-svg
-            *ngIf="!order"
-            icon="eui-swap-vertical"
-            fillColor="grey-50"
-            [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
-        <eui-icon-svg
-            *ngIf="order === 'asc'"
-            icon="eui-arrow-up"
-            fillColor="primary-100"
-            [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
-        <eui-icon-svg
-            *ngIf="order === 'desc'"
-            icon="eui-arrow-down"
-            fillColor="primary-100"
-            [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
-    </button>
-    <ng-template *ngIf="isMultiSortable" [ngTemplateOutlet]="sortDropdown"></ng-template>
+    @if (!sortDisabled) {
+        <button type="button" euiSizeS euiButton euiIconButton euiBasicButton class="eui-table__sortable-icon-button" (click)="click()">
+            @if (!order) {
+                <eui-icon-svg icon="eui-swap-vertical" fillColor="grey-50" [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
+            }
+            @if (order === 'asc') {
+                <eui-icon-svg icon="eui-arrow-up" fillColor="primary-100" [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
+            }
+            @if (order === 'desc') {
+                <eui-icon-svg icon="eui-arrow-down" fillColor="primary-100" [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
+            }
+        </button>
+    }
+    @if (isMultiSortable) {
+        <ng-template [ngTemplateOutlet]="sortDropdown"></ng-template>
+    }
 </div>
 <ng-template #sortDropdown let-index>
     <eui-dropdown [hasClosedOnClickInside]="false">
@@ -1091,59 +966,43 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
             <div class="eui-u-pt-xs eui-u-pl-s">
                 <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>
             </div>
-            <form [formGroup]="form" *ngIf="form">
-                <ng-container formArrayName="columns">
-                    <ng-container *ngFor="let columnForm of columns.controls; let i = index">
-                        <div class="eui-u-flex eui-u-p-s" [formGroup]="form.get('columns')['controls'][i]">
-                            <span euiLabel class="eui-u-mr-s">{{ i + 1 }}</span>
-                            <select euiSelect euiSizeS formControlName="name" class="eui-u-mr-s">
-                                <option value=""></option>
-                                <option *ngFor="let column of multisortParams" [value]="column.name">
-                                    {{ column.name }}
-                                </option>
-                            </select>
-                            <button type="button"
-                                *ngIf="!getOrderByIndex(i)"
-                                euiSizeS
-                                euiSecondary
-                                euiButton
-                                euiIconButton
-                                euiBasicButton
-                                (click)="onClickMultisortOrder(i + 1, 'asc')">
-                                <eui-icon-svg
-                                    icon="eui-swap-vertical"
-                                    [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
-                            </button>
-                            <button type="button"
-                                *ngIf="getOrderByIndex(i) === 'asc'"
-                                euiSizeS
-                                euiPrimary
-                                euiButton
-                                euiIconButton
-                                euiBasicButton
-                                (click)="onClickMultisortOrder(i + 1, 'desc')">
-                                <eui-icon-svg icon="eui-arrow-up" [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
-                            </button>
-                            <button type="button"
-                                *ngIf="getOrderByIndex(i) === 'desc'"
-                                euiSizeS
-                                euiPrimary
-                                euiButton
-                                euiIconButton
-                                euiBasicButton
-                                (click)="onClickMultisortOrder(i + 1, null)">
-                                <eui-icon-svg
-                                    icon="eui-arrow-down"
-                                    [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
-                            </button>
-                        </div>
+            @if (form) {
+                <form [formGroup]="form">
+                    <ng-container formArrayName="columns">
+                        @for (columnForm of columns.controls; let i = $index; track columnForm) {
+                            <div class="eui-u-flex eui-u-p-s" [formGroup]="form.get('columns')['controls'][i]">
+                                <span euiLabel class="eui-u-mr-s">{{ i + 1 }}</span>
+                                <select euiSelect euiSizeS formControlName="name" class="eui-u-mr-s">
+                                    <option value=""></option>
+                                    @for (column of multisortParams; track column) {
+                                        <option [value]="column.name">{{ column.name }}</option>
+                                    }
+                                </select>
+                                @if (!getOrderByIndex(i)) {
+                                    <button type="button" euiSizeS euiSecondary euiButton euiIconButton euiBasicButton (click)="onClickMultisortOrder(i + 1, 'asc')">
+                                        <eui-icon-svg icon="eui-swap-vertical" [aria-label]="'eui.euitable.NO-SORTING-ICON' | translate"></eui-icon-svg>
+                                    </button>
+                                }
+                                @if (getOrderByIndex(i) === 'asc') {
+                                    <button type="button" euiSizeS euiPrimary euiButton euiIconButton euiBasicButton (click)="onClickMultisortOrder(i + 1, 'desc')">
+                                        <eui-icon-svg icon="eui-arrow-up" [aria-label]="'eui.euitable.ASCENDING-ICON' | translate"></eui-icon-svg>
+                                    </button>
+                                }
+                                @if (getOrderByIndex(i) === 'desc') {
+                                    <button type="button" euiSizeS euiPrimary euiButton euiIconButton euiBasicButton (click)="onClickMultisortOrder(i + 1, null)">
+                                        <eui-icon-svg icon="eui-arrow-down" [aria-label]="'eui.euitable.DESCENDING-ICON' | translate"></eui-icon-svg>
+                                    </button>
+                                }
+                            </div>
+                        }
                     </ng-container>
-                </ng-container>
-            </form>
-            <!-- Footer-->
-            <p class="eui-u-mt-none eui-u-mb-none eui-u-ml-s" *ngIf="error">
-                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>
-            </p>
+                </form>
+            }
+            @if (error) {
+                <p class="eui-u-mt-none eui-u-mb-none eui-u-ml-s">
+                    <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>
+                </p>
+            }
             <div class="eui-u-flex eui-u-flex-justify-content-between eui-u-p-s">
                 <button type="button" euiButton euiSizeS euiSecondary (click)="onCancelMultiSort()">{{ 'eui.CANCEL' | translate }}</button>
                 <button type="button" euiButton euiSizeS euiPrimary (click)="onSubmitMultiSort()">{{ 'eui.APPLY' | translate }}</button>
@@ -1152,7 +1011,7 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
     </eui-dropdown>
 </ng-template>
 ` }]
-}], ctorParameters: () => [{ type: EuiTableSortService }, { type: i04.ChangeDetectorRef }], propDecorators: { dropdown: [{
+}], ctorParameters: () => [{ type: EuiTableSortService }], propDecorators: { dropdown: [{
   type: ViewChild2,
   args: [EuiDropdownComponent]
 }], sortOn: [{
@@ -1160,44 +1019,41 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
 }], sortOrder: [{
   type: Input2
 }], defaultMultiOrder: [{
-  type: Input2
+  type: Input2,
+  args: [{ transform: numberAttribute }]
 }], defaultOrder: [{
-  type: Input2
+  type: Input2,
+  args: [{ transform: booleanAttribute2 }]
 }], sortDisabled: [{
-  type: Input2
+  type: Input2,
+  args: [{ transform: booleanAttribute2 }]
 }], isMultiSortable: [{
-  type: Input2
+  type: Input2,
+  args: [{ transform: booleanAttribute2 }]
 }], cssClasses: [{
   type: HostBinding2,
   args: ["class"]
 }] } });
 
 // filter/eui-table-filter.component.mjs
-import { Component as Component3, Input as Input3, Output as Output2, EventEmitter as EventEmitter2, HostBinding as HostBinding3, ViewChild as ViewChild3, ElementRef as ElementRef2, ViewEncapsulation as ViewEncapsulation3 } from "@angular/core";
+import { Component as Component3, Input as Input3, Output as Output2, EventEmitter as EventEmitter2, HostBinding as HostBinding3, ViewChild as ViewChild3, ElementRef as ElementRef2, ViewEncapsulation as ViewEncapsulation3, booleanAttribute as booleanAttribute3 } from "@angular/core";
 import { FormGroup as FormGroup3, FormControl as FormControl2 } from "@angular/forms";
-import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
-import { Subject as Subject3, BehaviorSubject as BehaviorSubject4 } from "rxjs";
-import { takeUntil as takeUntil3, debounceTime, distinctUntilChanged } from "rxjs/operators";
-import { BaseDirective as BaseDirective2 } from "@eui/components/shared";
+import { Subject as Subject3, BehaviorSubject as BehaviorSubject4, takeUntil as takeUntil3, debounceTime, distinctUntilChanged } from "rxjs";
+import { BaseStatesDirective as BaseStatesDirective3 } from "@eui/components/shared";
 import * as i05 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i22 from "@eui/components/eui-icon";
-import * as i33 from "@eui/components/eui-input-text";
-var EuiTableFilterComponent = class _EuiTableFilterComponent extends BaseDirective2 {
-  get autoSearch() {
-    return this._autoSearch;
-  }
-  set autoSearch(value) {
-    this._autoSearch = coerceBooleanProperty3(value);
-  }
+import * as i1 from "@eui/components/shared";
+import * as i22 from "@angular/forms";
+import * as i33 from "@eui/components/eui-icon";
+import * as i43 from "@eui/components/eui-input-text";
+var EuiTableFilterComponent = class _EuiTableFilterComponent {
   get cssClasses() {
-    return [super.getCssClasses("eui-table__filter")].join(" ").trim();
+    return [this.baseStatesDirective.getCssClasses("eui-table__filter")].join(" ").trim();
   }
-  constructor() {
-    super();
+  constructor(baseStatesDirective) {
+    this.baseStatesDirective = baseStatesDirective;
     this.filterChange = new EventEmitter2();
     this.filter$ = new BehaviorSubject4(null);
-    this._autoSearch = false;
+    this.autoSearch = false;
     this.destroy$ = new Subject3();
   }
   ngOnInit() {
@@ -1223,10 +1079,10 @@ var EuiTableFilterComponent = class _EuiTableFilterComponent extends BaseDirecti
     this.filterInput.nativeElement.focus();
   }
   static {
-    this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i05, type: _EuiTableFilterComponent, deps: [], target: i05.ɵɵFactoryTarget.Component });
+    this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i05, type: _EuiTableFilterComponent, deps: [{ token: i1.BaseStatesDirective }], target: i05.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTableFilterComponent, selector: "eui-table-filter", inputs: { placeholder: "placeholder", autoSearch: "autoSearch" }, outputs: { filterChange: "filterChange" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef2 }], usesInheritance: true, ngImport: i05, template: `<div class="eui-table__filter">
+    this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EuiTableFilterComponent, selector: "eui-table-filter", inputs: { placeholder: "placeholder", autoSearch: ["autoSearch", "autoSearch", booleanAttribute3] }, outputs: { filterChange: "filterChange" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef2 }], hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i05, template: `<div class="eui-table__filter">
     <form [formGroup]="form">
         <input
             #filterInput
@@ -1239,12 +1095,17 @@ var EuiTableFilterComponent = class _EuiTableFilterComponent extends BaseDirecti
         <eui-icon-svg class="eui-table__filter-search-icon" icon="eui-search" set="eui" size="m" fillColor="grey-35"></eui-icon-svg>
     </form>
 </div>
-`, dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i22.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i33.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }], encapsulation: i05.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i22.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i22.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i22.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i22.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i33.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i22.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i22.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i43.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }], encapsulation: i05.ViewEncapsulation.None });
   }
 };
 i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i05, type: EuiTableFilterComponent, decorators: [{
   type: Component3,
-  args: [{ selector: "eui-table-filter", encapsulation: ViewEncapsulation3.None, template: `<div class="eui-table__filter">
+  args: [{ selector: "eui-table-filter", encapsulation: ViewEncapsulation3.None, hostDirectives: [
+    {
+      directive: BaseStatesDirective3,
+      inputs: []
+    }
+  ], template: `<div class="eui-table__filter">
     <form [formGroup]="form">
         <input
             #filterInput
@@ -1258,7 +1119,10 @@ i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
     </form>
 </div>
 ` }]
-}], ctorParameters: () => [], propDecorators: { placeholder: [{
+}], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
+  type: HostBinding3,
+  args: ["class"]
+}], placeholder: [{
   type: Input3
 }], filterChange: [{
   type: Output2
@@ -1266,10 +1130,8 @@ i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
   type: ViewChild3,
   args: ["filterInput", { read: ElementRef2 }]
 }], autoSearch: [{
-  type: Input3
-}], cssClasses: [{
-  type: HostBinding3,
-  args: ["class"]
+  type: Input3,
+  args: [{ transform: booleanAttribute3 }]
 }] } });
 
 // pipes/eui-table-highlight-filter.pipe.mjs
@@ -1299,33 +1161,18 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
 }] });
 
 // selectable-row/eui-table-selectable-row.component.mjs
-import { Component as Component4, Input as Input4, HostBinding as HostBinding4, HostListener } from "@angular/core";
-import { Subject as Subject4 } from "rxjs";
-import { takeUntil as takeUntil4 } from "rxjs/operators";
-import { coerceBooleanProperty as coerceBooleanProperty4 } from "@angular/cdk/coercion";
+import { Component as Component4, Input as Input4, HostBinding as HostBinding4, HostListener, booleanAttribute as booleanAttribute4 } from "@angular/core";
+import { Subject as Subject4, takeUntil as takeUntil4 } from "rxjs";
 import * as i07 from "@angular/core";
-import * as i23 from "@angular/common";
-import * as i34 from "@eui/components/eui-input-checkbox";
+import * as i23 from "@eui/components/eui-input-checkbox";
 var EuiTableSelectableRowComponent = class _EuiTableSelectableRowComponent {
-  get isChecked() {
-    return this._isChecked;
-  }
-  set isChecked(value) {
-    this._isChecked = coerceBooleanProperty4(value);
-  }
-  get isKeyboardSelectable() {
-    return this._isKeyboardSelectable;
-  }
-  set isKeyboardSelectable(value) {
-    this._isKeyboardSelectable = coerceBooleanProperty4(value);
-  }
   get cssClasses() {
     return ["eui-table__row", this.isSelectable ? "eui-table__row--selectable" : "", this.isChecked ? "eui-table__row--selected" : ""].join(" ").trim();
   }
   constructor(euiTableSelectableRowService) {
     this.euiTableSelectableRowService = euiTableSelectableRowService;
-    this._isChecked = false;
-    this._isKeyboardSelectable = false;
+    this.isChecked = false;
+    this.isKeyboardSelectable = false;
     this.propId = "id";
     this.destroy$ = new Subject4();
   }
@@ -1380,18 +1227,20 @@ var EuiTableSelectableRowComponent = class _EuiTableSelectableRowComponent {
     this.ɵfac = i07.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i07, type: _EuiTableSelectableRowComponent, deps: [{ token: EuiTableSelectableRowService }], target: i07.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i07.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTableSelectableRowComponent, selector: "tr[isSelectable]", inputs: { isSelectable: "isSelectable", isChecked: "isChecked", isKeyboardSelectable: "isKeyboardSelectable" }, host: { listeners: { "click": "onClickRow($event)" }, properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i07, template: '<td *ngIf="isSelectable" class="eui-table__cell-select">\n    <div class="eui-table__cell-select-checkbox-container">\n        <input\n            *ngIf="isChecked"\n            aria-label="default checkbox checked"\n            euiInputCheckBox\n            checked="true"\n            (click)="toggleCheckedState($event)" />\n        <input\n            *ngIf="!isChecked"\n            aria-label="default checkbox unchecked"\n            euiInputCheckBox\n            checked="false"\n            (click)="toggleCheckedState($event)" />\n    </div>\n</td>\n<ng-content></ng-content>\n', dependencies: [{ kind: "directive", type: i23.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i34.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] });
+    this.ɵcmp = i07.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EuiTableSelectableRowComponent, selector: "tr[isSelectable]", inputs: { isSelectable: "isSelectable", isChecked: ["isChecked", "isChecked", booleanAttribute4], isKeyboardSelectable: ["isKeyboardSelectable", "isKeyboardSelectable", booleanAttribute4] }, host: { listeners: { "click": "onClickRow($event)" }, properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i07, template: '@if (isSelectable) {\n    <td class="eui-table__cell-select">\n        <div class="eui-table__cell-select-checkbox-container">\n            @if (isChecked) {\n                <input aria-label="default checkbox checked" euiInputCheckBox checked="true" (click)="toggleCheckedState($event)" />\n            }\n            @if (!isChecked) {\n                <input aria-label="default checkbox unchecked" euiInputCheckBox checked="false" (click)="toggleCheckedState($event)" />\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n', dependencies: [{ kind: "component", type: i23.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] });
   }
 };
 i07.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i07, type: EuiTableSelectableRowComponent, decorators: [{
   type: Component4,
-  args: [{ selector: "tr[isSelectable]", template: '<td *ngIf="isSelectable" class="eui-table__cell-select">\n    <div class="eui-table__cell-select-checkbox-container">\n        <input\n            *ngIf="isChecked"\n            aria-label="default checkbox checked"\n            euiInputCheckBox\n            checked="true"\n            (click)="toggleCheckedState($event)" />\n        <input\n            *ngIf="!isChecked"\n            aria-label="default checkbox unchecked"\n            euiInputCheckBox\n            checked="false"\n            (click)="toggleCheckedState($event)" />\n    </div>\n</td>\n<ng-content></ng-content>\n' }]
+  args: [{ selector: "tr[isSelectable]", template: '@if (isSelectable) {\n    <td class="eui-table__cell-select">\n        <div class="eui-table__cell-select-checkbox-container">\n            @if (isChecked) {\n                <input aria-label="default checkbox checked" euiInputCheckBox checked="true" (click)="toggleCheckedState($event)" />\n            }\n            @if (!isChecked) {\n                <input aria-label="default checkbox unchecked" euiInputCheckBox checked="false" (click)="toggleCheckedState($event)" />\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n' }]
 }], ctorParameters: () => [{ type: EuiTableSelectableRowService }], propDecorators: { isSelectable: [{
   type: Input4
 }], isChecked: [{
-  type: Input4
+  type: Input4,
+  args: [{ transform: booleanAttribute4 }]
 }], isKeyboardSelectable: [{
-  type: Input4
+  type: Input4,
+  args: [{ transform: booleanAttribute4 }]
 }], cssClasses: [{
   type: HostBinding4,
   args: ["class"]
@@ -1401,31 +1250,16 @@ i07.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
 }] } });
 
 // selectable-header/eui-table-selectable-header.component.mjs
-import { Component as Component5, Input as Input5, ViewChild as ViewChild4 } from "@angular/core";
-import { Subject as Subject5 } from "rxjs";
-import { takeUntil as takeUntil5 } from "rxjs/operators";
-import { coerceBooleanProperty as coerceBooleanProperty5 } from "@angular/cdk/coercion";
+import { Component as Component5, Input as Input5, ViewChild as ViewChild4, booleanAttribute as booleanAttribute5 } from "@angular/core";
+import { Subject as Subject5, takeUntil as takeUntil5 } from "rxjs";
 import * as i08 from "@angular/core";
-import * as i24 from "@angular/common";
-import * as i35 from "@eui/components/eui-input-checkbox";
+import * as i24 from "@eui/components/eui-input-checkbox";
 var EuiTableSelectableHeaderComponent = class _EuiTableSelectableHeaderComponent {
-  get isSelectableHeader() {
-    return this._isSelectableHeader;
-  }
-  set isSelectableHeader(value) {
-    this._isSelectableHeader = coerceBooleanProperty5(value);
-  }
-  get isChecked() {
-    return this._isChecked;
-  }
-  set isChecked(value) {
-    this._isChecked = coerceBooleanProperty5(value);
-  }
   constructor(euiTableSelectableRowService) {
     this.euiTableSelectableRowService = euiTableSelectableRowService;
     this.isCheckedIndeterminate = false;
-    this._isSelectableHeader = true;
-    this._isChecked = false;
+    this.isSelectableHeader = true;
+    this.isChecked = false;
     this.destroy$ = new Subject5();
   }
   ngOnInit() {
@@ -1457,19 +1291,21 @@ var EuiTableSelectableHeaderComponent = class _EuiTableSelectableHeaderComponent
     this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _EuiTableSelectableHeaderComponent, deps: [{ token: EuiTableSelectableRowService }], target: i08.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i08.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTableSelectableHeaderComponent, selector: "tr[isSelectableHeader]", inputs: { isSelectableHeader: "isSelectableHeader", isChecked: "isChecked" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i08, template: '<th *ngIf="isSelectableHeader" class="eui-table__cell-select">\n    <div class="eui-table__cell-select-checkbox-container">\n        <input\n            *ngIf="!isChecked && !isCheckedIndeterminate"\n            aria-label="Unchecked"\n            euiInputCheckBox\n            checked="false"\n            (click)="toggleCheckedState(true)" />\n        <input\n            *ngIf="isCheckedIndeterminate"\n            aria-label="Indeterminate"\n            euiInputCheckBox\n            indeterminate\n            (click)="toggleCheckedState(false)" />\n        <input\n            *ngIf="isChecked && !isCheckedIndeterminate"\n            aria-label="Checked"\n            euiInputCheckBox\n            checked="true"\n            (click)="toggleCheckedState(false)" />\n    </div>\n</th>\n<ng-content></ng-content>\n', dependencies: [{ kind: "directive", type: i24.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i35.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] });
+    this.ɵcmp = i08.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EuiTableSelectableHeaderComponent, selector: "tr[isSelectableHeader]", inputs: { isSelectableHeader: ["isSelectableHeader", "isSelectableHeader", booleanAttribute5], isChecked: ["isChecked", "isChecked", booleanAttribute5] }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i08, template: '@if (isSelectableHeader) {\n    <th class="eui-table__cell-select">\n        <div class="eui-table__cell-select-checkbox-container">\n            @if (!isChecked && !isCheckedIndeterminate) {\n                <input aria-label="Unchecked" euiInputCheckBox checked="false" (click)="toggleCheckedState(true)" />\n            }\n            @if (isCheckedIndeterminate) {\n                <input aria-label="Indeterminate" euiInputCheckBox indeterminate (click)="toggleCheckedState(false)" />\n            }\n            @if (isChecked && !isCheckedIndeterminate) {\n                <input aria-label="Checked" euiInputCheckBox checked="true" (click)="toggleCheckedState(false)" />\n            }\n        </div>\n    </th>\n}\n\n<ng-content></ng-content>\n', dependencies: [{ kind: "component", type: i24.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] });
   }
 };
 i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: EuiTableSelectableHeaderComponent, decorators: [{
   type: Component5,
-  args: [{ selector: "tr[isSelectableHeader]", template: '<th *ngIf="isSelectableHeader" class="eui-table__cell-select">\n    <div class="eui-table__cell-select-checkbox-container">\n        <input\n            *ngIf="!isChecked && !isCheckedIndeterminate"\n            aria-label="Unchecked"\n            euiInputCheckBox\n            checked="false"\n            (click)="toggleCheckedState(true)" />\n        <input\n            *ngIf="isCheckedIndeterminate"\n            aria-label="Indeterminate"\n            euiInputCheckBox\n            indeterminate\n            (click)="toggleCheckedState(false)" />\n        <input\n            *ngIf="isChecked && !isCheckedIndeterminate"\n            aria-label="Checked"\n            euiInputCheckBox\n            checked="true"\n            (click)="toggleCheckedState(false)" />\n    </div>\n</th>\n<ng-content></ng-content>\n' }]
+  args: [{ selector: "tr[isSelectableHeader]", template: '@if (isSelectableHeader) {\n    <th class="eui-table__cell-select">\n        <div class="eui-table__cell-select-checkbox-container">\n            @if (!isChecked && !isCheckedIndeterminate) {\n                <input aria-label="Unchecked" euiInputCheckBox checked="false" (click)="toggleCheckedState(true)" />\n            }\n            @if (isCheckedIndeterminate) {\n                <input aria-label="Indeterminate" euiInputCheckBox indeterminate (click)="toggleCheckedState(false)" />\n            }\n            @if (isChecked && !isCheckedIndeterminate) {\n                <input aria-label="Checked" euiInputCheckBox checked="true" (click)="toggleCheckedState(false)" />\n            }\n        </div>\n    </th>\n}\n\n<ng-content></ng-content>\n' }]
 }], ctorParameters: () => [{ type: EuiTableSelectableRowService }], propDecorators: { checkbox: [{
   type: ViewChild4,
   args: ["checkbox"]
 }], isSelectableHeader: [{
-  type: Input5
+  type: Input5,
+  args: [{ transform: booleanAttribute5 }]
 }], isChecked: [{
-  type: Input5
+  type: Input5,
+  args: [{ transform: booleanAttribute5 }]
 }] } });
 
 // expandable-row/eui-table-expandable-row.component.mjs