@eui/eds 23.0.0-alpha.11 → 23.0.0-alpha.13

package/fesm2022/eui-eds-eds-split-button.mjs

@@ -56,10 +56,10 @@ class EdsSplitButton {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsSplitButton, isStandalone: true, selector: "eds-split-button", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<ng-content select=\"button\"/>\n<ng-content select=\"eds-dropdown\"/>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{align-items:center;display:inline-flex;position:relative}.eui-21 :host ::ng-deep>.eds-button{border-radius:var(--eds-br-m) 0 0 var(--eds-br-m);border-right:none!important;cursor:pointer}.eui-21 :host ::ng-deep>.eds-dropdown:before{content:\"\";position:absolute;border-left:1px solid var(--eds-c-border-divider);top:25%;height:50%;margin-left:-1px}.eui-21 :host ::ng-deep>.eds-dropdown button{border-radius:0 var(--eds-br-m) var(--eds-br-m) 0;border-left:0;width:var(--eds-sp-3xl);margin-left:-1px}.eui-21 :host.eds-split-button--disabled{pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsSplitButton, isStandalone: true, selector: "eds-split-button", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<ng-content select=\"button\"/>\n<ng-content select=\"eds-dropdown\"/>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{align-items:center;display:inline-flex;position:relative}.eui-21 :host ::ng-deep>.eds-button{border-radius:var(--eds-br-m) 0 0 var(--eds-br-m);border-right:none!important;cursor:pointer}.eui-21 :host ::ng-deep>.eds-dropdown:before{content:\"\";position:absolute;border-left:1px solid var(--eds-c-border-divider);top:25%;height:50%;margin-left:-1px}.eui-21 :host ::ng-deep>.eds-dropdown button{border-radius:0 var(--eds-br-m) var(--eds-br-m) 0;border-left:0;width:var(--eds-sp-3xl);margin-left:-1px}.eui-21 :host.eds-split-button--disabled{pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsSplitButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsSplitButton, decorators: [{
             type: Component,
             args: [{ selector: 'eds-split-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',

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

@@ -103,10 +103,10 @@ class EdsTableSelectableService {
     getLastSelectedRow() {
         return this._lastSelectedRow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableService, decorators: [{
             type: Injectable
         }] });
 
@@ -159,10 +159,10 @@ class EdsTableSortService {
         this._sorts.set(sorts);
         this.isCurrentMultiSortable = sorts.length > 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSortService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSortService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSortService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSortService, decorators: [{
             type: Injectable
         }] });
 
@@ -188,10 +188,10 @@ class EdsTableTemplate {
     getType() {
         return this.name();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: EdsTableTemplate, isStandalone: true, selector: "[edsTableTemplate]", inputs: { name: { classPropertyName: "name", publicName: "edsTableTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EdsTableTemplate, isStandalone: true, selector: "[edsTableTemplate]", inputs: { name: { classPropertyName: "name", publicName: "edsTableTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[edsTableTemplate]',
@@ -655,10 +655,10 @@ class EdsTable {
     getObjProp(obj, prop) {
         return prop ? prop.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), obj || self) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTable, isStandalone: true, selector: "eds-table, table[edsTable]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, propId: { classPropertyName: "propId", publicName: "propId", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, preselectedRows: { classPropertyName: "preselectedRows", publicName: "preselectedRows", isSignal: true, isRequired: false, transformFunction: null }, isVirtualScroll: { classPropertyName: "isVirtualScroll", publicName: "isVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, isVirtualScrollCache: { classPropertyName: "isVirtualScrollCache", publicName: "isVirtualScrollCache", isSignal: true, isRequired: false, transformFunction: null }, hasStickyHeader: { classPropertyName: "hasStickyHeader", publicName: "hasStickyHeader", isSignal: true, isRequired: false, transformFunction: null }, hasStickyFooter: { classPropertyName: "hasStickyFooter", publicName: "hasStickyFooter", isSignal: true, isRequired: false, transformFunction: null }, hasStickyCols: { classPropertyName: "hasStickyCols", publicName: "hasStickyCols", isSignal: true, isRequired: false, transformFunction: null }, edsTableResponsive: { classPropertyName: "edsTableResponsive", publicName: "edsTableResponsive", isSignal: true, isRequired: false, transformFunction: null }, isAsync: { classPropertyName: "isAsync", publicName: "isAsync", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollAsyncItemsLength: { classPropertyName: "virtualScrollAsyncItemsLength", publicName: "virtualScrollAsyncItemsLength", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollNbRows: { classPropertyName: "virtualScrollNbRows", publicName: "virtualScrollNbRows", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isSelectOnlyVisibleRows: { classPropertyName: "isSelectOnlyVisibleRows", publicName: "isSelectOnlyVisibleRows", isSignal: true, isRequired: false, transformFunction: null }, edsTableBordered: { classPropertyName: "edsTableBordered", publicName: "edsTableBordered", isSignal: true, isRequired: false, transformFunction: null }, edsTableFixedLayout: { classPropertyName: "edsTableFixedLayout", publicName: "edsTableFixedLayout", isSignal: true, isRequired: false, transformFunction: null }, edsTableCompact: { classPropertyName: "edsTableCompact", publicName: "edsTableCompact", isSignal: true, isRequired: false, transformFunction: null }, isFlat: { classPropertyName: "isFlat", publicName: "isFlat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollChange: "scrollChange", rowsSelect: "rowsSelect", sortChange: "sortChange" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "\"eds-table\"" } }, providers: [EdsTableSelectableService, EdsTableSortService], queries: [{ propertyName: "templates", predicate: EdsTableTemplate, isSignal: true }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["cdkVirtualScrollViewport"], descendants: true, isSignal: true }, { propertyName: "cdkVirtualScrollViewportElement", first: true, predicate: ["cdkVirtualScrollViewportElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true, isSignal: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true, isSignal: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVirtualScroll()) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eds-table__scroll-viewport\"\n        [itemSize]=\"itemSize()\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"eds-table__inner\" [style.width]=\"hostWidth\">\n            @if (captionTemplate) {\n                <caption>\n                    <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n                </caption>\n            }\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data()?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (captionTemplate) {\n        <caption>\n            <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n        </caption>\n    }\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-template\n                    [ngTemplateOutlet]=\"bodyTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                </ng-template>\n            }\n            @if (noDataTemplate && (data()?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n@if (isLoading()) {\n    <div class=\"eds-table__loading-overlay\">\n        <div class=\"eds-table__loading-spinner\"></div>\n    </div>\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize()\">\n        @for (__ of nbCols; track $index) {\n            <td><div class=\"eds-table__skeleton-line\"></div></td>\n        }\n    </tr>\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 .eds-table{display:block;position:relative;width:100%}.eui-21 .eds-table .eds-table__scroll-viewport{min-height:100%;width:100%}.eui-21 .eds-table .eds-table__scrollable-wrapper{overflow:auto}.eui-21 .eds-table .eds-table__orderable-cols-preview,.eui-21 .eds-table .eds-table__orderable-rows-preview{display:none}.eui-21 .eds-table tr[edshighlighted]{background-color:var(--eds-c-border-divider)!important;position:relative;z-index:2}.eui-21 .eds-table caption{text-align:start;font-style:italic}.eui-21 .eds-table .eds-table__cell-select{width:48px;text-align:center;padding:var(--eds-sp-xs)}.eui-21 .eds-table .eds-table__cell-select-checkbox-container{display:flex;align-items:center;justify-content:center}.eui-21 .eds-table .eds-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffb3;z-index:10}.eui-21 .eds-table .eds-table__loading-spinner{width:32px;height:32px;border:3px solid var(--eds-c-border-divider);border-top-color:var(--eds-c-border-primary);border-radius:50%;animation:eds-table-spin .8s linear infinite}.eui-21 .eds-table .eds-table__skeleton-line{height:16px;background:var(--eds-c-surface-hover);border-radius:var(--eds-br-s);animation:eds-table-pulse 1.5s ease-in-out infinite}.eui-21 .eds-table .eds-table__expandable-row td{background-color:var(--eds-c-surface-default)}.eui-21 .eds-table .eds-table-filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-21 .eds-table .eds-table-filter--responsive{width:100%}.eui-21 .eds-table .eds-table-filter__input{padding-left:var(--eds-sp-2xl)!important}.eui-21 .eds-table .eds-table-filter__icon{left:var(--eds-sp-xs);position:absolute;top:var(--eds-sp-xs)}.eui-21 .eds-table .eds-table__sortable-col{cursor:pointer;-webkit-user-select:none;user-select:none}.eui-21 .eds-table .eds-table__sortable-col--disabled{cursor:default}.eui-21 .eds-table .eds-table__sortable-col-multisort-index{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler);margin-left:var(--eds-sp-3xs)}.eui-21 .eds-table .eds-table__sortable-col .eds-table__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-21 .eds-table .eds-table__sortable-col .eds-table__sortable-col-content .eds-table__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;user-select:none;gap:var(--eds-sp-2xs)}.eui-21 .eds-table .eds-table__row--selected td{background-color:var(--eds-c-surface-selected)}.eui-21 .eds-table .eds-table__row--selectable{cursor:pointer}.eui-21 .eds-table .eds-table__col--sticky{position:sticky;z-index:1;background-color:inherit}.eui-21 .eds-table .eds-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-21 .eds-table .eds-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-21 .eds-table--virtual-scroll{width:100%;height:100%}.eui-21 .eds-table--fixed-layout{table-layout:fixed;width:100%}.eui-21 .eds-table--bordered td,.eui-21 .eds-table--bordered th{border:var(--eds-bw-s) solid var(--eds-c-border-divider)}.eui-21 .eds-table--compact thead tr th{padding:var(--eds-sp-3xs) var(--eds-sp-s)}.eui-21 .eds-table--compact tbody tr{height:calc(2 * var(--eds-sp-m))}.eui-21 .eds-table--compact tbody tr td{padding:0 var(--eds-sp-s)}.eui-21 .eds-table--flat thead tr th{background-color:transparent;border:none}.eui-21 .eds-table--flat tbody tr{border:none}.eui-21 .eds-table--flat tbody tr td{background-color:transparent;border:none}.eui-21 .eds-table--flat tbody tr:hover td{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-table--flat tfoot tr{border:none}.eui-21 .eds-table--flat tfoot tr td{background-color:transparent;border:none}.eui-21 .eds-table--flat tr{border:none}.eui-21 .eds-table--loading{pointer-events:none;opacity:.6}.eui-21 .eds-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eds-c-surface-elevation);color:var(--eds-c-foreground-default);cursor:move;opacity:1}.eui-21 .eds-table--cols-orderable tr{display:table-row}.eui-21 .eds-table--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 .eds-table--sticky{max-width:none!important}.eui-21 .eds-table--sticky tbody tr:nth-of-type(odd) td{background-color:var(--eds-c-surface-default)}.eui-21 .eds-table--sticky tbody tr:nth-of-type(odd):hover td{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-table--sticky tbody tr:nth-of-type(2n) td{background-color:var(--eds-c-surface-elevation)}.eui-21 .eds-table--sticky tbody tr:nth-of-type(2n):hover td{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-table--sticky-header thead{position:sticky;top:0;z-index:8}.eui-21 .eds-table--sticky-header thead th,.eui-21 .eds-table--sticky-header thead td{background-color:inherit}.eui-21 .eds-table--sticky-header.eds-table--sticky-cols thead{z-index:9}.eui-21 .eds-table--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-21 .eds-table--sticky-footer tfoot tr td{background-color:inherit}.eui-21 .eds-table--sticky-cols .eds-table__col--sticky{position:sticky;z-index:1}.eui-21 .eds-table--sticky-cols th.eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols tbody td.eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols tfoot td.eds-table__col--sticky.eds-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-21 .eds-table--sticky-cols th.eds-table__col--sticky.eds-table__col--sticky-shadowed-last,.eui-21 .eds-table--sticky-cols tbody td.eds-table__col--sticky.eds-table__col--sticky-shadowed-last,.eui-21 .eds-table--sticky-cols tfoot td.eds-table__col--sticky.eds-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width:767px){.eui-21 .eds-table--responsive{width:100%!important}.eui-21 .eds-table--responsive thead,.eui-21 .eds-table--responsive tbody,.eui-21 .eds-table--responsive tfoot,.eui-21 .eds-table--responsive th,.eui-21 .eds-table--responsive td,.eui-21 .eds-table--responsive tr{display:block}.eui-21 .eds-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-21 .eds-table--responsive tr{height:auto}.eui-21 .eds-table--responsive td{border:none;border-bottom:var(--eds-bw-s) solid var(--eds-c-border-divider);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-21 .eds-table--responsive td:before{color:var(--eds-c-foreground-subtler);content:attr(data-col-label);left:var(--eds-sp-xs);padding-right:var(--eds-sp-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eds-f-label-m-semi-bold)}.eui-21 .eds-table--responsive tfoot tr td:empty{display:none!important}.eui-21 .eds-table--responsive .actionsColumn,.eui-21 .eds-table--responsive .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-21 .eds-table .eds-table__sticky-container{height:auto;width:auto!important}.eui-21 .eds-table--sticky-cols th,.eui-21 .eds-table--sticky-cols td,.eui-21 .eds-table--sticky-cols th .eds-table__col--sticky,.eui-21 .eds-table--sticky-cols td .eds-table__col--sticky{width:auto;z-index:auto}.eui-21 .eds-table--sticky-cols th .eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols th .eds-table__col--sticky.eds-table__col--sticky-shadowed-last,.eui-21 .eds-table--sticky-cols td .eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols td .eds-table__col--sticky.eds-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-21 .eds-table--sticky-cols tfoot tr td:empty{display:none!important}}@keyframes eds-table-spin{to{transform:rotate(360deg)}}@keyframes eds-table-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTable, isStandalone: true, selector: "eds-table, table[edsTable]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, propId: { classPropertyName: "propId", publicName: "propId", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, preselectedRows: { classPropertyName: "preselectedRows", publicName: "preselectedRows", isSignal: true, isRequired: false, transformFunction: null }, isVirtualScroll: { classPropertyName: "isVirtualScroll", publicName: "isVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, isVirtualScrollCache: { classPropertyName: "isVirtualScrollCache", publicName: "isVirtualScrollCache", isSignal: true, isRequired: false, transformFunction: null }, hasStickyHeader: { classPropertyName: "hasStickyHeader", publicName: "hasStickyHeader", isSignal: true, isRequired: false, transformFunction: null }, hasStickyFooter: { classPropertyName: "hasStickyFooter", publicName: "hasStickyFooter", isSignal: true, isRequired: false, transformFunction: null }, hasStickyCols: { classPropertyName: "hasStickyCols", publicName: "hasStickyCols", isSignal: true, isRequired: false, transformFunction: null }, edsTableResponsive: { classPropertyName: "edsTableResponsive", publicName: "edsTableResponsive", isSignal: true, isRequired: false, transformFunction: null }, isAsync: { classPropertyName: "isAsync", publicName: "isAsync", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollAsyncItemsLength: { classPropertyName: "virtualScrollAsyncItemsLength", publicName: "virtualScrollAsyncItemsLength", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollNbRows: { classPropertyName: "virtualScrollNbRows", publicName: "virtualScrollNbRows", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isSelectOnlyVisibleRows: { classPropertyName: "isSelectOnlyVisibleRows", publicName: "isSelectOnlyVisibleRows", isSignal: true, isRequired: false, transformFunction: null }, edsTableBordered: { classPropertyName: "edsTableBordered", publicName: "edsTableBordered", isSignal: true, isRequired: false, transformFunction: null }, edsTableFixedLayout: { classPropertyName: "edsTableFixedLayout", publicName: "edsTableFixedLayout", isSignal: true, isRequired: false, transformFunction: null }, edsTableCompact: { classPropertyName: "edsTableCompact", publicName: "edsTableCompact", isSignal: true, isRequired: false, transformFunction: null }, isFlat: { classPropertyName: "isFlat", publicName: "isFlat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollChange: "scrollChange", rowsSelect: "rowsSelect", sortChange: "sortChange" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "\"eds-table\"" } }, providers: [EdsTableSelectableService, EdsTableSortService], queries: [{ propertyName: "templates", predicate: EdsTableTemplate, isSignal: true }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["cdkVirtualScrollViewport"], descendants: true, isSignal: true }, { propertyName: "cdkVirtualScrollViewportElement", first: true, predicate: ["cdkVirtualScrollViewportElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true, isSignal: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true, isSignal: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVirtualScroll()) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eds-table__scroll-viewport\"\n        [itemSize]=\"itemSize()\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"eds-table__inner\" [style.width]=\"hostWidth\">\n            @if (captionTemplate) {\n                <caption>\n                    <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n                </caption>\n            }\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data()?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (captionTemplate) {\n        <caption>\n            <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n        </caption>\n    }\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-template\n                    [ngTemplateOutlet]=\"bodyTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                </ng-template>\n            }\n            @if (noDataTemplate && (data()?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n@if (isLoading()) {\n    <div class=\"eds-table__loading-overlay\">\n        <div class=\"eds-table__loading-spinner\"></div>\n    </div>\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize()\">\n        @for (__ of nbCols; track $index) {\n            <td><div class=\"eds-table__skeleton-line\"></div></td>\n        }\n    </tr>\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 .eds-table{display:block;position:relative;width:100%}.eui-21 .eds-table .eds-table__scroll-viewport{min-height:100%;width:100%}.eui-21 .eds-table .eds-table__scrollable-wrapper{overflow:auto}.eui-21 .eds-table .eds-table__orderable-cols-preview,.eui-21 .eds-table .eds-table__orderable-rows-preview{display:none}.eui-21 .eds-table tr[edshighlighted]{background-color:var(--eds-c-border-divider)!important;position:relative;z-index:2}.eui-21 .eds-table caption{text-align:start;font-style:italic}.eui-21 .eds-table .eds-table__cell-select{width:48px;text-align:center;padding:var(--eds-sp-xs)}.eui-21 .eds-table .eds-table__cell-select-checkbox-container{display:flex;align-items:center;justify-content:center}.eui-21 .eds-table .eds-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffb3;z-index:10}.eui-21 .eds-table .eds-table__loading-spinner{width:32px;height:32px;border:3px solid var(--eds-c-border-divider);border-top-color:var(--eds-c-border-primary);border-radius:50%;animation:eds-table-spin .8s linear infinite}.eui-21 .eds-table .eds-table__skeleton-line{height:16px;background:var(--eds-c-surface-hover);border-radius:var(--eds-br-s);animation:eds-table-pulse 1.5s ease-in-out infinite}.eui-21 .eds-table .eds-table__expandable-row td{background-color:var(--eds-c-surface-default)}.eui-21 .eds-table .eds-table-filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-21 .eds-table .eds-table-filter--responsive{width:100%}.eui-21 .eds-table .eds-table-filter__input{padding-left:var(--eds-sp-2xl)!important}.eui-21 .eds-table .eds-table-filter__icon{left:var(--eds-sp-xs);position:absolute;top:var(--eds-sp-xs)}.eui-21 .eds-table .eds-table__sortable-col{cursor:pointer;-webkit-user-select:none;user-select:none}.eui-21 .eds-table .eds-table__sortable-col--disabled{cursor:default}.eui-21 .eds-table .eds-table__sortable-col-multisort-index{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler);margin-left:var(--eds-sp-3xs)}.eui-21 .eds-table .eds-table__sortable-col .eds-table__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-21 .eds-table .eds-table__sortable-col .eds-table__sortable-col-content .eds-table__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;user-select:none;gap:var(--eds-sp-2xs)}.eui-21 .eds-table .eds-table__row--selected td{background-color:var(--eds-c-surface-selected)}.eui-21 .eds-table .eds-table__row--selectable{cursor:pointer}.eui-21 .eds-table .eds-table__col--sticky{position:sticky;z-index:1;background-color:inherit}.eui-21 .eds-table .eds-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-21 .eds-table .eds-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-21 .eds-table--virtual-scroll{width:100%;height:100%}.eui-21 .eds-table--fixed-layout{table-layout:fixed;width:100%}.eui-21 .eds-table--bordered td,.eui-21 .eds-table--bordered th{border:var(--eds-bw-s) solid var(--eds-c-border-divider)}.eui-21 .eds-table--compact thead tr th{padding:var(--eds-sp-3xs) var(--eds-sp-s)}.eui-21 .eds-table--compact tbody tr{height:calc(2 * var(--eds-sp-m))}.eui-21 .eds-table--compact tbody tr td{padding:0 var(--eds-sp-s)}.eui-21 .eds-table--flat thead tr th{background-color:transparent;border:none}.eui-21 .eds-table--flat tbody tr{border:none}.eui-21 .eds-table--flat tbody tr td{background-color:transparent;border:none}.eui-21 .eds-table--flat tbody tr:hover td{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-table--flat tfoot tr{border:none}.eui-21 .eds-table--flat tfoot tr td{background-color:transparent;border:none}.eui-21 .eds-table--flat tr{border:none}.eui-21 .eds-table--loading{pointer-events:none;opacity:.6}.eui-21 .eds-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eds-c-surface-elevation);color:var(--eds-c-foreground-default);cursor:move;opacity:1}.eui-21 .eds-table--cols-orderable tr{display:table-row}.eui-21 .eds-table--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 .eds-table--sticky{max-width:none!important}.eui-21 .eds-table--sticky tbody tr:nth-of-type(odd) td{background-color:var(--eds-c-surface-default)}.eui-21 .eds-table--sticky tbody tr:nth-of-type(odd):hover td{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-table--sticky tbody tr:nth-of-type(2n) td{background-color:var(--eds-c-surface-elevation)}.eui-21 .eds-table--sticky tbody tr:nth-of-type(2n):hover td{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-table--sticky-header thead{position:sticky;top:0;z-index:8}.eui-21 .eds-table--sticky-header thead th,.eui-21 .eds-table--sticky-header thead td{background-color:inherit}.eui-21 .eds-table--sticky-header.eds-table--sticky-cols thead{z-index:9}.eui-21 .eds-table--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-21 .eds-table--sticky-footer tfoot tr td{background-color:inherit}.eui-21 .eds-table--sticky-cols .eds-table__col--sticky{position:sticky;z-index:1}.eui-21 .eds-table--sticky-cols th.eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols tbody td.eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols tfoot td.eds-table__col--sticky.eds-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-21 .eds-table--sticky-cols th.eds-table__col--sticky.eds-table__col--sticky-shadowed-last,.eui-21 .eds-table--sticky-cols tbody td.eds-table__col--sticky.eds-table__col--sticky-shadowed-last,.eui-21 .eds-table--sticky-cols tfoot td.eds-table__col--sticky.eds-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width:767px){.eui-21 .eds-table--responsive{width:100%!important}.eui-21 .eds-table--responsive thead,.eui-21 .eds-table--responsive tbody,.eui-21 .eds-table--responsive tfoot,.eui-21 .eds-table--responsive th,.eui-21 .eds-table--responsive td,.eui-21 .eds-table--responsive tr{display:block}.eui-21 .eds-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-21 .eds-table--responsive tr{height:auto}.eui-21 .eds-table--responsive td{border:none;border-bottom:var(--eds-bw-s) solid var(--eds-c-border-divider);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-21 .eds-table--responsive td:before{color:var(--eds-c-foreground-subtler);content:attr(data-col-label);left:var(--eds-sp-xs);padding-right:var(--eds-sp-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eds-f-label-m-semi-bold)}.eui-21 .eds-table--responsive tfoot tr td:empty{display:none!important}.eui-21 .eds-table--responsive .actionsColumn,.eui-21 .eds-table--responsive .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-21 .eds-table .eds-table__sticky-container{height:auto;width:auto!important}.eui-21 .eds-table--sticky-cols th,.eui-21 .eds-table--sticky-cols td,.eui-21 .eds-table--sticky-cols th .eds-table__col--sticky,.eui-21 .eds-table--sticky-cols td .eds-table__col--sticky{width:auto;z-index:auto}.eui-21 .eds-table--sticky-cols th .eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols th .eds-table__col--sticky.eds-table__col--sticky-shadowed-last,.eui-21 .eds-table--sticky-cols td .eds-table__col--sticky.eds-table__col--sticky-shadowed-first,.eui-21 .eds-table--sticky-cols td .eds-table__col--sticky.eds-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-21 .eds-table--sticky-cols tfoot tr td:empty{display:none!important}}@keyframes eds-table-spin{to{transform:rotate(360deg)}}@keyframes eds-table-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTable, decorators: [{
             type: Component,
             args: [{ selector: 'eds-table, table[edsTable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -713,10 +713,10 @@ class EdsTableFilter {
         this.form.reset();
         this.filterInput()?.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTableFilter, isStandalone: true, selector: "eds-table-filter", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { properties: { "attr.data-e2e": "\"eds-table-filter\"" }, classAttribute: "eds-table-filter" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"eds-table-filter__form\">\n    <div class=\"eds-table-filter__input-wrapper\">\n        <eds-icon icon=\"magnifying-glass:core\" class=\"eds-table-filter__icon\"></eds-icon>\n        <input\n            #filterInput\n            class=\"eds-table-filter__input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"form.get('filter').value || placeholder()\"\n            [placeholder]=\"placeholder()\" />\n        @if (filterValue()) {\n            <button\n                type=\"button\"\n                class=\"eds-table-filter__clear\"\n                aria-label=\"Clear filter\"\n                (click)=\"resetFilter()\">\n                <eds-icon icon=\"x:core\"></eds-icon>\n            </button>\n        }\n    </div>\n</form>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;justify-content:flex-end}.eui-21 :host .eds-table-filter__form{width:100%;max-width:320px}.eui-21 :host .eds-table-filter__input-wrapper{position:relative;display:flex;align-items:center}.eui-21 :host .eds-table-filter__icon{position:absolute;left:var(--eds-sp-s);color:var(--eds-c-foreground-subtler);pointer-events:none}.eui-21 :host .eds-table-filter__input{width:100%;padding:var(--eds-sp-xs) var(--eds-sp-xl) var(--eds-sp-xs) var(--eds-sp-2xl);font:var(--eds-f-paragraph-m);border:var(--eds-bw-s) solid var(--eds-c-border-divider);border-radius:var(--eds-br-s);background:var(--eds-c-surface-default);color:var(--eds-c-foreground-default);outline:none;transition:border-color .2s}.eui-21 :host .eds-table-filter__input::placeholder{color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-table-filter__input:focus{border-color:var(--eds-c-border-primary)}.eui-21 :host .eds-table-filter__clear{position:absolute;right:var(--eds-sp-xs);display:flex;align-items:center;justify-content:center;padding:var(--eds-sp-3xs);border:none;background:none;color:var(--eds-c-foreground-subtler);cursor:pointer;border-radius:var(--eds-br-s)}.eui-21 :host .eds-table-filter__clear:hover{color:var(--eds-c-foreground-default);background:var(--eds-c-surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTableFilter, isStandalone: true, selector: "eds-table-filter", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { properties: { "attr.data-e2e": "\"eds-table-filter\"" }, classAttribute: "eds-table-filter" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"eds-table-filter__form\">\n    <div class=\"eds-table-filter__input-wrapper\">\n        <eds-icon icon=\"magnifying-glass:core\" class=\"eds-table-filter__icon\"></eds-icon>\n        <input\n            #filterInput\n            class=\"eds-table-filter__input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"form.get('filter').value || placeholder()\"\n            [placeholder]=\"placeholder()\" />\n        @if (filterValue()) {\n            <button\n                type=\"button\"\n                class=\"eds-table-filter__clear\"\n                aria-label=\"Clear filter\"\n                (click)=\"resetFilter()\">\n                <eds-icon icon=\"x:core\"></eds-icon>\n            </button>\n        }\n    </div>\n</form>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;justify-content:flex-end}.eui-21 :host .eds-table-filter__form{width:100%;max-width:320px}.eui-21 :host .eds-table-filter__input-wrapper{position:relative;display:flex;align-items:center}.eui-21 :host .eds-table-filter__icon{position:absolute;left:var(--eds-sp-s);color:var(--eds-c-foreground-subtler);pointer-events:none}.eui-21 :host .eds-table-filter__input{width:100%;padding:var(--eds-sp-xs) var(--eds-sp-xl) var(--eds-sp-xs) var(--eds-sp-2xl);font:var(--eds-f-paragraph-m);border:var(--eds-bw-s) solid var(--eds-c-border-divider);border-radius:var(--eds-br-s);background:var(--eds-c-surface-default);color:var(--eds-c-foreground-default);outline:none;transition:border-color .2s}.eui-21 :host .eds-table-filter__input::placeholder{color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-table-filter__input:focus{border-color:var(--eds-c-border-primary)}.eui-21 :host .eds-table-filter__clear{position:absolute;right:var(--eds-sp-xs);display:flex;align-items:center;justify-content:center;padding:var(--eds-sp-3xs);border:none;background:none;color:var(--eds-c-foreground-subtler);cursor:pointer;border-radius:var(--eds-br-s)}.eui-21 :host .eds-table-filter__clear:hover{color:var(--eds-c-foreground-default);background:var(--eds-c-surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableFilter, decorators: [{
             type: Component,
             args: [{ selector: 'eds-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -757,10 +757,10 @@ class EdsTableSelectableHeader {
             this.selectableService.unselectAllRows();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTableSelectableHeader, isStandalone: true, selector: "tr[edsHeaderSelectable]", inputs: { edsHeaderSelectable: { classPropertyName: "edsHeaderSelectable", publicName: "edsHeaderSelectable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eds-table__header-selectable" }, ngImport: i0, template: "@if (edsHeaderSelectable()) {\n    <th class=\"eds-table__cell-select\">\n        <div class=\"eds-table__cell-select-checkbox-container\">\n            <input\n                edsInputCheckbox\n                [attr.aria-label]=\"ariaLabel\"\n                [checked]=\"isChecked()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (click)=\"toggleCheckedState($event)\" />\n        </div>\n    </th>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: i1$2.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTableSelectableHeader, isStandalone: true, selector: "tr[edsHeaderSelectable]", inputs: { edsHeaderSelectable: { classPropertyName: "edsHeaderSelectable", publicName: "edsHeaderSelectable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eds-table__header-selectable" }, ngImport: i0, template: "@if (edsHeaderSelectable()) {\n    <th class=\"eds-table__cell-select\">\n        <div class=\"eds-table__cell-select-checkbox-container\">\n            <input\n                edsInputCheckbox\n                [attr.aria-label]=\"ariaLabel\"\n                [checked]=\"isChecked()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (click)=\"toggleCheckedState($event)\" />\n        </div>\n    </th>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: i1$2.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableHeader, decorators: [{
             type: Component,
             args: [{ selector: 'tr[edsHeaderSelectable]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ...EDS_INPUT_CHECKBOX,
@@ -860,10 +860,10 @@ class EdsTableSelectableRow {
             this.selectableService.unselectRow(data);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTableSelectableRow, isStandalone: true, selector: "tr[edsDataSelectable]", inputs: { edsDataSelectable: { classPropertyName: "edsDataSelectable", publicName: "edsDataSelectable", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelectable: { classPropertyName: "isSingleSelectable", publicName: "isSingleSelectable", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isKeyboardSelectable: { classPropertyName: "isKeyboardSelectable", publicName: "isKeyboardSelectable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (edsDataSelectable()) {\n    <td class=\"eds-table__cell-select\">\n        <div class=\"eds-table__cell-select-checkbox-container\">\n            <input\n                edsInputCheckbox\n                [attr.aria-label]=\"currentIsChecked() ? 'Row selected' : 'Row not selected'\"\n                [checked]=\"currentIsChecked()\"\n                (change)=\"toggleCheckedState($event)\" />\n        </div>\n    </td>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: i1$2.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTableSelectableRow, isStandalone: true, selector: "tr[edsDataSelectable]", inputs: { edsDataSelectable: { classPropertyName: "edsDataSelectable", publicName: "edsDataSelectable", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelectable: { classPropertyName: "isSingleSelectable", publicName: "isSingleSelectable", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isKeyboardSelectable: { classPropertyName: "isKeyboardSelectable", publicName: "isKeyboardSelectable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (edsDataSelectable()) {\n    <td class=\"eds-table__cell-select\">\n        <div class=\"eds-table__cell-select-checkbox-container\">\n            <input\n                edsInputCheckbox\n                [attr.aria-label]=\"currentIsChecked() ? 'Row selected' : 'Row not selected'\"\n                [checked]=\"currentIsChecked()\"\n                (change)=\"toggleCheckedState($event)\" />\n        </div>\n    </td>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: i1$2.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSelectableRow, decorators: [{
             type: Component,
             args: [{ selector: 'tr[edsDataSelectable]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ...EDS_INPUT_CHECKBOX,
@@ -948,10 +948,10 @@ class EdsTableSortableCol {
         }
         this.sortService.setSort(this.sortOn(), next, this.isMultiSortable());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSortableCol, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTableSortableCol, isStandalone: true, selector: "th[edsSortable]", inputs: { sortOn: { classPropertyName: "sortOn", publicName: "sortOn", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, defaultOrder: { classPropertyName: "defaultOrder", publicName: "defaultOrder", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, isMultiSortable: { classPropertyName: "isMultiSortable", publicName: "isMultiSortable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-sort": "ariaSort()" } }, ngImport: i0, template: "<div class=\"eds-table__sortable-col-content\">\n    <div class=\"eds-table__sortable-col-content-label\">\n        <ng-content />\n\n        @if (order() === 'none' && !sortDisabled()) {\n            <button edsIconButton icon=\"arrows-down-up:core\" [ariaLabel]=\"'Click to sort ascending'\" (click)=\"changeSort()\"></button>\n        }\n        @if (order() === 'asc' && isSorted() && !sortDisabled()) {\n            <button edsIconButton icon=\"arrow-up:core\" [ariaLabel]=\"'Click to sort descending'\" (click)=\"changeSort()\"></button>\n        }\n        @if (order() === 'desc' && isSorted() && !sortDisabled()) {\n            <button edsIconButton icon=\"arrow-down:core\" [ariaLabel]=\"'Click to sort none'\" (click)=\"changeSort()\"></button>\n        }\n\n        @if (sortedIndex() && !sortDisabled()) {\n            <span class=\"eds-table__sortable-col-multisort-index\">{{ sortedIndex() }}</span>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$3.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSortableCol, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTableSortableCol, isStandalone: true, selector: "th[edsSortable]", inputs: { sortOn: { classPropertyName: "sortOn", publicName: "sortOn", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, defaultOrder: { classPropertyName: "defaultOrder", publicName: "defaultOrder", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, isMultiSortable: { classPropertyName: "isMultiSortable", publicName: "isMultiSortable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-sort": "ariaSort()" } }, ngImport: i0, template: "<div class=\"eds-table__sortable-col-content\">\n    <div class=\"eds-table__sortable-col-content-label\">\n        <ng-content />\n\n        @if (order() === 'none' && !sortDisabled()) {\n            <button edsIconButton icon=\"arrows-down-up:core\" [ariaLabel]=\"'Click to sort ascending'\" (click)=\"changeSort()\"></button>\n        }\n        @if (order() === 'asc' && isSorted() && !sortDisabled()) {\n            <button edsIconButton icon=\"arrow-up:core\" [ariaLabel]=\"'Click to sort descending'\" (click)=\"changeSort()\"></button>\n        }\n        @if (order() === 'desc' && isSorted() && !sortDisabled()) {\n            <button edsIconButton icon=\"arrow-down:core\" [ariaLabel]=\"'Click to sort none'\" (click)=\"changeSort()\"></button>\n        }\n\n        @if (sortedIndex() && !sortDisabled()) {\n            <span class=\"eds-table__sortable-col-multisort-index\">{{ sortedIndex() }}</span>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$3.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableSortableCol, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableSortableCol, decorators: [{
             type: Component,
             args: [{ selector: 'th[edsSortable]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ...EDS_ICON,
@@ -967,10 +967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Only first or last columns can be sticky.
  */
 class EdsTableStickyCol {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableStickyCol, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EdsTableStickyCol, isStandalone: true, selector: "th[edsStickyCol], td[edsStickyCol]", host: { classAttribute: "eds-table__col--sticky" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableStickyCol, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsTableStickyCol, isStandalone: true, selector: "th[edsStickyCol], td[edsStickyCol]", host: { classAttribute: "eds-table__col--sticky" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableStickyCol, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableStickyCol, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -994,10 +994,10 @@ class EdsTableExpandableRow {
         this.player?.cancel();
         this.player = this.el.nativeElement.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, easing: 'ease', fill: 'forwards' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableExpandableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EdsTableExpandableRow, isStandalone: true, selector: "tr[edsExpandableRow]", host: { classAttribute: "eds-table__expandable-row" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableExpandableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsTableExpandableRow, isStandalone: true, selector: "tr[edsExpandableRow]", host: { classAttribute: "eds-table__expandable-row" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableExpandableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableExpandableRow, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1049,10 +1049,10 @@ class EdsTableHighlightPipe {
         const regex = new RegExp(`(${variants.map(v => v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
         return value.toString().replace(regex, `<span class="${className}">$1</span>`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: EdsTableHighlightPipe, isStandalone: true, name: "edsTableHighlight" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: EdsTableHighlightPipe, isStandalone: true, name: "edsTableHighlight" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTableHighlightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTableHighlightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'edsTableHighlight',

package/fesm2022/eui-eds-eds-tabs.mjs

@@ -11,16 +11,17 @@ import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
 
 class EdsTabHeader {
     constructor() {
-        this.templateRef = viewChild.required('templateRef');
+        this.templateRef = viewChild.required('templateRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
         this.viewContainerRef = inject(ViewContainerRef);
     }
     ngAfterViewInit() {
         this.templatePortal = new TemplatePortal(this.templateRef(), this.viewContainerRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: EdsTabHeader, isStandalone: true, selector: "eds-tab-header", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab-header-wrapper\">\n        <ng-content select=\"eds-tab-header-left-content\"/>\n        <div class=\"eds-tab-header-label-wrapper\">\n            <ng-content select=\"eds-tab-header-label\"/>\n            <ng-content select=\"eds-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eds-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTabHeader, isStandalone: true, selector: "eds-tab-header", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab-header-wrapper\">\n        <ng-content select=\"eds-tab-header-left-content\"/>\n        <div class=\"eds-tab-header-label-wrapper\">\n            <ng-content select=\"eds-tab-header-label\"/>\n            <ng-content select=\"eds-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eds-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeader, decorators: [{
             type: Component,
             args: [{ selector: 'eds-tab-header', template: "<ng-template #templateRef>\n    <div class=\"eds-tab-header-wrapper\">\n        <ng-content select=\"eds-tab-header-left-content\"/>\n        <div class=\"eds-tab-header-label-wrapper\">\n            <ng-content select=\"eds-tab-header-label\"/>\n            <ng-content select=\"eds-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eds-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
@@ -33,17 +34,18 @@ class EdsTabBody {
          * @default false
          */
         this.hasNoContentPadding = false;
-        this.templateRef = viewChild.required('templateRef');
+        this.templateRef = viewChild.required('templateRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
         this.tabIndex$ = new BehaviorSubject(0);
         this.viewContainerRef = inject(ViewContainerRef);
     }
     ngAfterViewInit() {
         this.templatePortal = new TemplatePortal(this.templateRef(), this.viewContainerRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: EdsTabBody, isStandalone: true, selector: "eds-tab-body", inputs: { hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab__body\" [tabindex]=\"tabIndex$ | async\" [class.eds-tab__body--no-padding]=\"hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTabBody, isStandalone: true, selector: "eds-tab-body", inputs: { hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab__body\" [tabindex]=\"tabIndex$ | async\" [class.eds-tab__body--no-padding]=\"hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabBody, decorators: [{
             type: Component,
             args: [{ selector: 'eds-tab-body', imports: [
                         AsyncPipe,
@@ -90,7 +92,8 @@ class EdsTab {
          * @default false
          */
         this.isHandleActivateTab = false;
-        this.templateHeader = contentChild.required(forwardRef(() => EdsTabHeader));
+        this.templateHeader = contentChild.required(forwardRef(() => EdsTabHeader), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateHeader" }] : /* istanbul ignore next */ []));
         this.euiVariant = 'euiPrimary';
         this.isActive = false;
         this.isVisible$ = new BehaviorSubject(this.isVisible);
@@ -114,10 +117,10 @@ class EdsTab {
     deactivateTab() {
         this.isActive = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: EdsTab, isStandalone: true, selector: "eds-tab", inputs: { id: "id", url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleActivateTab: ["isHandleActivateTab", "isHandleActivateTab", booleanAttribute], euiVariant: "euiVariant" }, queries: [{ propertyName: "templateHeader", first: true, predicate: i0.forwardRef(() => EdsTabHeader), descendants: true, isSignal: true }, { propertyName: "templateBody", first: true, predicate: i0.forwardRef(() => EdsTabBody), descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTab, isStandalone: true, selector: "eds-tab", inputs: { id: "id", url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleActivateTab: ["isHandleActivateTab", "isHandleActivateTab", booleanAttribute], euiVariant: "euiVariant" }, queries: [{ propertyName: "templateHeader", first: true, predicate: i0.forwardRef(() => EdsTabHeader), descendants: true, isSignal: true }, { propertyName: "templateBody", first: true, predicate: i0.forwardRef(() => EdsTabBody), descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab',
@@ -190,9 +193,12 @@ class EdsTabs {
          * Event emitted when a tab is clicked
          */
         this.tabClick = output();
-        this.edsTabsHeadersContainer = viewChild.required('euiTabsHeadersContainer');
-        this.edsTabsHeaders = viewChild.required('euiTabsHeaders');
-        this.edsTabsRightContent = viewChild.required('euiTabsRightContent');
+        this.edsTabsHeadersContainer = viewChild.required('euiTabsHeadersContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabsHeadersContainer" }] : /* istanbul ignore next */ []));
+        this.edsTabsHeaders = viewChild.required('euiTabsHeaders', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabsHeaders" }] : /* istanbul ignore next */ []));
+        this.edsTabsRightContent = viewChild.required('euiTabsRightContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabsRightContent" }] : /* istanbul ignore next */ []));
         this.edsTabListItems = viewChildren('euiTabListItems', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "edsTabListItems" }] : /* istanbul ignore next */ []));
         this.tabs = [];
@@ -545,10 +551,10 @@ class EdsTabs {
             activeTab.offsetLeft + activeTab.clientWidth < this.edsTabsHeadersContainerWidth - this.scrollOffset;
         return fullyVisible;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTabs, isStandalone: true, selector: "eds-tabs", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, activeTabIndex: { classPropertyName: "activeTabIndex", publicName: "activeTabIndex", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isMainNavigation: { classPropertyName: "isMainNavigation", publicName: "isMainNavigation", isSignal: true, isRequired: false, transformFunction: null }, isFlat: { classPropertyName: "isFlat", publicName: "isFlat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabActivate: "tabActivate", tabClick: "tabClick" }, host: { properties: { "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-tabs" }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EdsTab) }], viewQueries: [{ propertyName: "edsTabsHeadersContainer", first: true, predicate: ["euiTabsHeadersContainer"], descendants: true, isSignal: true }, { propertyName: "edsTabsHeaders", first: true, predicate: ["euiTabsHeaders"], descendants: true, isSignal: true }, { propertyName: "edsTabsRightContent", first: true, predicate: ["euiTabsRightContent"], descendants: true, isSignal: true }, { propertyName: "edsTabListItems", predicate: ["euiTabListItems"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #edsTabsHeadersContainer class=\"eds-tabs-wrapper\" [class.eds-tabs-wrapper--scrolling]=\"scrolling\">\n    <div class=\"eds-tabs-navigation\">\n        <div class=\"eds-tabs-navigation__left-item\">\n            <button edsIconButton\n                (click)=\"goToLeft()\"\n                [edsDisabled]=\"navigationLeftButtonDisabled\"\n                icon=\"caret-left:core\"\n                ariaLabel=\"Scroll left\">\n            </button>\n        </div>\n\n        <ul #edsTabsHeaders class=\"eds-tab-items\" [attr.data-offset]=\"currentOffset\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n            @for (tab of tabs; let i = $index; track tab) {\n                @if (tab.isVisible$ | async) {\n                    <li #euiTabListItems\n                        class=\"eds-tab-item\"\n                        id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                        [tabindex]=\"i === activeTabIndex ? '0' : '-1'\"\n                        role=\"tab\"\n                        attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                        [attr.aria-selected]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--active]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--disabled]=\"tab.isDisabled$ | async\"\n                        attr.aria-disabled=\"{{ tab.isDisabled$ | async }}\"\n                        (click)=\"tabListItemClick(i)\"\n                        (keydown)=\"onKeydown(i, $event)\">\n                        <ng-template [cdkPortalOutlet]=\"tab.templateHeader().templatePortal\"></ng-template>\n\n                        @if (tab.isClosable$ | async) {\n                            <button edsIconButton\n                                [tabindex]=\"-1\"\n                                ariaLabel=\"Closable\"\n                                edsRounded\n                                class=\"eds-tab-close-button\"\n                                icon=\"x:core\"\n                                edsSizeS\n                                [edsDisabled]=\"tab.isDisabled$ | async\"\n                                (buttonClick)=\"close(i, $event)\">\n                            </button>\n                        }\n                    </li>\n                }\n            }\n        </ul>\n\n        <div class=\"eds-tabs-navigation__right-item\">\n            <button edsIconButton\n                (click)=\"goToRight()\"\n                [edsDisabled]=\"navigationRightButtonDisabled\"\n                icon=\"caret-right:core\"\n                ariaLabel=\"Scroll right\">\n            </button>\n        </div>\n    </div>\n    <div #edsTabsRightContent class=\"eds-tabs-right-content-wrapper\">\n        <ng-content select=\"eds-tabs-right-content\"></ng-content>\n    </div>\n</div>\n\n@for (tab of tabs; let i = $index; track tab) {\n    @if (i === activeTabIndex && (tab.isDisabled$ | async) === false && tab.templateBody) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eds-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-tabs{--_label-font: var(--eui-f-m-semi-bold);--_sublabel-font: var(--eui-f-s)}.eui-21 :host.eds-tabs{display:flex;flex-direction:column;width:100%}.eui-21 :host.eds-tabs .eds-tab-item{--_border-color: transparent;--_color: var(--eds-c-foreground-subtler);--_color-hover: var(--eds-c-foreground)}.eui-21 :host.eds-tabs .eds-tab-item--active{--_color: var(--eds-c-foreground);--_border-color: var(--eds-c-border)}.eui-21 :host.eds-tabs .eds-tab-item--disabled{--_color: var(--eds-c-foreground-disabled);--_icon-color: var(--eds-c-foreground-disabled);--_border-color-hover: transparent}.eui-21 :host.eds-tabs .eds-tabs-wrapper{align-items:center;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;overflow:hidden;position:relative}.eui-21 :host.eds-tabs .eds-tabs-wrapper .eds-tabs-right-content-wrapper{display:flex;margin-left:var(--eds-sp-m)}.eui-21 :host.eds-tabs .eds-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:var(--eds-bw-s) solid transparent;color:var(--_color);cursor:pointer;display:flex;padding:var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);position:relative;text-align:center;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper{display:flex;align-items:center;gap:var(--eds-sp-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper{display:flex;flex-direction:column}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-label{display:block;font-weight:700;line-height:var(--eds-sp-l);color:var(--_color);font:var(--_label-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-sub-label{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-left-content,.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-right-content{display:flex}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--active{border-color:var(--_border-color)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--disabled{cursor:not-allowed;pointer-events:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-sub-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{align-self:center;background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;z-index:1}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item{left:0}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{right:0}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items{padding-left:var(--eui-s-5xl)}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item{min-width:unset;overflow:unset}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__right-item{display:flex}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body{padding:var(--eui-s-s)}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body.eds-tab__body--no-padding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTabs, isStandalone: true, selector: "eds-tabs", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, activeTabIndex: { classPropertyName: "activeTabIndex", publicName: "activeTabIndex", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isMainNavigation: { classPropertyName: "isMainNavigation", publicName: "isMainNavigation", isSignal: true, isRequired: false, transformFunction: null }, isFlat: { classPropertyName: "isFlat", publicName: "isFlat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabActivate: "tabActivate", tabClick: "tabClick" }, host: { properties: { "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-tabs" }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EdsTab) }], viewQueries: [{ propertyName: "edsTabsHeadersContainer", first: true, predicate: ["euiTabsHeadersContainer"], descendants: true, isSignal: true }, { propertyName: "edsTabsHeaders", first: true, predicate: ["euiTabsHeaders"], descendants: true, isSignal: true }, { propertyName: "edsTabsRightContent", first: true, predicate: ["euiTabsRightContent"], descendants: true, isSignal: true }, { propertyName: "edsTabListItems", predicate: ["euiTabListItems"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #edsTabsHeadersContainer class=\"eds-tabs-wrapper\" [class.eds-tabs-wrapper--scrolling]=\"scrolling\">\n    <div class=\"eds-tabs-navigation\">\n        <div class=\"eds-tabs-navigation__left-item\">\n            <button edsIconButton\n                (click)=\"goToLeft()\"\n                [edsDisabled]=\"navigationLeftButtonDisabled\"\n                icon=\"caret-left:core\"\n                ariaLabel=\"Scroll left\">\n            </button>\n        </div>\n\n        <ul #edsTabsHeaders class=\"eds-tab-items\" [attr.data-offset]=\"currentOffset\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n            @for (tab of tabs; let i = $index; track tab) {\n                @if (tab.isVisible$ | async) {\n                    <li #euiTabListItems\n                        class=\"eds-tab-item\"\n                        id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                        [tabindex]=\"i === activeTabIndex ? '0' : '-1'\"\n                        role=\"tab\"\n                        attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                        [attr.aria-selected]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--active]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--disabled]=\"tab.isDisabled$ | async\"\n                        attr.aria-disabled=\"{{ tab.isDisabled$ | async }}\"\n                        (click)=\"tabListItemClick(i)\"\n                        (keydown)=\"onKeydown(i, $event)\">\n                        <ng-template [cdkPortalOutlet]=\"tab.templateHeader().templatePortal\"></ng-template>\n\n                        @if (tab.isClosable$ | async) {\n                            <button edsIconButton\n                                [tabindex]=\"-1\"\n                                ariaLabel=\"Closable\"\n                                edsRounded\n                                class=\"eds-tab-close-button\"\n                                icon=\"x:core\"\n                                edsSizeS\n                                [edsDisabled]=\"tab.isDisabled$ | async\"\n                                (buttonClick)=\"close(i, $event)\">\n                            </button>\n                        }\n                    </li>\n                }\n            }\n        </ul>\n\n        <div class=\"eds-tabs-navigation__right-item\">\n            <button edsIconButton\n                (click)=\"goToRight()\"\n                [edsDisabled]=\"navigationRightButtonDisabled\"\n                icon=\"caret-right:core\"\n                ariaLabel=\"Scroll right\">\n            </button>\n        </div>\n    </div>\n    <div #edsTabsRightContent class=\"eds-tabs-right-content-wrapper\">\n        <ng-content select=\"eds-tabs-right-content\"></ng-content>\n    </div>\n</div>\n\n@for (tab of tabs; let i = $index; track tab) {\n    @if (i === activeTabIndex && (tab.isDisabled$ | async) === false && tab.templateBody) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eds-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-tabs{--_label-font: var(--eui-f-m-semi-bold);--_sublabel-font: var(--eui-f-s)}.eui-21 :host.eds-tabs{display:flex;flex-direction:column;width:100%}.eui-21 :host.eds-tabs .eds-tab-item{--_border-color: transparent;--_color: var(--eds-c-foreground-subtler);--_color-hover: var(--eds-c-foreground)}.eui-21 :host.eds-tabs .eds-tab-item--active{--_color: var(--eds-c-foreground);--_border-color: var(--eds-c-border)}.eui-21 :host.eds-tabs .eds-tab-item--disabled{--_color: var(--eds-c-foreground-disabled);--_icon-color: var(--eds-c-foreground-disabled);--_border-color-hover: transparent}.eui-21 :host.eds-tabs .eds-tabs-wrapper{align-items:center;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;overflow:hidden;position:relative}.eui-21 :host.eds-tabs .eds-tabs-wrapper .eds-tabs-right-content-wrapper{display:flex;margin-left:var(--eds-sp-m)}.eui-21 :host.eds-tabs .eds-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:var(--eds-bw-s) solid transparent;color:var(--_color);cursor:pointer;display:flex;padding:var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);position:relative;text-align:center;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper{display:flex;align-items:center;gap:var(--eds-sp-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper{display:flex;flex-direction:column}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-label{display:block;font-weight:700;line-height:var(--eds-sp-l);color:var(--_color);font:var(--_label-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-sub-label{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-left-content,.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-right-content{display:flex}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--active{border-color:var(--_border-color)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--disabled{cursor:not-allowed;pointer-events:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-sub-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{align-self:center;background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;z-index:1}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item{left:0}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{right:0}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items{padding-left:var(--eui-s-5xl)}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item{min-width:unset;overflow:unset}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__right-item{display:flex}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body{padding:var(--eui-s-s)}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body.eds-tab__body--no-padding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabs, decorators: [{
             type: Component,
             args: [{ selector: 'eds-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-tabs',
@@ -566,10 +572,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], edsTabsHeadersContainer: [{ type: i0.ViewChild, args: ['euiTabsHeadersContainer', { isSignal: true }] }], edsTabsHeaders: [{ type: i0.ViewChild, args: ['euiTabsHeaders', { isSignal: true }] }], edsTabsRightContent: [{ type: i0.ViewChild, args: ['euiTabsRightContent', { isSignal: true }] }], edsTabListItems: [{ type: i0.ViewChildren, args: ['euiTabListItems', { isSignal: true }] }] } });
 
 class EdsTabsRightContent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabsRightContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsTabsRightContent, isStandalone: true, selector: "eds-tabs-right-content", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:flex;margin-left:auto}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabsRightContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabsRightContent, isStandalone: true, selector: "eds-tabs-right-content", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:flex;margin-left:auto}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabsRightContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabsRightContent, decorators: [{
             type: Component,
             args: [{ selector: 'eds-tabs-right-content', template: '<ng-content/>', styles: [":host{display:flex;margin-left:auto}\n"] }]
         }] });
@@ -578,10 +584,10 @@ class EdsTabHeaderLabel {
     constructor() {
         this.string = 'eds-tab-header-label';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsTabHeaderLabel, isStandalone: true, selector: "eds-tab-header-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderLabel, isStandalone: true, selector: "eds-tab-header-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-label',
@@ -596,10 +602,10 @@ class EdsTabHeaderSublabel {
     constructor() {
         this.string = 'eds-tab-header-sub-label';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderSublabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsTabHeaderSublabel, isStandalone: true, selector: "eds-tab-header-sub-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderSublabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderSublabel, isStandalone: true, selector: "eds-tab-header-sub-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderSublabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderSublabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-sub-label',
@@ -614,10 +620,10 @@ class EdsTabHeaderLeftContent {
     constructor() {
         this.string = 'eds-tab-header-left-content';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderLeftContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsTabHeaderLeftContent, isStandalone: true, selector: "eds-tab-header-left-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLeftContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderLeftContent, isStandalone: true, selector: "eds-tab-header-left-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderLeftContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLeftContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-left-content',
@@ -632,10 +638,10 @@ class EdsTabHeaderRightContent {
     constructor() {
         this.string = 'eds-tab-header-right-content';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderRightContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsTabHeaderRightContent, isStandalone: true, selector: "eds-tab-header-right-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderRightContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderRightContent, isStandalone: true, selector: "eds-tab-header-right-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsTabHeaderRightContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderRightContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-right-content',