@eui/components 17.0.0-next.15 → 17.0.0-next.17

package/esm2022/eui-list/eui-list.component.mjs

@@ -90,11 +90,11 @@ export class EuiListComponent extends BaseDirective {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiListComponent, deps: [{ token: i1.EuiListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiListComponent, selector: "[euiList], eui-list", inputs: { isCollapsible: "isCollapsible" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiListItemComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-list{display:block;height:auto;position:relative;margin:0;padding:0}.eui-list:focus:active:not([readonly]),.eui-list:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list:focus [tabindex=\"0\"]:active:not([readonly]),.eui-list:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item{background:none;border:none;box-shadow:none;cursor:pointer;display:block;max-width:100%;outline:none;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:relative;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-list .eui-list-item:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-list .eui-list-item--active{background-color:var(--eui-base-color-primary-10)}.eui-list .eui-list-item--active:active:not([readonly]),.eui-list .eui-list-item--active:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item--active [tabindex=\"0\"]:active:not([readonly]),.eui-list .eui-list-item--active [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item .eui-list-item__container{display:inline-flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content{align-items:center;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon .eui-icon{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg .eui-icon-svg{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text .eui-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right{align-items:center;display:flex;margin-left:auto}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right .eui-list-item__content-toggle{align-items:center;display:inline-flex;font-size:var(--eui-base-font-size-m);margin-left:var(--eui-base-spacing-s);transition:all .3s linear}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu{display:block;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__content{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list{margin-left:var(--eui-base-spacing-m)}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list .eui-list-item{padding-right:0}.eui-list .eui-list-item .eui-list-item__container .eui-icon{margin-right:var(--eui-base-spacing-s)}.eui-list .eui-list-item .eui-list-item__container .eui-button{margin-left:var(--eui-base-spacing-s)}.eui-list button.eui-list-item{padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs)}navigation-list nav{height:auto}.eui-list-item--primary{color:var(--eui-base-color-primary-100)}.eui-list-item--secondary{color:var(--eui-base-color-grey-90)}.eui-list-item--info{color:var(--eui-base-color-info-100)}.eui-list-item--success{color:var(--eui-base-color-success-100)}.eui-list-item--warning{color:var(--eui-base-color-warning-140)}.eui-list-item--danger{color:var(--eui-base-color-danger-100)}.eui-list-item__content-toggle--expanded{transform:rotate(-180deg)}.eui-list-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiListComponent, selector: "[euiList], eui-list", inputs: { isCollapsible: "isCollapsible" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiListItemComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-list{display:block;height:auto;position:relative;margin:0;padding:0}.eui-list:focus:active:not([readonly]),.eui-list:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list:focus [tabindex=\"0\"]:active:not([readonly]),.eui-list:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item{background:none;border:none;box-shadow:none;cursor:pointer;display:block;max-width:100%;outline:none;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:relative;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-list .eui-list-item:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-list .eui-list-item--active{background-color:var(--eui-base-color-primary-10)}.eui-list .eui-list-item--active:active:not([readonly]),.eui-list .eui-list-item--active:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item--active [tabindex=\"0\"]:active:not([readonly]),.eui-list .eui-list-item--active [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item .eui-list-item__container{display:inline-flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content{align-items:center;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon .eui-icon{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg .eui-icon-svg{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text .eui-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right{align-items:center;display:flex;margin-left:auto}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right .eui-list-item__content-toggle{align-items:center;display:inline-flex;font-size:var(--eui-base-font-size-m);margin-left:var(--eui-base-spacing-s);transition:all .3s linear}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu{display:block;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__content{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list{margin-left:var(--eui-base-spacing-m)}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list .eui-list-item{padding-right:0}.eui-list .eui-list-item .eui-list-item__container .eui-icon{margin-right:var(--eui-base-spacing-s)}.eui-list .eui-list-item .eui-list-item__container .eui-button{margin-left:var(--eui-base-spacing-s)}.eui-list button.eui-list-item{padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs)}navigation-list nav{height:auto}.eui-list-item__content-toggle--expanded{transform:rotate(-180deg)}.eui-list-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}.eui-list-item--primary{color:var(--eui-base-color-primary-100)}.eui-list-item--secondary{color:var(--eui-base-color-grey-75)}.eui-list-item--info{color:var(--eui-base-color-info-100)}.eui-list-item--success{color:var(--eui-base-color-success-100)}.eui-list-item--warning{color:var(--eui-base-color-warning-130)}.eui-list-item--danger{color:var(--eui-base-color-danger-100)}.eui-list-item--accent{color:var(--eui-base-color-accent-150)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiListComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[euiList], eui-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".eui-list{display:block;height:auto;position:relative;margin:0;padding:0}.eui-list:focus:active:not([readonly]),.eui-list:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list:focus [tabindex=\"0\"]:active:not([readonly]),.eui-list:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item{background:none;border:none;box-shadow:none;cursor:pointer;display:block;max-width:100%;outline:none;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:relative;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-list .eui-list-item:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-list .eui-list-item--active{background-color:var(--eui-base-color-primary-10)}.eui-list .eui-list-item--active:active:not([readonly]),.eui-list .eui-list-item--active:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item--active [tabindex=\"0\"]:active:not([readonly]),.eui-list .eui-list-item--active [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item .eui-list-item__container{display:inline-flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content{align-items:center;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon .eui-icon{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg .eui-icon-svg{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text .eui-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right{align-items:center;display:flex;margin-left:auto}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right .eui-list-item__content-toggle{align-items:center;display:inline-flex;font-size:var(--eui-base-font-size-m);margin-left:var(--eui-base-spacing-s);transition:all .3s linear}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu{display:block;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__content{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list{margin-left:var(--eui-base-spacing-m)}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list .eui-list-item{padding-right:0}.eui-list .eui-list-item .eui-list-item__container .eui-icon{margin-right:var(--eui-base-spacing-s)}.eui-list .eui-list-item .eui-list-item__container .eui-button{margin-left:var(--eui-base-spacing-s)}.eui-list button.eui-list-item{padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs)}navigation-list nav{height:auto}.eui-list-item--primary{color:var(--eui-base-color-primary-100)}.eui-list-item--secondary{color:var(--eui-base-color-grey-90)}.eui-list-item--info{color:var(--eui-base-color-info-100)}.eui-list-item--success{color:var(--eui-base-color-success-100)}.eui-list-item--warning{color:var(--eui-base-color-warning-140)}.eui-list-item--danger{color:var(--eui-base-color-danger-100)}.eui-list-item__content-toggle--expanded{transform:rotate(-180deg)}.eui-list-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}\n"] }]
+            args: [{ selector: '[euiList], eui-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".eui-list{display:block;height:auto;position:relative;margin:0;padding:0}.eui-list:focus:active:not([readonly]),.eui-list:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list:focus [tabindex=\"0\"]:active:not([readonly]),.eui-list:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item{background:none;border:none;box-shadow:none;cursor:pointer;display:block;max-width:100%;outline:none;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:relative;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-list .eui-list-item:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-list .eui-list-item--active{background-color:var(--eui-base-color-primary-10)}.eui-list .eui-list-item--active:active:not([readonly]),.eui-list .eui-list-item--active:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item--active [tabindex=\"0\"]:active:not([readonly]),.eui-list .eui-list-item--active [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-list .eui-list-item .eui-list-item__container{display:inline-flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content{align-items:center;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon .eui-icon{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg{align-items:center;display:flex}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-icon-svg .eui-icon-svg{margin-right:var(--eui-base-spacing-xs)}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-left .eui-list-item__content-text .eui-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right{align-items:center;display:flex;margin-left:auto}.eui-list .eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-right .eui-list-item__content-toggle{align-items:center;display:inline-flex;font-size:var(--eui-base-font-size-m);margin-left:var(--eui-base-spacing-s);transition:all .3s linear}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu{display:block;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__content{align-items:center;display:flex;width:100%}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list{margin-left:var(--eui-base-spacing-m)}.eui-list .eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list .eui-list-item{padding-right:0}.eui-list .eui-list-item .eui-list-item__container .eui-icon{margin-right:var(--eui-base-spacing-s)}.eui-list .eui-list-item .eui-list-item__container .eui-button{margin-left:var(--eui-base-spacing-s)}.eui-list button.eui-list-item{padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs)}navigation-list nav{height:auto}.eui-list-item__content-toggle--expanded{transform:rotate(-180deg)}.eui-list-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}.eui-list-item--primary{color:var(--eui-base-color-primary-100)}.eui-list-item--secondary{color:var(--eui-base-color-grey-75)}.eui-list-item--info{color:var(--eui-base-color-info-100)}.eui-list-item--success{color:var(--eui-base-color-success-100)}.eui-list-item--warning{color:var(--eui-base-color-warning-130)}.eui-list-item--danger{color:var(--eui-base-color-danger-100)}.eui-list-item--accent{color:var(--eui-base-color-accent-150)}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiListService }], propDecorators: { isCollapsible: [{
                 type: Input
             }], cssClasses: [{

package/esm2022/eui-tabs/eui-tab/eui-tab.component.mjs

@@ -74,11 +74,11 @@ export class EuiTabComponent extends BaseDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTabComponent, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: "isClosable", isVisible: "isVisible", isActive: "isActive", isDisabled: "isDisabled", hasBackgroundFilled: "hasBackgroundFilled", isHandleCloseOnClose: "isHandleCloseOnClose" }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTabComponent, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: "isClosable", isVisible: "isVisible", isActive: "isActive", isDisabled: "isDisabled", hasBackgroundFilled: "hasBackgroundFilled", isHandleCloseOnClose: "isHandleCloseOnClose" }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tab', template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
+            args: [{ selector: 'eui-tab', template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { url: [{
                 type: Input
             }], e2eAttr: [{

package/esm2022/eui-tabs/eui-tabs.component.mjs

@@ -323,11 +323,11 @@ export class EuiTabsComponent {
         this.cd.detectChanges();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isHandleChangeTab: "isHandleChangeTab", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "host", first: true, predicate: ["host"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    #host\n    class=\"eui-tabs {{ styleClass }}\"\n    [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n    [class.eui-tabs--vertical]=\"isVerticalTabs\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n        <div\n            #euiTabsItems\n            class=\"eui-tabs__items\"\n            [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n            [class.eui-tabs__items--scrolling]=\"scrolling\"\n            (cdkObserveContent)=\"onContentChanges()\">\n            <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n                <ng-container *ngFor=\"let tab of tabs; let i = index\">\n                    <ng-container *ngIf=\"tab.isVisible\">\n                        <div\n                            tabindex=\"0\"\n                            role=\"tab\"\n                            class=\"eui-tab-item\"\n                            [class.eui-tab-item--closable]=\"tab.isClosable\"\n                            [class.eui-tab-item--active]=\"activeTabIndex === i\"\n                            [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n                            [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n                            [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n                            [class.eui-tab-item--info]=\"tab.euiInfo\"\n                            [class.eui-tab-item--success]=\"tab.euiSuccess\"\n                            [class.eui-tab-item--warning]=\"tab.euiWarning\"\n                            [class.eui-tab-item--danger]=\"tab.euiDanger\"\n                            [class.eui-tab-item--accent]=\"tab.euiAccent\"\n                            [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n                            [attr.aria-disabled]=\"tab.isDisabled\"\n                            (click)=\"changeTab(i)\"\n                            [euiTooltip]=\"tab.tooltip\"\n                            (keyup)=\"onKeyUp($event, i)\">\n                            <div class=\"eui-tab-item__label\">\n                                <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n                            </div>\n                            <button\n                                *ngIf=\"tab.isClosable\"\n                                (click)=\"closeTab(i, $event)\"\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                euiRounded\n                                euiSizeXS\n                                type=\"button\"\n                                [euiDisabled]=\"navigationRightButtonDisabled\"\n                                aria-label=\"Close tab button\"\n                                class=\"eui-u-ml-s\">\n                                <eui-icon-svg\n                                    icon=\"eui-ecl-close\"\n                                    size=\"l\"\n                                    fillColor=\"grey-75\"\n                                    class=\"eui-tab__close-icon\"\n                                    aria-label=\"Close icon\">\n                                </eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"eui-tabs__navigation\">\n                <div class=\"eui-tabs__navigation__left-item\">\n                    <button\n                        (click)=\"goToLeft()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationLeftButtonDisabled\"\n                        aria-label=\"Scroll left\">\n                        <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n                    </button>\n                </div>\n                <div class=\"eui-tabs__navigation__right-item\">\n                    <button\n                        (click)=\"goToRight()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationRightButtonDisabled\"\n                        aria-label=\"Scroll right\">\n                        <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"eui-tabs__right-content\">\n            <ng-content select=\"euiTabsRightContent\"></ng-content>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let tab of tabs; let i = index\">\n        <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n        </div>\n    </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isHandleChangeTab: "isHandleChangeTab", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "host", first: true, predicate: ["host"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    #host\n    class=\"eui-tabs {{ styleClass }}\"\n    [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n    [class.eui-tabs--vertical]=\"isVerticalTabs\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n        <div\n            #euiTabsItems\n            class=\"eui-tabs__items\"\n            [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n            [class.eui-tabs__items--scrolling]=\"scrolling\"\n            (cdkObserveContent)=\"onContentChanges()\">\n            <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n                <ng-container *ngFor=\"let tab of tabs; let i = index\">\n                    <ng-container *ngIf=\"tab.isVisible\">\n                        <div\n                            tabindex=\"0\"\n                            role=\"tab\"\n                            class=\"eui-tab-item\"\n                            [class.eui-tab-item--closable]=\"tab.isClosable\"\n                            [class.eui-tab-item--active]=\"activeTabIndex === i\"\n                            [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n                            [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n                            [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n                            [class.eui-tab-item--info]=\"tab.euiInfo\"\n                            [class.eui-tab-item--success]=\"tab.euiSuccess\"\n                            [class.eui-tab-item--warning]=\"tab.euiWarning\"\n                            [class.eui-tab-item--danger]=\"tab.euiDanger\"\n                            [class.eui-tab-item--accent]=\"tab.euiAccent\"\n                            [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n                            [attr.aria-disabled]=\"tab.isDisabled\"\n                            (click)=\"changeTab(i)\"\n                            [euiTooltip]=\"tab.tooltip\"\n                            (keyup)=\"onKeyUp($event, i)\">\n                            <div class=\"eui-tab-item__label\">\n                                <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n                            </div>\n                            <button\n                                *ngIf=\"tab.isClosable\"\n                                (click)=\"closeTab(i, $event)\"\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                euiRounded\n                                euiSizeXS\n                                type=\"button\"\n                                [euiDisabled]=\"navigationRightButtonDisabled\"\n                                aria-label=\"Close tab button\"\n                                class=\"eui-u-ml-s\">\n                                <eui-icon-svg\n                                    icon=\"eui-ecl-close\"\n                                    size=\"l\"\n                                    fillColor=\"grey-75\"\n                                    class=\"eui-tab__close-icon\"\n                                    aria-label=\"Close icon\">\n                                </eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"eui-tabs__navigation\">\n                <div class=\"eui-tabs__navigation__left-item\">\n                    <button\n                        (click)=\"goToLeft()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationLeftButtonDisabled\"\n                        aria-label=\"Scroll left\">\n                        <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n                    </button>\n                </div>\n                <div class=\"eui-tabs__navigation__right-item\">\n                    <button\n                        (click)=\"goToRight()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationRightButtonDisabled\"\n                        aria-label=\"Scroll right\">\n                        <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"eui-tabs__right-content\">\n            <ng-content select=\"euiTabsRightContent\"></ng-content>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let tab of tabs; let i = index\">\n        <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n        </div>\n    </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n    #host\n    class=\"eui-tabs {{ styleClass }}\"\n    [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n    [class.eui-tabs--vertical]=\"isVerticalTabs\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n        <div\n            #euiTabsItems\n            class=\"eui-tabs__items\"\n            [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n            [class.eui-tabs__items--scrolling]=\"scrolling\"\n            (cdkObserveContent)=\"onContentChanges()\">\n            <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n                <ng-container *ngFor=\"let tab of tabs; let i = index\">\n                    <ng-container *ngIf=\"tab.isVisible\">\n                        <div\n                            tabindex=\"0\"\n                            role=\"tab\"\n                            class=\"eui-tab-item\"\n                            [class.eui-tab-item--closable]=\"tab.isClosable\"\n                            [class.eui-tab-item--active]=\"activeTabIndex === i\"\n                            [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n                            [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n                            [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n                            [class.eui-tab-item--info]=\"tab.euiInfo\"\n                            [class.eui-tab-item--success]=\"tab.euiSuccess\"\n                            [class.eui-tab-item--warning]=\"tab.euiWarning\"\n                            [class.eui-tab-item--danger]=\"tab.euiDanger\"\n                            [class.eui-tab-item--accent]=\"tab.euiAccent\"\n                            [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n                            [attr.aria-disabled]=\"tab.isDisabled\"\n                            (click)=\"changeTab(i)\"\n                            [euiTooltip]=\"tab.tooltip\"\n                            (keyup)=\"onKeyUp($event, i)\">\n                            <div class=\"eui-tab-item__label\">\n                                <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n                            </div>\n                            <button\n                                *ngIf=\"tab.isClosable\"\n                                (click)=\"closeTab(i, $event)\"\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                euiRounded\n                                euiSizeXS\n                                type=\"button\"\n                                [euiDisabled]=\"navigationRightButtonDisabled\"\n                                aria-label=\"Close tab button\"\n                                class=\"eui-u-ml-s\">\n                                <eui-icon-svg\n                                    icon=\"eui-ecl-close\"\n                                    size=\"l\"\n                                    fillColor=\"grey-75\"\n                                    class=\"eui-tab__close-icon\"\n                                    aria-label=\"Close icon\">\n                                </eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"eui-tabs__navigation\">\n                <div class=\"eui-tabs__navigation__left-item\">\n                    <button\n                        (click)=\"goToLeft()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationLeftButtonDisabled\"\n                        aria-label=\"Scroll left\">\n                        <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n                    </button>\n                </div>\n                <div class=\"eui-tabs__navigation__right-item\">\n                    <button\n                        (click)=\"goToRight()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationRightButtonDisabled\"\n                        aria-label=\"Scroll right\">\n                        <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"eui-tabs__right-content\">\n            <ng-content select=\"euiTabsRightContent\"></ng-content>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let tab of tabs; let i = index\">\n        <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n        </div>\n    </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
+            args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n    #host\n    class=\"eui-tabs {{ styleClass }}\"\n    [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n    [class.eui-tabs--vertical]=\"isVerticalTabs\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n        <div\n            #euiTabsItems\n            class=\"eui-tabs__items\"\n            [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n            [class.eui-tabs__items--scrolling]=\"scrolling\"\n            (cdkObserveContent)=\"onContentChanges()\">\n            <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n                <ng-container *ngFor=\"let tab of tabs; let i = index\">\n                    <ng-container *ngIf=\"tab.isVisible\">\n                        <div\n                            tabindex=\"0\"\n                            role=\"tab\"\n                            class=\"eui-tab-item\"\n                            [class.eui-tab-item--closable]=\"tab.isClosable\"\n                            [class.eui-tab-item--active]=\"activeTabIndex === i\"\n                            [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n                            [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n                            [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n                            [class.eui-tab-item--info]=\"tab.euiInfo\"\n                            [class.eui-tab-item--success]=\"tab.euiSuccess\"\n                            [class.eui-tab-item--warning]=\"tab.euiWarning\"\n                            [class.eui-tab-item--danger]=\"tab.euiDanger\"\n                            [class.eui-tab-item--accent]=\"tab.euiAccent\"\n                            [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n                            [attr.aria-disabled]=\"tab.isDisabled\"\n                            (click)=\"changeTab(i)\"\n                            [euiTooltip]=\"tab.tooltip\"\n                            (keyup)=\"onKeyUp($event, i)\">\n                            <div class=\"eui-tab-item__label\">\n                                <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n                            </div>\n                            <button\n                                *ngIf=\"tab.isClosable\"\n                                (click)=\"closeTab(i, $event)\"\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                euiRounded\n                                euiSizeXS\n                                type=\"button\"\n                                [euiDisabled]=\"navigationRightButtonDisabled\"\n                                aria-label=\"Close tab button\"\n                                class=\"eui-u-ml-s\">\n                                <eui-icon-svg\n                                    icon=\"eui-ecl-close\"\n                                    size=\"l\"\n                                    fillColor=\"grey-75\"\n                                    class=\"eui-tab__close-icon\"\n                                    aria-label=\"Close icon\">\n                                </eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"eui-tabs__navigation\">\n                <div class=\"eui-tabs__navigation__left-item\">\n                    <button\n                        (click)=\"goToLeft()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationLeftButtonDisabled\"\n                        aria-label=\"Scroll left\">\n                        <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n                    </button>\n                </div>\n                <div class=\"eui-tabs__navigation__right-item\">\n                    <button\n                        (click)=\"goToRight()\"\n                        euiButton\n                        euiIconButton\n                        euiBasicButton\n                        type=\"button\"\n                        [euiDisabled]=\"navigationRightButtonDisabled\"\n                        aria-label=\"Scroll right\">\n                        <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"eui-tabs__right-content\">\n            <ng-content select=\"euiTabsRightContent\"></ng-content>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let tab of tabs; let i = index\">\n        <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n        </div>\n    </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-10)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.AnimationBuilder }], propDecorators: { styleClass: [{
                 type: Input
             }], tabs: [{

package/esm2022/eui-timebar/eui-timebar.component.mjs

@@ -279,11 +279,11 @@ export class EuiTimebarComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: "isShowLegend", isShowLegendAsIndex: "isShowLegendAsIndex", isShowCurrentDateMarker: "isShowCurrentDateMarker", isCurrentDateMarkerAlwaysInRange: "isCurrentDateMarkerAlwaysInRange", isGroupOverlappingLabels: "isGroupOverlappingLabels" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row flex-container\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row flex-container\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: "isShowLegend", isShowLegendAsIndex: "isShowLegendAsIndex", isShowCurrentDateMarker: "isShowCurrentDateMarker", isCurrentDateMarkerAlwaysInRange: "isCurrentDateMarkerAlwaysInRange", isGroupOverlappingLabels: "isGroupOverlappingLabels" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row flex-container\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row flex-container\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110);color:var(--eui-base-color-info-110-contrast)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110-contrast)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-110-contrast)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110);color:var(--eui-base-color-danger-110-contrast)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-100-contrast)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row flex-container\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row flex-container\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"] }]
+            args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row flex-container\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row flex-container\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110);color:var(--eui-base-color-info-110-contrast)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110-contrast)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-110-contrast)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110);color:var(--eui-base-color-danger-110-contrast)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-100-contrast)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']