@eui/components 17.0.0-next.6 → 17.0.0-next.8

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

@@ -92,10 +92,10 @@ class EuiTableSortService {
         const currentCol = params.find((col) => col.position === index + 1);
         return currentCol ? currentCol : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSortService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSortService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSortService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSortService, decorators: [{
             type: Injectable
         }] });
 
@@ -182,10 +182,10 @@ class EuiTableSelectableRowService {
     getLastSelectedRow() {
         return this.lastSelectedRow;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableRowService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableRowService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableRowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableRowService, decorators: [{
             type: Injectable
         }] });
 
@@ -435,7 +435,7 @@ class EuiTableComponent extends BaseDirective {
     stickyFeatureHandler() {
         const timeout = this.stickyFeatureHandlerIndex === 0 ? 250 : 0;
         setTimeout(() => {
-            const trItems = Array.from(this.tbodyRef.nativeElement.querySelectorAll('tr'));
+            const bodyTrItems = Array.from(this.tbodyRef.nativeElement.querySelectorAll('tr'));
             const containerWidth = this.elementRef.nativeElement?.parentElement?.clientWidth || 0;
             if (this.theadRef) {
                 const thItems = Array.from(this.theadRef.nativeElement.querySelectorAll('.eui-table__col--sticky'));
@@ -464,14 +464,14 @@ class EuiTableComponent extends BaseDirective {
                     }
                 });
             }
-            trItems.forEach((tr) => {
+            bodyTrItems.forEach((tr) => {
                 const tdItems = Array.from(tr.querySelectorAll('.eui-table__col--sticky'));
                 tdItems.forEach((td) => {
                     td.style.left = null;
                     td.style.right = null;
                 });
             });
-            trItems.forEach((tr) => {
+            bodyTrItems.forEach((tr) => {
                 const tdItems = Array.from(tr.querySelectorAll('.eui-table__col--sticky'));
                 // Sticky First Cols
                 const tdItemsStickyFirstCol = tdItems.filter((td) => td.offsetLeft + td.clientWidth < containerWidth);
@@ -494,6 +494,33 @@ class EuiTableComponent extends BaseDirective {
                     }
                 });
             });
+            if (this.tfootRef) {
+                const tdItems = Array.from(this.tfootRef.nativeElement.querySelectorAll('.eui-table__col--sticky'));
+                // Reset left & right position
+                tdItems.forEach((th) => {
+                    th.style.left = null;
+                    th.style.right = null;
+                });
+                // Sticky First Cols & Last Cols
+                const tdItemsStickyFirstCol = tdItems.filter((td) => td.offsetLeft + td.clientWidth < containerWidth);
+                const tdItemsStickyLastCol = tdItems.filter((td) => td.offsetLeft + td.clientWidth > containerWidth);
+                tdItemsStickyFirstCol.forEach((td, i) => {
+                    const w = tdItemsStickyFirstCol[i - 1]?.clientWidth;
+                    const l = parseInt(tdItemsStickyFirstCol[i - 1]?.style.left, 10);
+                    td.style.left = (i === 0 ? 0 : w + l) + 'px';
+                    if (i + 1 === tdItemsStickyFirstCol.length) {
+                        td.classList.add('eui-table__col--sticky-shadowed-first');
+                    }
+                });
+                tdItemsStickyLastCol.reverse().forEach((td, i) => {
+                    const w = tdItemsStickyLastCol[i - 1]?.clientWidth;
+                    const r = parseInt(tdItemsStickyLastCol[i - 1]?.style.right, 10);
+                    td.style.right = (i === 0 ? 0 : w + r) + 'px';
+                    if (i + 1 === tdItemsStickyLastCol.length) {
+                        td.classList.add('eui-table__col--sticky-shadowed-last');
+                    }
+                });
+            }
         }, timeout);
         this.stickyFeatureHandlerIndex++;
     }
@@ -673,13 +700,13 @@ class EuiTableComponent extends BaseDirective {
     getObjProp(obj, prop) {
         return prop ? prop.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), obj || self) : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }, { token: EuiTableSelectableRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", scrollableContainerRef: "scrollableContainerRef", loading: "loading", asyncTable: "asyncTable", paginable: "paginable", euiTableResponsive: "euiTableResponsive", euiTableFixedLayout: "euiTableFixedLayout", euiTableDraggable: "euiTableDraggable", euiTableCards: "euiTableCards", euiTableBordered: "euiTableBordered", euiTableCompact: "euiTableCompact", hasStickyHeader: "hasStickyHeader", hasStickyColumns: "hasStickyColumns" }, 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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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 }\"></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 *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-35)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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-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 .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);font-weight:400;position:relative}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);font-weight:700;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s)}.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{display:inherit;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-35)}.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%}.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:var(--eui-base-spacing-xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.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:var(--eui-base-spacing-2xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table-paginator{--eui-paginator-font-size: var(--eui-base-font-size-m);--eui-paginator-padding: var(--eui-base-spacing-s);align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-paginator-padding) 0;position:relative;width:100%}.eui-table-paginator__page{display:flex;flex-direction:column;font-size:var(--eui-paginator-font-size)}.eui-table-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap}.eui-table-paginator__page-range{align-items:center;display:inline-flex}.eui-table-paginator__page-navigation{align-items:center;display:flex}.eui-table-paginator__page-navigation-item,.eui-table-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-card.eui-card--no-content-padding .eui-card-content .eui-table-paginator{padding:var(--eui-paginator-padding)}@media screen and (max-width: 767px){.eui-table-paginator{align-items:center;display:flex;flex-direction:column-reverse;margin:var(--eui-base-spacing-s) 0;width:100%}.eui-table-paginator__page-numbers{flex-wrap:wrap}.eui-table-paginator__page-range{margin:0 var(--eui-base-spacing-m)}.eui-table-paginator__page-navigation{justify-content:center;margin-left:0}}.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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }, { token: EuiTableSelectableRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", scrollableContainerRef: "scrollableContainerRef", loading: "loading", asyncTable: "asyncTable", paginable: "paginable", euiTableResponsive: "euiTableResponsive", euiTableFixedLayout: "euiTableFixedLayout", euiTableDraggable: "euiTableDraggable", euiTableCards: "euiTableCards", euiTableBordered: "euiTableBordered", euiTableCompact: "euiTableCompact", hasStickyHeader: "hasStickyHeader", hasStickyColumns: "hasStickyColumns" }, 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: i0, 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 }\"></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-35)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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-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 .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);font-weight:400;position:relative}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);font-weight:700;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s)}.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{display:inherit;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-35)}.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%}.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:var(--eui-base-spacing-xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.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:var(--eui-base-spacing-2xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table-paginator{--eui-paginator-font-size: var(--eui-base-font-size-m);--eui-paginator-padding: var(--eui-base-spacing-s);align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-paginator-padding) 0;position:relative;width:100%}.eui-table-paginator__page{display:flex;flex-direction:column;font-size:var(--eui-paginator-font-size)}.eui-table-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap}.eui-table-paginator__page-range{align-items:center;display:inline-flex}.eui-table-paginator__page-navigation{align-items:center;display:flex}.eui-table-paginator__page-navigation-item,.eui-table-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-card.eui-card--no-content-padding .eui-card-content .eui-table-paginator{padding:var(--eui-paginator-padding)}@media screen and (max-width: 767px){.eui-table-paginator{align-items:center;display:flex;flex-direction:column-reverse;margin:var(--eui-base-spacing-s) 0;width:100%}.eui-table-paginator__page-numbers{flex-wrap:wrap}.eui-table-paginator__page-range{margin:0 var(--eui-base-spacing-m)}.eui-table-paginator__page-navigation{justify-content:center;margin-left:0}}.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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, 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 }\"></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 *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-35)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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-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 .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);font-weight:400;position:relative}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);font-weight:700;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s)}.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{display:inherit;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-35)}.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%}.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:var(--eui-base-spacing-xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.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:var(--eui-base-spacing-2xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table-paginator{--eui-paginator-font-size: var(--eui-base-font-size-m);--eui-paginator-padding: var(--eui-base-spacing-s);align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-paginator-padding) 0;position:relative;width:100%}.eui-table-paginator__page{display:flex;flex-direction:column;font-size:var(--eui-paginator-font-size)}.eui-table-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap}.eui-table-paginator__page-range{align-items:center;display:inline-flex}.eui-table-paginator__page-navigation{align-items:center;display:flex}.eui-table-paginator__page-navigation-item,.eui-table-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-card.eui-card--no-content-padding .eui-card-content .eui-table-paginator{padding:var(--eui-paginator-padding)}@media screen and (max-width: 767px){.eui-table-paginator{align-items:center;display:flex;flex-direction:column-reverse;margin:var(--eui-base-spacing-s) 0;width:100%}.eui-table-paginator__page-numbers{flex-wrap:wrap}.eui-table-paginator__page-range{margin:0 var(--eui-base-spacing-m)}.eui-table-paginator__page-navigation{justify-content:center;margin-left:0}}.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: function () { return [{ type: EuiTableSortService }, { type: i0.ChangeDetectorRef }, { type: EuiTableSelectableRowService }, { type: i0.ElementRef }]; }, propDecorators: { rows: [{
+            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 }\"></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-35)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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-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 .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);font-weight:400;position:relative}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);font-weight:700;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s)}.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{display:inherit;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-35)}.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%}.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:var(--eui-base-spacing-xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.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:var(--eui-base-spacing-2xs);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);font-weight:700;left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table-paginator{--eui-paginator-font-size: var(--eui-base-font-size-m);--eui-paginator-padding: var(--eui-base-spacing-s);align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-paginator-padding) 0;position:relative;width:100%}.eui-table-paginator__page{display:flex;flex-direction:column;font-size:var(--eui-paginator-font-size)}.eui-table-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap}.eui-table-paginator__page-range{align-items:center;display:inline-flex}.eui-table-paginator__page-navigation{align-items:center;display:flex}.eui-table-paginator__page-navigation-item,.eui-table-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-card.eui-card--no-content-padding .eui-card-content .eui-table-paginator{padding:var(--eui-paginator-padding)}@media screen and (max-width: 767px){.eui-table-paginator{align-items:center;display:flex;flex-direction:column-reverse;margin:var(--eui-base-spacing-s) 0;width:100%}.eui-table-paginator__page-numbers{flex-wrap:wrap}.eui-table-paginator__page-range{margin:0 var(--eui-base-spacing-m)}.eui-table-paginator__page-navigation{justify-content:center;margin-left:0}}.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: i0.ChangeDetectorRef }, { type: EuiTableSelectableRowService }, { type: i0.ElementRef }], propDecorators: { rows: [{
                 type: Input
             }], propId: [{
                 type: Input
@@ -712,6 +739,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
             }], tbodyRef: [{
                 type: ViewChild,
                 args: ['tbodyRef']
+            }], tfootRef: [{
+                type: ViewChild,
+                args: ['tfootRef']
             }], loading: [{
                 type: Input
             }], asyncTable: [{
@@ -902,13 +932,13 @@ class EuiTableSortableColComponent {
     isElementUniqueName(arr, el) {
         return arr.filter((col) => col.name === el.name).length === 1;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSortableColComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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: i0, template: "<div class=\"eui-table__sortable-col-content\">\n    <ng-content></ng-content>\n    <button *ngIf=\"!sortDisabled\" euiSizeS euiButton euiIconButton euiBasicButton class=\"eui-table__sortable-icon-button\" (click)=\"click()\">\n        <eui-icon-svg\n            *ngIf=\"!order\"\n            icon=\"eui-swap-vertical\"\n            fillColor=\"grey-50\"\n            [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'asc'\"\n            icon=\"eui-arrow-up\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'desc'\"\n            icon=\"eui-arrow-down\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n    </button>\n    <ng-template *ngIf=\"isMultiSortable\" [ngTemplateOutlet]=\"sortDropdown\"></ng-template>\n</div>\n<ng-template #sortDropdown let-index>\n    <eui-dropdown [isClosedOnClickInside]=\"false\">\n        <button euiButton euiBasicButton euiRounded euiIconButton euiSizeS [euiDisabled]=\"sortDisabled\" (click)=\"onOpenDropdown()\">\n            <span euiBadge euiPrimary euiOutline>{{ currentMultiSortPosition }}</span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-u-pt-xs eui-u-pl-s\">\n                <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>\n            </div>\n            <form [formGroup]=\"form\" *ngIf=\"form\">\n                <ng-container formArrayName=\"columns\">\n                    <ng-container *ngFor=\"let columnForm of columns.controls; let i = index\">\n                        <div class=\"eui-u-flex eui-u-p-s\" [formGroup]=\"form.get('columns')['controls'][i]\">\n                            <span euiLabel class=\"eui-u-mr-s\">{{ i + 1 }}</span>\n                            <select euiSelect euiSizeS formControlName=\"name\" class=\"eui-u-mr-s\">\n                                <option value=\"\"></option>\n                                <option *ngFor=\"let column of multisortParams\" [value]=\"column.name\">\n                                    {{ column.name }}\n                                </option>\n                            </select>\n                            <button\n                                *ngIf=\"!getOrderByIndex(i)\"\n                                euiSizeS\n                                euiSecondary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'asc')\">\n                                <eui-icon-svg\n                                    icon=\"eui-swap-vertical\"\n                                    [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'asc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'desc')\">\n                                <eui-icon-svg icon=\"eui-arrow-up\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'desc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, null)\">\n                                <eui-icon-svg\n                                    icon=\"eui-arrow-down\"\n                                    [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </form>\n            <!-- Footer-->\n            <p class=\"eui-u-mt-none eui-u-mb-none eui-u-ml-s\" *ngIf=\"error\">\n                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>\n            </p>\n            <div class=\"eui-u-flex eui-u-flex-justify-content-between eui-u-p-s\">\n                <button euiButton euiSizeS euiSecondary (click)=\"onCancelMultiSort()\">{{ 'eui.CANCEL' | translate }}</button>\n                <button euiButton euiSizeS euiPrimary (click)=\"onSubmitMultiSort()\">{{ 'eui.APPLY' | translate }}</button>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-template>\n", 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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { 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"], outputs: ["buttonClick"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.EuiFeedbackMessageComponent, selector: "eui-feedback-message", inputs: ["styleClass"] }, { 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" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSortableColComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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: i0, template: "<div class=\"eui-table__sortable-col-content\">\n    <ng-content></ng-content>\n    <button *ngIf=\"!sortDisabled\" euiSizeS euiButton euiIconButton euiBasicButton class=\"eui-table__sortable-icon-button\" (click)=\"click()\">\n        <eui-icon-svg\n            *ngIf=\"!order\"\n            icon=\"eui-swap-vertical\"\n            fillColor=\"grey-50\"\n            [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'asc'\"\n            icon=\"eui-arrow-up\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'desc'\"\n            icon=\"eui-arrow-down\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n    </button>\n    <ng-template *ngIf=\"isMultiSortable\" [ngTemplateOutlet]=\"sortDropdown\"></ng-template>\n</div>\n<ng-template #sortDropdown let-index>\n    <eui-dropdown [isClosedOnClickInside]=\"false\">\n        <button euiButton euiBasicButton euiRounded euiIconButton euiSizeS [euiDisabled]=\"sortDisabled\" (click)=\"onOpenDropdown()\">\n            <span euiBadge euiPrimary euiOutline>{{ currentMultiSortPosition }}</span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-u-pt-xs eui-u-pl-s\">\n                <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>\n            </div>\n            <form [formGroup]=\"form\" *ngIf=\"form\">\n                <ng-container formArrayName=\"columns\">\n                    <ng-container *ngFor=\"let columnForm of columns.controls; let i = index\">\n                        <div class=\"eui-u-flex eui-u-p-s\" [formGroup]=\"form.get('columns')['controls'][i]\">\n                            <span euiLabel class=\"eui-u-mr-s\">{{ i + 1 }}</span>\n                            <select euiSelect euiSizeS formControlName=\"name\" class=\"eui-u-mr-s\">\n                                <option value=\"\"></option>\n                                <option *ngFor=\"let column of multisortParams\" [value]=\"column.name\">\n                                    {{ column.name }}\n                                </option>\n                            </select>\n                            <button\n                                *ngIf=\"!getOrderByIndex(i)\"\n                                euiSizeS\n                                euiSecondary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'asc')\">\n                                <eui-icon-svg\n                                    icon=\"eui-swap-vertical\"\n                                    [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'asc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'desc')\">\n                                <eui-icon-svg icon=\"eui-arrow-up\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'desc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, null)\">\n                                <eui-icon-svg\n                                    icon=\"eui-arrow-down\"\n                                    [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </form>\n            <!-- Footer-->\n            <p class=\"eui-u-mt-none eui-u-mb-none eui-u-ml-s\" *ngIf=\"error\">\n                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>\n            </p>\n            <div class=\"eui-u-flex eui-u-flex-justify-content-between eui-u-p-s\">\n                <button euiButton euiSizeS euiSecondary (click)=\"onCancelMultiSort()\">{{ 'eui.CANCEL' | translate }}</button>\n                <button euiButton euiSizeS euiPrimary (click)=\"onSubmitMultiSort()\">{{ 'eui.APPLY' | translate }}</button>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-template>\n", 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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { 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"], outputs: ["buttonClick"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.EuiFeedbackMessageComponent, selector: "eui-feedback-message", inputs: ["styleClass"] }, { 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSortableColComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSortableColComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[sortable]', template: "<div class=\"eui-table__sortable-col-content\">\n    <ng-content></ng-content>\n    <button *ngIf=\"!sortDisabled\" euiSizeS euiButton euiIconButton euiBasicButton class=\"eui-table__sortable-icon-button\" (click)=\"click()\">\n        <eui-icon-svg\n            *ngIf=\"!order\"\n            icon=\"eui-swap-vertical\"\n            fillColor=\"grey-50\"\n            [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'asc'\"\n            icon=\"eui-arrow-up\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'desc'\"\n            icon=\"eui-arrow-down\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n    </button>\n    <ng-template *ngIf=\"isMultiSortable\" [ngTemplateOutlet]=\"sortDropdown\"></ng-template>\n</div>\n<ng-template #sortDropdown let-index>\n    <eui-dropdown [isClosedOnClickInside]=\"false\">\n        <button euiButton euiBasicButton euiRounded euiIconButton euiSizeS [euiDisabled]=\"sortDisabled\" (click)=\"onOpenDropdown()\">\n            <span euiBadge euiPrimary euiOutline>{{ currentMultiSortPosition }}</span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-u-pt-xs eui-u-pl-s\">\n                <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>\n            </div>\n            <form [formGroup]=\"form\" *ngIf=\"form\">\n                <ng-container formArrayName=\"columns\">\n                    <ng-container *ngFor=\"let columnForm of columns.controls; let i = index\">\n                        <div class=\"eui-u-flex eui-u-p-s\" [formGroup]=\"form.get('columns')['controls'][i]\">\n                            <span euiLabel class=\"eui-u-mr-s\">{{ i + 1 }}</span>\n                            <select euiSelect euiSizeS formControlName=\"name\" class=\"eui-u-mr-s\">\n                                <option value=\"\"></option>\n                                <option *ngFor=\"let column of multisortParams\" [value]=\"column.name\">\n                                    {{ column.name }}\n                                </option>\n                            </select>\n                            <button\n                                *ngIf=\"!getOrderByIndex(i)\"\n                                euiSizeS\n                                euiSecondary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'asc')\">\n                                <eui-icon-svg\n                                    icon=\"eui-swap-vertical\"\n                                    [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'asc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'desc')\">\n                                <eui-icon-svg icon=\"eui-arrow-up\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'desc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, null)\">\n                                <eui-icon-svg\n                                    icon=\"eui-arrow-down\"\n                                    [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </form>\n            <!-- Footer-->\n            <p class=\"eui-u-mt-none eui-u-mb-none eui-u-ml-s\" *ngIf=\"error\">\n                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>\n            </p>\n            <div class=\"eui-u-flex eui-u-flex-justify-content-between eui-u-p-s\">\n                <button euiButton euiSizeS euiSecondary (click)=\"onCancelMultiSort()\">{{ 'eui.CANCEL' | translate }}</button>\n                <button euiButton euiSizeS euiPrimary (click)=\"onSubmitMultiSort()\">{{ 'eui.APPLY' | translate }}</button>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: EuiTableSortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
+        }], ctorParameters: () => [{ type: EuiTableSortService }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [EuiDropdownComponent]
             }], sortOn: [{
@@ -970,13 +1000,13 @@ class EuiTableFilterComponent extends BaseDirective {
         this.form.reset();
         this.filterInput.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <input\n            #filterInput\n            euiClearable\n            euiInputText\n            class=\"eui-table__filter-input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"placeholder ? placeholder : 'Filter Input Field'\"\n            placeholder=\"{{ placeholder }}\" />\n        <eui-icon-svg class=\"eui-table__filter-search-icon\" icon=\"eui-search\" set=\"eui\" size=\"m\" fillColor=\"grey-35\"></eui-icon-svg>\n    </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <input\n            #filterInput\n            euiClearable\n            euiInputText\n            class=\"eui-table__filter-input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"placeholder ? placeholder : 'Filter Input Field'\"\n            placeholder=\"{{ placeholder }}\" />\n        <eui-icon-svg class=\"eui-table__filter-search-icon\" icon=\"eui-search\" set=\"eui\" size=\"m\" fillColor=\"grey-35\"></eui-icon-svg>\n    </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-table-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <input\n            #filterInput\n            euiClearable\n            euiInputText\n            class=\"eui-table__filter-input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"placeholder ? placeholder : 'Filter Input Field'\"\n            placeholder=\"{{ placeholder }}\" />\n        <eui-icon-svg class=\"eui-table__filter-search-icon\" icon=\"eui-search\" set=\"eui\" size=\"m\" fillColor=\"grey-35\"></eui-icon-svg>\n    </form>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], filterChange: [{
                 type: Output
@@ -1000,10 +1030,10 @@ class EuiTableHighlightFilterPipe {
             return value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableHighlightFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableHighlightFilterPipe, name: "euiTableHighlightFilter" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableHighlightFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableHighlightFilterPipe, name: "euiTableHighlightFilter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableHighlightFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableHighlightFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'euiTableHighlightFilter',
@@ -1088,13 +1118,13 @@ class EuiTableSelectableRowComponent {
         e.preventDefault();
         e.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableRowComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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: i0, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableRowComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTableSelectableRowComponent, selector: "tr[isSelectable]", inputs: { isSelectable: "isSelectable", isChecked: "isChecked", isKeyboardSelectable: "isKeyboardSelectable" }, host: { listeners: { "click": "onClickRow($event)" }, properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableRowComponent, decorators: [{
             type: Component,
             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" }]
-        }], ctorParameters: function () { return [{ type: EuiTableSelectableRowService }]; }, propDecorators: { isSelectable: [{
+        }], ctorParameters: () => [{ type: EuiTableSelectableRowService }], propDecorators: { isSelectable: [{
                 type: Input
             }], isChecked: [{
                 type: Input
@@ -1155,13 +1185,13 @@ class EuiTableSelectableHeaderComponent {
             this.euiTableSelectableRowService.unselectAllRows();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableHeaderComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiTableSelectableHeaderComponent, selector: "tr[isSelectableHeader]", inputs: { isSelectableHeader: "isSelectableHeader", isChecked: "isChecked" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, 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            checked\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableHeaderComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTableSelectableHeaderComponent, selector: "tr[isSelectableHeader]", inputs: { isSelectableHeader: "isSelectableHeader", isChecked: "isChecked" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, 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            checked\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableSelectableHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableSelectableHeaderComponent, decorators: [{
             type: Component,
             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            checked\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" }]
-        }], ctorParameters: function () { return [{ type: EuiTableSelectableRowService }]; }, propDecorators: { checkbox: [{
+        }], ctorParameters: () => [{ type: EuiTableSelectableRowService }], propDecorators: { checkbox: [{
                 type: ViewChild,
                 args: ['checkbox']
             }], isSelectableHeader: [{
@@ -1174,10 +1204,10 @@ class EuiTableExpandableRowComponent {
     constructor() {
         this.string = 'eui-table-expandable-row';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableExpandableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiTableExpandableRowComponent, selector: "tr[euiTableExpandableRow]", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableExpandableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTableExpandableRowComponent, selector: "tr[euiTableExpandableRow]", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableExpandableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableExpandableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tr[euiTableExpandableRow]', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { string: [{
@@ -1201,10 +1231,10 @@ class EuiTableStickyColumnDirective {
     get stickyClass() {
         return true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableStickyColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiTableStickyColumnDirective, selector: "[isStickyColumn]", host: { properties: { "class.eui-table__col--sticky": "this.stickyClass" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableStickyColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTableStickyColumnDirective, selector: "[isStickyColumn]", host: { properties: { "class.eui-table__col--sticky": "this.stickyClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableStickyColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableStickyColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1216,8 +1246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
             }] } });
 
 class EuiTableModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableModule, declarations: [EuiTableComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableModule, declarations: [EuiTableComponent,
             EuiTableSortableColComponent,
             EuiTableFilterComponent,
             EuiTableSelectableRowComponent,
@@ -1245,7 +1275,7 @@ class EuiTableModule {
             EuiTableHighlightFilterPipe,
             EuiTemplateDirectiveModule,
             EuiTableStickyColumnDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableModule, imports: [CommonModule,
             TranslateModule,
             FormsModule,
             EuiIconModule,
@@ -1259,7 +1289,7 @@ class EuiTableModule {
             EuiFeedbackMessageModule,
             EuiSelectModule, EuiTemplateDirectiveModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [