npm - @eui/components - Versions diffs - 18.0.0-next.47 → 18.0.0-next.49 - Mend

@eui/components 18.0.0-next.47 → 18.0.0-next.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (279) hide show

package/esm2022/eui-table/eui-table.component.mjs CHANGED Viewed

@@ -497,7 +497,7 @@ export class EuiTableComponent {
         return prop ? prop.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), obj || self) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiTableComponent, deps: [{ token: i1.EuiTableSortService }, { token: i0.ChangeDetectorRef }, { token: i2.EuiTableSelectableRowService }, { token: i0.ElementRef }, { token: i3.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.6", type: EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", e2eAttr: "e2eAttr", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", loading: ["loading", "loading", booleanAttribute], asyncTable: ["asyncTable", "asyncTable", booleanAttribute], paginable: ["paginable", "paginable", booleanAttribute], euiTableResponsive: ["euiTableResponsive", "euiTableResponsive", booleanAttribute], euiTableFixedLayout: ["euiTableFixedLayout", "euiTableFixedLayout", booleanAttribute], euiTableDraggable: ["euiTableDraggable", "euiTableDraggable", booleanAttribute], euiTableCards: ["euiTableCards", "euiTableCards", booleanAttribute], euiTableBordered: ["euiTableBordered", "euiTableBordered", booleanAttribute], euiTableCompact: ["euiTableCompact", "euiTableCompact", booleanAttribute], hasStickyHeader: ["hasStickyHeader", "hasStickyHeader", booleanAttribute], hasStickyColumns: ["hasStickyColumns", "hasStickyColumns", booleanAttribute], isSelectOnlyVisibleRows: ["isSelectOnlyVisibleRows", "isSelectOnlyVisibleRows", booleanAttribute], isColsOrderable: ["isColsOrderable", "isColsOrderable", booleanAttribute], isHoverable: ["isHoverable", "isHoverable", booleanAttribute] }, outputs: { selectedRows: "selectedRows", sortChange: "sortChange", multiSortChange: "multiSortChange" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiTableSortService, EuiTableSelectableRowService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective }], ngImport: i0, template: "@if (headerTemplate) {\n    <thead #theadRef>\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n    </thead>\n}\n@if (bodyTemplate) {\n    <tbody #tbodyRef>\n        @for (row of rowsRendered; let i = $index; track row) {\n            <ng-template\n                [ngTemplateOutlet]=\"bodyTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\">\n            </ng-template>\n        }\n\n        @if (emptyMessageTemplate && rowsRendered.length === 0) {\n            <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n        }\n    </tbody>\n}\n@if (footerTemplate) {\n    <tfoot #tfootRef>\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n    </tfoot>\n}\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-c-neutral-lightest);border-color:transparent;padding:calc(var(--eui-s-m) - 2px) var(--eui-s-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-c-white);--eui-table-text-color: var(--eui-c-text);--eui-table-selected-row-background-color: var(--eui-c-primary-bg);--eui-table-highlighted-background-color: var(--eui-c-accent);--eui-table-hover-background-color: var(--eui-c-primary-bg);--eui-table-bordered-color: var(--eui-c-neutral-lightest);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-sh-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-s-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-s-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-s-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-c-info-lightest)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-s-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:var(--eui-br-max);border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-c-neutral-bg-light);position:relative;font:var(--eui-f-m)}.eui-table thead tr th{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-m) var(--eui-s-s);text-align:left;font:var(--eui-f-m-bold)}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-s-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-s-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-s-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-c-neutral-lightest);height:calc(3 * var(--eui-s-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-c-bg)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-c-bg)}.eui-table tbody tr td{padding:var(--eui-s-xs) var(--eui-s-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-c-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-c-neutral-bg-light)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-c-neutral-bg-light)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-c-neutral-lightest);border-top:1px solid var(--eui-c-neutral-lightest)}.eui-table tfoot tr td{padding:var(--eui-s-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-s-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:calc(var(--eui-s-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-c-accent-bg-light)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.6", type: EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", e2eAttr: "e2eAttr", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", loading: ["loading", "loading", booleanAttribute], asyncTable: ["asyncTable", "asyncTable", booleanAttribute], paginable: ["paginable", "paginable", booleanAttribute], euiTableResponsive: ["euiTableResponsive", "euiTableResponsive", booleanAttribute], euiTableFixedLayout: ["euiTableFixedLayout", "euiTableFixedLayout", booleanAttribute], euiTableDraggable: ["euiTableDraggable", "euiTableDraggable", booleanAttribute], euiTableCards: ["euiTableCards", "euiTableCards", booleanAttribute], euiTableBordered: ["euiTableBordered", "euiTableBordered", booleanAttribute], euiTableCompact: ["euiTableCompact", "euiTableCompact", booleanAttribute], hasStickyHeader: ["hasStickyHeader", "hasStickyHeader", booleanAttribute], hasStickyColumns: ["hasStickyColumns", "hasStickyColumns", booleanAttribute], isSelectOnlyVisibleRows: ["isSelectOnlyVisibleRows", "isSelectOnlyVisibleRows", booleanAttribute], isColsOrderable: ["isColsOrderable", "isColsOrderable", booleanAttribute], isHoverable: ["isHoverable", "isHoverable", booleanAttribute] }, outputs: { selectedRows: "selectedRows", sortChange: "sortChange", multiSortChange: "multiSortChange" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiTableSortService, EuiTableSelectableRowService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective }], ngImport: i0, template: "@if (headerTemplate) {\n    <thead #theadRef>\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n    </thead>\n}\n@if (bodyTemplate) {\n    <tbody #tbodyRef>\n        @for (row of rowsRendered; let i = $index; track row) {\n            <ng-template\n                [ngTemplateOutlet]=\"bodyTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\">\n            </ng-template>\n        }\n\n        @if (emptyMessageTemplate && rowsRendered.length === 0) {\n            <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n        }\n    </tbody>\n}\n@if (footerTemplate) {\n    <tfoot #tfootRef>\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n    </tfoot>\n}\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-c-neutral-lightest);border-color:transparent;padding:calc(var(--eui-s-m) - 2px) var(--eui-s-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-c-white);--eui-table-text-color: var(--eui-c-text);--eui-table-selected-row-background-color: var(--eui-c-primary-bg);--eui-table-highlighted-background-color: var(--eui-c-accent);--eui-table-hover-background-color: var(--eui-c-primary-bg);--eui-table-bordered-color: var(--eui-c-neutral-lightest);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-sh-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-s-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-s-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-s-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-c-info-lightest)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-s-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:var(--eui-br-max);border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-o-50)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-c-neutral-bg-light);position:relative;font:var(--eui-f-m)}.eui-table thead tr th{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-m) var(--eui-s-s);text-align:left;font:var(--eui-f-m-bold)}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-s-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-s-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-s-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-c-neutral-lightest);height:calc(3 * var(--eui-s-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-c-bg)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-c-bg)}.eui-table tbody tr td{padding:var(--eui-s-xs) var(--eui-s-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-c-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-c-neutral-bg-light)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-c-neutral-bg-light)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-c-neutral-lightest);border-top:1px solid var(--eui-c-neutral-lightest)}.eui-table tfoot tr td{padding:var(--eui-s-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-s-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:calc(var(--eui-s-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-c-accent-bg-light)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiTableComponent, decorators: [{
             type: Component,
@@ -506,7 +506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
                             directive: BaseStatesDirective,
                             inputs: [],
                         },
-                    ], template: "@if (headerTemplate) {\n    <thead #theadRef>\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n    </thead>\n}\n@if (bodyTemplate) {\n    <tbody #tbodyRef>\n        @for (row of rowsRendered; let i = $index; track row) {\n            <ng-template\n                [ngTemplateOutlet]=\"bodyTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\">\n            </ng-template>\n        }\n\n        @if (emptyMessageTemplate && rowsRendered.length === 0) {\n            <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n        }\n    </tbody>\n}\n@if (footerTemplate) {\n    <tfoot #tfootRef>\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n    </tfoot>\n}\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-c-neutral-lightest);border-color:transparent;padding:calc(var(--eui-s-m) - 2px) var(--eui-s-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-c-white);--eui-table-text-color: var(--eui-c-text);--eui-table-selected-row-background-color: var(--eui-c-primary-bg);--eui-table-highlighted-background-color: var(--eui-c-accent);--eui-table-hover-background-color: var(--eui-c-primary-bg);--eui-table-bordered-color: var(--eui-c-neutral-lightest);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-sh-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-s-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-s-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-s-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-c-info-lightest)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-s-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:var(--eui-br-max);border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-c-neutral-bg-light);position:relative;font:var(--eui-f-m)}.eui-table thead tr th{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-m) var(--eui-s-s);text-align:left;font:var(--eui-f-m-bold)}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-s-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-s-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-s-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-c-neutral-lightest);height:calc(3 * var(--eui-s-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-c-bg)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-c-bg)}.eui-table tbody tr td{padding:var(--eui-s-xs) var(--eui-s-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-c-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-c-neutral-bg-light)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-c-neutral-bg-light)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-c-neutral-lightest);border-top:1px solid var(--eui-c-neutral-lightest)}.eui-table tfoot tr td{padding:var(--eui-s-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-s-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:calc(var(--eui-s-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-c-accent-bg-light)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"] }]
+                    ], template: "@if (headerTemplate) {\n    <thead #theadRef>\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n    </thead>\n}\n@if (bodyTemplate) {\n    <tbody #tbodyRef>\n        @for (row of rowsRendered; let i = $index; track row) {\n            <ng-template\n                [ngTemplateOutlet]=\"bodyTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\">\n            </ng-template>\n        }\n\n        @if (emptyMessageTemplate && rowsRendered.length === 0) {\n            <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n        }\n    </tbody>\n}\n@if (footerTemplate) {\n    <tfoot #tfootRef>\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n    </tfoot>\n}\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table__orderable-cols-preview{background-color:var(--eui-c-neutral-lightest);border-color:transparent;padding:calc(var(--eui-s-m) - 2px) var(--eui-s-s);cursor:move;opacity:.7}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-c-white);--eui-table-text-color: var(--eui-c-text);--eui-table-selected-row-background-color: var(--eui-c-primary-bg);--eui-table-highlighted-background-color: var(--eui-c-accent);--eui-table-hover-background-color: var(--eui-c-primary-bg);--eui-table-bordered-color: var(--eui-c-neutral-lightest);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-sh-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-s-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-s-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-f-size-base) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-s-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table--hoverable tbody tr:hover,.eui-table--hoverable tbody tr:hover td{background-color:var(--eui-table-hover-background-color)!important}.eui-table--hoverable tbody tr:hover td:hover{background-color:var(--eui-c-info-lightest)!important}.eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-table--cols-orderable tr{display:table-row}.eui-table--cols-orderable tr th{cursor:move}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-s-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:var(--eui-br-max);border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-o-50)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-c-neutral-bg-light);position:relative;font:var(--eui-f-m)}.eui-table thead tr th{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-m) var(--eui-s-s);text-align:left;font:var(--eui-f-m-bold)}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-s-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:inline-flex;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-s-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-s-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-c-neutral-lightest);height:calc(3 * var(--eui-s-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-c-bg)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-c-bg)}.eui-table tbody tr td{padding:var(--eui-s-xs) var(--eui-s-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-c-neutral-light);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-c-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-c-neutral-bg-light)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-c-neutral-bg-light)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-c-neutral-lightest);border-top:1px solid var(--eui-c-neutral-lightest)}.eui-table tfoot tr td{padding:var(--eui-s-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-neutral-bg-light)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%!important}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-table:not(.eui-table-cards) .actionsColumn,.eui-table:not(.eui-table-cards) .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-table__sticky-container{height:auto!important;width:auto!important}.eui-table--sticky-columns th,.eui-table--sticky-columns td,.eui-table--sticky-columns th .eui-table__col--sticky,.eui-table--sticky-columns td .eui-table__col--sticky{width:auto;z-index:auto}.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-table--sticky-columns td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-table--sticky-columns tfoot tr td:empty{display:none!important}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-s-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:calc(var(--eui-s-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-c-accent-bg-light)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-s-s) var(--eui-s-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiTableSortService }, { type: i0.ChangeDetectorRef }, { type: i2.EuiTableSelectableRowService }, { type: i0.ElementRef }, { type: i3.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']

package/esm2022/eui-timepicker/eui-timepicker.component.mjs CHANGED Viewed

@@ -354,11 +354,11 @@ export class EuiTimepickerComponent {
         this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: EuiTimepickerComponent, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n                <eui-icon-svg\n                    (click)=\"changeHours(stepHours)\"\n                    [class.time-control--disabled]=\"hoursUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-stepHours)\"\n                    [class.time-control--disabled]=\"hoursDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsUpDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\">\n                    </eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                    (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsDownDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\">\n                    </eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: EuiTimepickerComponent, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n                <eui-icon-svg\n                    (click)=\"changeHours(stepHours)\"\n                    [class.time-control--disabled]=\"hoursUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-stepHours)\"\n                    [class.time-control--disabled]=\"hoursDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsUpDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\">\n                    </eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                    (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsDownDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\">\n                    </eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n                <eui-icon-svg\n                    (click)=\"changeHours(stepHours)\"\n                    [class.time-control--disabled]=\"hoursUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-stepHours)\"\n                    [class.time-control--disabled]=\"hoursDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsUpDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\">\n                    </eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                    (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsDownDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\">\n                    </eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+            args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n                <eui-icon-svg\n                    (click)=\"changeHours(stepHours)\"\n                    [class.time-control--disabled]=\"hoursUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-stepHours)\"\n                    [class.time-control--disabled]=\"hoursDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesUpDisabled\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\">\n                </eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-stepMinutes)\"\n                    [class.time-control--disabled]=\"minutesDownDisabled\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"neutral-light\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\">\n                </eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsUpDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\">\n                    </eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                    (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-stepSeconds)\"\n                        [class.time-control--disabled]=\"secondsDownDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"neutral-light\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\">\n                    </eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {

package/esm2022/eui-user-profile/user-profile.component.mjs CHANGED Viewed

@@ -75,7 +75,7 @@ export class EuiUserProfileComponent {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiUserProfileComponent, deps: [{ token: i0.ElementRef }, { token: i1.UserService }, { token: i2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], isHeaderUserProfile: ["isHeaderUserProfile", "isHeaderUserProfile", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], isHeaderUserProfile: ["isHeaderUserProfile", "isHeaderUserProfile", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
             type: Component,
@@ -87,7 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
                                 'euiInverted',
                             ],
                         },
-                    ], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"] }]
+                    ], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.UserService }, { type: i2.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']