npm - @eui/components - Versions diffs - 17.0.0-next.15 → 17.0.0-next.16 - Mend

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

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

Files changed (213) hide show

package/fesm2022/eui-components-eui-tree-list.mjs CHANGED Viewed

@@ -1,20 +1,44 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, ViewEncapsulation, Host, Inject, Input, Output, ViewChild, ContentChild, ContentChildren, Directive, NgModule } from '@angular/core';
+import { Component, HostBinding, EventEmitter, forwardRef, ViewEncapsulation, Host, Inject, Input, Output, ViewChild, ContentChild, ContentChildren, Directive, NgModule } from '@angular/core';
 import { uniqueId, consumeEvent } from '@eui/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i2 from '@eui/components/shared';
+import { BaseStatesDirective } from '@eui/components/shared';
 import * as i1 from '@angular/router';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@eui/components/eui-icon';
+import * as i4 from '@eui/components/eui-icon';
 import { EuiIconModule } from '@eui/components/eui-icon';
-import * as i4 from '@eui/components/eui-label';
+import * as i5 from '@eui/components/eui-label';
 import { EuiLabelModule } from '@eui/components/eui-label';
-import * as i5 from '@eui/components/eui-button';
+import * as i6 from '@eui/components/eui-button';
 import { EuiButtonModule } from '@eui/components/eui-button';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i6$1 from '@eui/components/eui-input-text';
+import { EuiInputTextModule } from '@eui/components/eui-input-text';
+import * as i7 from '@eui/components/eui-input-group';
+import { EuiInputGroupModule } from '@eui/components/eui-input-group';
+class EuiTreeListItemContentComponent {
+    constructor() {
+        this.string = 'eui-tree-list-item-content';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemContentComponent, selector: "eui-tree-list-item-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-tree-list-item-content', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
-/* eslint-disable */
 class EuiTreeListItemComponent {
+    get cssClasses() {
+        return this.getCssClasses();
+    }
     get active() {
         return this._active;
     }
@@ -51,11 +75,13 @@ class EuiTreeListItemComponent {
     set isVisible(value) {
         this._isVisible = coerceBooleanProperty(value);
     }
-    constructor(treeListComponent, router, elementRef) {
+    constructor(treeListComponent, router, elementRef, baseStatesDirective) {
         this.router = router;
         this.elementRef = elementRef;
-        this.subLinks = [];
+        this.baseStatesDirective = baseStatesDirective;
+        this.tabIndex = '0';
         this.e2eAttr = 'eui-tree-list-item';
+        this.subLinks = [];
         this.toggled = new EventEmitter();
         this.isHovered = false;
         // tree states
@@ -66,9 +92,7 @@ class EuiTreeListItemComponent {
         this._expanded = false;
         this._alwaysExpanded = false;
         this._isDisplaySubLinksOnHover = false;
-        // private _hasMarker = false;
         this._isNavigateOnlyOnLabelClick = false;
-        // private _isIconRounded = false;
         this._isVisible = true;
         this.treeListComponent = treeListComponent;
     }
@@ -85,9 +109,6 @@ class EuiTreeListItemComponent {
         if (this.customContent.length !== 0) {
             this.hasCustomContent = true;
         }
-        // if (this.markerTypeClass && !this.hasMarker) {
-        //     this.hasMarker = true;
-        // }
         // make sure that any child tree-list is non-focusable and that it has the role of a WAI-ARIA group:
         if (this.subTreeList) {
             this.subTreeList.forEach((subtree) => {
@@ -102,16 +123,6 @@ class EuiTreeListItemComponent {
         this.expanded = !this.expanded;
         this.toggled.next(this);
     }
-    navigateToLink(event) {
-        if (this.linkUrl && !this.isNavigateOnlyOnLabelClick) {
-            this.router.navigate([this.linkUrl]);
-        }
-    }
-    onLabelClicked(event) {
-        if (this.linkUrl && this.isNavigateOnlyOnLabelClick) {
-            this.router.navigate([this.linkUrl]);
-        }
-    }
     onKeyDown(event) {
         switch (event.keyCode) {
             case 13: // ENTER
@@ -179,12 +190,6 @@ class EuiTreeListItemComponent {
             this.focus();
         }
     }
-    get hasCustomDetailContent() {
-        return this.customDetailContent;
-    }
-    get hasCustomSubContainerContent() {
-        return this.customSubContainerContent;
-    }
     focusOnNextTreeItem() {
         if (this.expanded && this.subTreeList && this.subTreeList.length > 0) {
             this.subTreeList.first.focus();
@@ -205,18 +210,43 @@ class EuiTreeListItemComponent {
             this.focusable.nativeElement.setAttribute('tabindex', '0');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemComponent, deps: [{ token: forwardRef(() => EuiTreeListComponent), host: true }, { token: i1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { id: "id", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", active: "active", expanded: "expanded", alwaysExpanded: "alwaysExpanded", url: "url", isDisplaySubLinksOnHover: "isDisplaySubLinksOnHover", subLinks: "subLinks", isNavigateOnlyOnLabelClick: "isNavigateOnlyOnLabelClick", e2eAttr: "e2eAttr", isVisible: "isVisible" }, outputs: { toggled: "toggled" }, queries: [{ propertyName: "customSubLabel", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EuiTreeListItemCustomContentTagDirective) }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div\n    class=\"eui-tree-list-item\"\n    [class.eui-tree-list-item--active]=\"active\"\n    [hidden]=\"!isVisible\"\n    attr.data-e2e=\"{{ e2eAttr }}\"\n    tabindex=\"0\">\n    <div class=\"eui-tree-list-item-header eui-tree-list-item-header\" (click)=\"navigateToLink($event)\">\n        <div\n            #focusable\n            class=\"eui-tree-list-item-header__content\"\n            role=\"treeitem\"\n            [id]=\"id\"\n            (keydown)=\"onKeyDown($event)\"\n            attr.aria-label=\"{{ label }} {{ subLabel }}\"\n            [attr.aria-expanded]=\"expanded\">\n            <ng-template [ngIf]=\"hasCustomContent\">\n                <ng-content select=\"euiTreeListItemCustomContent\"></ng-content>\n\n                <div class=\"eui-tree-list-item-header__content-right-content\">\n                    <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n                        <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n                    </div>\n                    <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n                        <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n                            <ng-container *ngIf=\"expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                            <ng-container *ngIf=\"!expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                        </button>\n                    </div>\n                </div>\n            </ng-template>\n\n            <ng-template [ngIf]=\"!hasCustomContent\">\n                <div class=\"eui-u-flex\">\n                    <span euiLabel *ngIf=\"linkUrl && isNavigateOnlyOnLabelClick; else noLink\">\n                        {{ label }}\n                    </span>\n                    <ng-template #noLink>\n                        <a euiLabel (click)=\"navigateToLink($event)\">{{label}}</a>\n                    </ng-template>\n                    <span euiSublabel *ngIf=\"customSubLabel; else customSubLabel\">\n                        <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n                    </span>\n                    <ng-template #customSubLabel>\n                        <span euiSublabel>\n                            {{ subLabel }}\n                        </span>\n                    </ng-template>\n                </div>\n\n                <div class=\"eui-tree-list-item-header__content-right-content\">\n                    <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n                        <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n                    </div>\n                    <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n                        <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n                            <ng-container *ngIf=\"expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-up\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                            <ng-container *ngIf=\"!expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-forward\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                        </button>\n                    </div>\n                </div>\n            </ng-template>\n        </div>\n\n        <ng-template [ngIf]=\"hasCustomDetailContent\">\n            <div class=\"eui-tree-list-item-header__details-content\">\n                <ng-content select=\"euiTreeListItemDetailsContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"hasCustomSubContainerContent\">\n            <ng-content select=\"euiTreeListItemSubContainerContent\"></ng-content>\n        </ng-template>\n    </div>\n\n    <ng-template [ngIf]=\"expanded || alwaysExpanded\">\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n\n<ng-template #rightContent><ng-content select=\"euiTreeListItemRightContent\"></ng-content></ng-template>\n", styles: [".eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-base-color-grey-80);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-grey-80)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    getCssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('eui-tree-list-item'),
+            this.active ? 'eui-tree-list-item--active' : '',
+            !this.isVisible ? 'eui-tree-list-item--hidden' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemComponent, deps: [{ token: forwardRef(() => EuiTreeListComponent), host: true }, { token: i1.Router }, { token: i0.ElementRef }, { token: i2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { e2eAttr: "e2eAttr", id: "id", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", active: "active", expanded: "expanded", alwaysExpanded: "alwaysExpanded", url: "url", isDisplaySubLinksOnHover: "isDisplaySubLinksOnHover", subLinks: "subLinks", isNavigateOnlyOnLabelClick: "isNavigateOnlyOnLabelClick", isVisible: "isVisible" }, outputs: { toggled: "toggled" }, host: { properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabIndex", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "customLabel", first: true, predicate: i0.forwardRef(() => EuiTreeListItemLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EuiTreeListItemContentComponent) }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div class=\"eui-tree-list-item-header\">\n    <div\n        #focusable\n        class=\"eui-tree-list-item-header__content\"\n        role=\"treeitem\"\n        [id]=\"id\"\n        (keydown)=\"onKeyDown($event)\"\n        attr.aria-label=\"{{ label }} {{ subLabel }}\"\n        [attr.aria-expanded]=\"expanded\">\n\n        <ng-container *ngIf=\"hasCustomContent; else noCustomContent\">\n            <ng-content select=\"eui-tree-list-item-content\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n        </ng-container>\n\n        <ng-template #noCustomContent>\n            <div class=\"eui-u-flex\">\n                <eui-label *ngIf=\"!customLabel\">\n                    {{label}}\n                    <eui-label *ngIf=\"subLabel\" euiSublabel>{{subLabel}}</eui-label>\n                </eui-label>\n\n                <eui-label *ngIf=\"customLabel\">\n                    <div class=\"eui-u-flex\">\n                        <ng-content select=\"eui-tree-list-item-label\"></ng-content>\n                    </div>\n                </eui-label>\n            </div>\n            <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n        </ng-template>\n    </div>\n\n    <ng-container *ngIf=\"customDetailContent\">\n        <div class=\"eui-tree-list-item-header__details-content\">\n            <ng-content select=\"eui-tree-list-item-details\"></ng-content>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"customSubContainerContent\">\n        <ng-content select=\"eui-tree-list-item-sub-container\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template [ngIf]=\"expanded || alwaysExpanded\">\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n    <div class=\"eui-tree-list-item-header__content-right-content\">\n        <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n            <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary euiSizeS aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n                <ng-container *ngIf=\"expanded\">\n                    <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n                </ng-container>\n                <ng-container *ngIf=\"!expanded\">\n                    <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n                </ng-container>\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tree-list-item', encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"eui-tree-list-item\"\n    [class.eui-tree-list-item--active]=\"active\"\n    [hidden]=\"!isVisible\"\n    attr.data-e2e=\"{{ e2eAttr }}\"\n    tabindex=\"0\">\n    <div class=\"eui-tree-list-item-header eui-tree-list-item-header\" (click)=\"navigateToLink($event)\">\n        <div\n            #focusable\n            class=\"eui-tree-list-item-header__content\"\n            role=\"treeitem\"\n            [id]=\"id\"\n            (keydown)=\"onKeyDown($event)\"\n            attr.aria-label=\"{{ label }} {{ subLabel }}\"\n            [attr.aria-expanded]=\"expanded\">\n            <ng-template [ngIf]=\"hasCustomContent\">\n                <ng-content select=\"euiTreeListItemCustomContent\"></ng-content>\n\n                <div class=\"eui-tree-list-item-header__content-right-content\">\n                    <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n                        <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n                    </div>\n                    <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n                        <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n                            <ng-container *ngIf=\"expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                            <ng-container *ngIf=\"!expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                        </button>\n                    </div>\n                </div>\n            </ng-template>\n\n            <ng-template [ngIf]=\"!hasCustomContent\">\n                <div class=\"eui-u-flex\">\n                    <span euiLabel *ngIf=\"linkUrl && isNavigateOnlyOnLabelClick; else noLink\">\n                        {{ label }}\n                    </span>\n                    <ng-template #noLink>\n                        <a euiLabel (click)=\"navigateToLink($event)\">{{label}}</a>\n                    </ng-template>\n                    <span euiSublabel *ngIf=\"customSubLabel; else customSubLabel\">\n                        <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n                    </span>\n                    <ng-template #customSubLabel>\n                        <span euiSublabel>\n                            {{ subLabel }}\n                        </span>\n                    </ng-template>\n                </div>\n\n                <div class=\"eui-tree-list-item-header__content-right-content\">\n                    <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n                        <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n                    </div>\n                    <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n                        <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n                            <ng-container *ngIf=\"expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-up\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                            <ng-container *ngIf=\"!expanded\">\n                                <eui-icon-svg icon=\"eui-chevron-forward\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n                            </ng-container>\n                        </button>\n                    </div>\n                </div>\n            </ng-template>\n        </div>\n\n        <ng-template [ngIf]=\"hasCustomDetailContent\">\n            <div class=\"eui-tree-list-item-header__details-content\">\n                <ng-content select=\"euiTreeListItemDetailsContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"hasCustomSubContainerContent\">\n            <ng-content select=\"euiTreeListItemSubContainerContent\"></ng-content>\n        </ng-template>\n    </div>\n\n    <ng-template [ngIf]=\"expanded || alwaysExpanded\">\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n\n<ng-template #rightContent><ng-content select=\"euiTreeListItemRightContent\"></ng-content></ng-template>\n", styles: [".eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-base-color-grey-80);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-grey-80)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"] }]
+            args: [{ selector: 'eui-tree-list-item', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: ['euiPrimary', 'euiSecondary', 'euiInfo', 'euiSuccess', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
+                        },
+                    ], template: "<div class=\"eui-tree-list-item-header\">\n    <div\n        #focusable\n        class=\"eui-tree-list-item-header__content\"\n        role=\"treeitem\"\n        [id]=\"id\"\n        (keydown)=\"onKeyDown($event)\"\n        attr.aria-label=\"{{ label }} {{ subLabel }}\"\n        [attr.aria-expanded]=\"expanded\">\n\n        <ng-container *ngIf=\"hasCustomContent; else noCustomContent\">\n            <ng-content select=\"eui-tree-list-item-content\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n        </ng-container>\n\n        <ng-template #noCustomContent>\n            <div class=\"eui-u-flex\">\n                <eui-label *ngIf=\"!customLabel\">\n                    {{label}}\n                    <eui-label *ngIf=\"subLabel\" euiSublabel>{{subLabel}}</eui-label>\n                </eui-label>\n\n                <eui-label *ngIf=\"customLabel\">\n                    <div class=\"eui-u-flex\">\n                        <ng-content select=\"eui-tree-list-item-label\"></ng-content>\n                    </div>\n                </eui-label>\n            </div>\n            <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n        </ng-template>\n    </div>\n\n    <ng-container *ngIf=\"customDetailContent\">\n        <div class=\"eui-tree-list-item-header__details-content\">\n            <ng-content select=\"eui-tree-list-item-details\"></ng-content>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"customSubContainerContent\">\n        <ng-content select=\"eui-tree-list-item-sub-container\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template [ngIf]=\"expanded || alwaysExpanded\">\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n    <div class=\"eui-tree-list-item-header__content-right-content\">\n        <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n            <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary euiSizeS aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n                <ng-container *ngIf=\"expanded\">\n                    <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n                </ng-container>\n                <ng-container *ngIf=\"!expanded\">\n                    <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n                </ng-container>\n            </button>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Host
                 }, {
                     type: Inject,
                     args: [forwardRef(() => EuiTreeListComponent)]
-                }] }, { type: i1.Router }, { type: i0.ElementRef }], propDecorators: { id: [{
+                }] }, { type: i1.Router }, { type: i0.ElementRef }, { type: i2.BaseStatesDirective }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], e2eAttr: [{
+                type: HostBinding,
+                args: ['attr.data-e2e']
+            }, {
+                type: Input
+            }], id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -238,8 +268,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 type: Input
             }], isNavigateOnlyOnLabelClick: [{
                 type: Input
-            }], e2eAttr: [{
-                type: Input
             }], toggled: [{
                 type: Output
             }], isVisible: [{
@@ -247,9 +275,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             }], focusable: [{
                 type: ViewChild,
                 args: ['focusable']
-            }], customSubLabel: [{
+            }], customLabel: [{
                 type: ContentChild,
-                args: [forwardRef(() => EuiTreeListItemSubLabelTagDirective)]
+                args: [forwardRef(() => EuiTreeListItemLabelTagDirective)]
             }], customDetailContent: [{
                 type: ContentChild,
                 args: [forwardRef(() => EuiTreeListItemDetailsContentTagDirective)]
@@ -261,52 +289,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 args: [forwardRef(() => EuiTreeListComponent), { descendants: true }]
             }], customContent: [{
                 type: ContentChildren,
-                args: [forwardRef(() => EuiTreeListItemCustomContentTagDirective), { descendants: false }]
+                args: [forwardRef(() => EuiTreeListItemContentComponent), { descendants: false }]
             }] } });
-class EuiTreeListItemCustomContentTagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemCustomContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemCustomContentTagDirective, selector: "euiTreeListItemCustomContent", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemCustomContentTagDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'euiTreeListItemCustomContent' }]
-        }] });
-class EuiTreeListItemRightContentTagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemRightContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemRightContentTagDirective, selector: "euiTreeListItemRightContent", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemRightContentTagDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'euiTreeListItemRightContent' }]
-        }] });
-class EuiTreeListItemSubLabelTagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemSubLabelTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemSubLabelTagDirective, selector: "euiTreeListItemSubLabel", ngImport: i0 }); }
+/* eslint-disable */
+class EuiTreeListItemLabelTagDirective {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemLabelTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemLabelTagDirective, selector: "eui-tree-list-item-label", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemSubLabelTagDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemLabelTagDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'euiTreeListItemSubLabel' }]
+            args: [{ selector: 'eui-tree-list-item-label' }]
         }] });
 class EuiTreeListItemDetailsContentTagDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemDetailsContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemDetailsContentTagDirective, selector: "euiTreeListItemDetailsContent", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemDetailsContentTagDirective, selector: "eui-tree-list-item-details", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemDetailsContentTagDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'euiTreeListItemDetailsContent' }]
+            args: [{ selector: 'eui-tree-list-item-details' }]
         }] });
 class EuiTreeListItemSubContainerContentTagDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemSubContainerContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemSubContainerContentTagDirective, selector: "euiTreeListItemSubContainerContent", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemSubContainerContentTagDirective, selector: "eui-tree-list-item-sub-container", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemSubContainerContentTagDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'euiTreeListItemSubContainerContent' }]
+            args: [{ selector: 'eui-tree-list-item-sub-container' }]
         }] });
 /* eslint-disable */
+class EuiTreeListToolbarComponent {
+    constructor() {
+        this.filterValue = '';
+        this.e2eAttr = 'eui-tree-list-toolbar';
+        this.filter = new EventEmitter();
+        this.expandAll = new EventEmitter();
+        this.collapseAll = new EventEmitter();
+        this._isVisible = false;
+        this._isFilterVisible = true;
+        this._isToggleVisible = true;
+        this._isToggleExpanded = false;
+        this._hasLabels = true;
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    set isVisible(value) {
+        this._isVisible = coerceBooleanProperty(value);
+    }
+    get isFilterVisible() {
+        return this._isFilterVisible;
+    }
+    set isFilterVisible(value) {
+        this._isFilterVisible = coerceBooleanProperty(value);
+    }
+    get isToggleVisible() {
+        return this._isToggleVisible;
+    }
+    set isToggleVisible(value) {
+        this._isToggleVisible = coerceBooleanProperty(value);
+    }
+    get isToggleExpanded() {
+        return this._isToggleExpanded;
+    }
+    set isToggleExpanded(value) {
+        this._isToggleExpanded = coerceBooleanProperty(value);
+    }
+    get hasLabels() {
+        return this._hasLabels;
+    }
+    set hasLabels(value) {
+        this._hasLabels = coerceBooleanProperty(value);
+    }
+    ngOnInit() {
+        if (this.filterValue !== '' && this.filterValue !== undefined) {
+            this.filter.emit(this.filterValue);
+        }
+    }
+    ngOnChanges(c) {
+        if (c && c.filterValue && this.filterValue !== undefined) {
+            this.filter.emit(this.filterValue);
+        }
+    }
+    /**
+     * @deprecated
+     * @param event
+     */
+    // public onFilter(event: string): void;
+    onFilter() {
+        console.log('test');
+        console.log(this.filterValue);
+        if (this.filterValue === '') {
+            if (!this.isToggleExpanded) {
+                this.collapseAll.emit(null);
+            }
+        }
+        this.filter.emit(this.filterValue);
+    }
+    onExpandAll(event) {
+        this.isToggleExpanded = !this.isToggleExpanded;
+        this.expandAll.emit(event);
+    }
+    onCollapseAll(event) {
+        this.isToggleExpanded = !this.isToggleExpanded;
+        this.collapseAll.emit(event);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListToolbarComponent, selector: "eui-tree-list-toolbar", inputs: { isVisible: "isVisible", filterLabel: "filterLabel", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", isFilterVisible: "isFilterVisible", isToggleVisible: "isToggleVisible", isToggleExpanded: "isToggleExpanded", filterValue: "filterValue", hasLabels: "hasLabels", e2eAttr: "e2eAttr" }, outputs: { filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isVisible\" euiInputGroup>\n    <div class=\"eui-input-group-addon\">\n        <div class=\"eui-input-group-addon-item\">\n            <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n        </div>\n        <input euiInputText euiClearable [(ngModel)]=\"filterValue\" placeholder=\"Search from tree list items...\" (ngModelChange)=\"onFilter()\"/>\n\n        <button *ngIf=\"!isToggleExpanded\" euiButton euiSecondary euiOutline (click)=\"onExpandAll($event)\">\n            <span euiLabel>Expand all</span>\n            <eui-icon-svg icon=\"eui-level-down\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n        <button *ngIf=\"isToggleExpanded\" euiButton euiSecondary euiOutline (click)=\"onCollapseAll($event)\">\n            <span euiLabel>Collapse all</span>\n            <eui-icon-svg icon=\"eui-level-up\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i7.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr", "styleClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-tree-list-toolbar', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"isVisible\" euiInputGroup>\n    <div class=\"eui-input-group-addon\">\n        <div class=\"eui-input-group-addon-item\">\n            <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n        </div>\n        <input euiInputText euiClearable [(ngModel)]=\"filterValue\" placeholder=\"Search from tree list items...\" (ngModelChange)=\"onFilter()\"/>\n\n        <button *ngIf=\"!isToggleExpanded\" euiButton euiSecondary euiOutline (click)=\"onExpandAll($event)\">\n            <span euiLabel>Expand all</span>\n            <eui-icon-svg icon=\"eui-level-down\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n        <button *ngIf=\"isToggleExpanded\" euiButton euiSecondary euiOutline (click)=\"onCollapseAll($event)\">\n            <span euiLabel>Collapse all</span>\n            <eui-icon-svg icon=\"eui-level-up\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n" }]
+        }], propDecorators: { isVisible: [{
+                type: Input
+            }], filterLabel: [{
+                type: Input
+            }], expandAllLabel: [{
+                type: Input
+            }], collapseAllLabel: [{
+                type: Input
+            }], isFilterVisible: [{
+                type: Input
+            }], isToggleVisible: [{
+                type: Input
+            }], isToggleExpanded: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }], hasLabels: [{
+                type: Input
+            }], e2eAttr: [{
+                type: Input
+            }], filter: [{
+                type: Output
+            }], expandAll: [{
+                type: Output
+            }], collapseAll: [{
+                type: Output
+            }] } });
+class EuiUxTreeToolbarButtonsTagDirective {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeToolbarButtonsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiUxTreeToolbarButtonsTagDirective, selector: "EuiTreeListToolbarButtons", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeToolbarButtonsTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'EuiTreeListToolbarButtons' }]
+        }] });
 class EuiTreeListComponent {
-    // @Input() styleClass: string;
     get isShowToolbar() {
         return this._isShowToolbar;
     }
@@ -331,24 +461,8 @@ class EuiTreeListComponent {
     set hasItemsUrl(value) {
         this._hasItemsUrl = coerceBooleanProperty(value);
     }
-    // private _hasItemsBullet = true;
-    // private _hasLeftIndent = true;
     constructor(elementRef) {
         this.elementRef = elementRef;
-        // @Input()
-        // get hasItemsBullet(): boolean {
-        //     return this._hasItemsBullet;
-        // }
-        // set hasItemsBullet(value: BooleanInput) {
-        //     this._hasItemsBullet = coerceBooleanProperty(value);
-        // }
-        // @Input()
-        // get hasLeftIndent(): boolean {
-        //     return this._hasLeftIndent;
-        // }
-        // set hasLeftIndent(value: BooleanInput) {
-        //     this._hasLeftIndent = coerceBooleanProperty(value);
-        // }
         this.tabindex = '0';
         this.ariaRole = 'tree';
         this.ariaLabel = '';
@@ -366,18 +480,6 @@ class EuiTreeListComponent {
         this._isExpanded = false;
         this._hasItemsUrl = false;
     }
-    ngAfterContentInit() {
-        this.classes = '';
-        // if (!this.hasItemsBullet) {
-        //     this.classes += ' eui-tree-list--no-bullets';
-        // }
-        // if (this.hasLeftIndent) {
-        //     this.classes += ' eui-tree-list--with-left-indent';
-        // }
-        // if (this.hasItemsUrl) {
-        //     this.classes += ' eui-tree-list--with-items-url';
-        // }
-    }
     ngAfterViewInit() {
         const treeItemIds = [];
         if (this.items) {
@@ -408,8 +510,10 @@ class EuiTreeListComponent {
     }
     onFilter(filterValue) {
         // TODO find a recursive way of doing the filtering throughout the tree structure
+        console.log(filterValue);
         if (filterValue !== '' && filterValue !== undefined) {
             this.setVisibleState(false);
+            console.log(filterValue);
             this.items.toArray().forEach((item1) => {
                 item1.isVisible = this.filterMatched(0, item1, filterValue);
                 if (item1.subTreeList.length !== 0) {
@@ -558,11 +662,11 @@ class EuiTreeListComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListComponent, selector: "eui-tree-list", inputs: { isShowToolbar: "isShowToolbar", isShowToolbarToggle: "isShowToolbarToggle", isExpanded: "isExpanded", filterLabel: "filterLabel", filterFunction: "filterFunction", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", hasItemsUrl: "hasItemsUrl", tabindex: "tabindex", ariaRole: "ariaRole", ariaLabel: "ariaLabel", toolbarFilterValue: "toolbarFilterValue", e2eAttr: "e2eAttr" }, outputs: { itemSelected: "itemSelected", filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiTreeListItemComponent) }], usesOnChanges: true, ngImport: i0, template: "<!-- <ux-a-toolbar-filter\n    #uxToolbarFilter\n    [filterValue]=\"toolbarFilterValue\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"isShowToolbarToggle\"\n    [isToggleExpanded]=\"isExpanded\"\n    (filter)=\"onFilter($event)\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    expandAllLabel=\"{{ expandAllLabel }}\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n    <ng-content select=\"uxTreeListToolbarContent\"></ng-content>\n</ux-a-toolbar-filter> -->\n\n<div\n    class=\"eui-tree-list\"\n    [attr.role]=\"ariaRole\"\n    [attr.data-tabindex]=\"originalTabindex\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-owns]=\"ariaOwns\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-base-color-grey-80);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-grey-80)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListComponent, selector: "eui-tree-list", inputs: { isShowToolbar: "isShowToolbar", isShowToolbarToggle: "isShowToolbarToggle", isExpanded: "isExpanded", filterLabel: "filterLabel", filterFunction: "filterFunction", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", hasItemsUrl: "hasItemsUrl", tabindex: "tabindex", ariaRole: "ariaRole", ariaLabel: "ariaLabel", toolbarFilterValue: "toolbarFilterValue", e2eAttr: "e2eAttr" }, outputs: { itemSelected: "itemSelected", filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiTreeListItemComponent) }], usesOnChanges: true, ngImport: i0, template: "<eui-tree-list-toolbar\n    *ngIf=\"isShowToolbar\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"isShowToolbarToggle\"\n    (filter)=\"onFilter($event)\"\n    [filterValue]=\"toolbarFilterValue\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    [expandAllLabel]=\"expandAllLabel ? expandAllLabel : null\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    [isToggleExpanded]=\"isExpanded\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-tree-list-toolbar>\n\n<div\n    class=\"eui-tree-list\"\n    [attr.role]=\"ariaRole\"\n    [attr.data-tabindex]=\"originalTabindex\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-owns]=\"ariaOwns\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list{display:block;width:100%;background-color:var(--eui-base-color-white)}.eui-tree-list-item{display:block;width:100%;border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{display:flex;align-items:center;width:100%;border-left:3px solid transparent;text-decoration:none;min-height:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-xs);width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-base-color-grey-80);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-grey-80)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list-item-content{display:flex;align-items:center;width:100%}.eui-tree-list-item--primary .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item--secondary .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-grey-50)}.eui-tree-list-item--info .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item--success .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item--warning .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item--danger .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item--accent .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-accent-100)}.eui-tree-list-item--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuiTreeListToolbarComponent, selector: "eui-tree-list-toolbar", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tree-list', encapsulation: ViewEncapsulation.None, template: "<!-- <ux-a-toolbar-filter\n    #uxToolbarFilter\n    [filterValue]=\"toolbarFilterValue\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"isShowToolbarToggle\"\n    [isToggleExpanded]=\"isExpanded\"\n    (filter)=\"onFilter($event)\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    expandAllLabel=\"{{ expandAllLabel }}\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n    <ng-content select=\"uxTreeListToolbarContent\"></ng-content>\n</ux-a-toolbar-filter> -->\n\n<div\n    class=\"eui-tree-list\"\n    [attr.role]=\"ariaRole\"\n    [attr.data-tabindex]=\"originalTabindex\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-owns]=\"ariaOwns\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-base-color-grey-80);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-grey-80)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"] }]
+            args: [{ selector: 'eui-tree-list', encapsulation: ViewEncapsulation.None, template: "<eui-tree-list-toolbar\n    *ngIf=\"isShowToolbar\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"isShowToolbarToggle\"\n    (filter)=\"onFilter($event)\"\n    [filterValue]=\"toolbarFilterValue\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    [expandAllLabel]=\"expandAllLabel ? expandAllLabel : null\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    [isToggleExpanded]=\"isExpanded\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-tree-list-toolbar>\n\n<div\n    class=\"eui-tree-list\"\n    [attr.role]=\"ariaRole\"\n    [attr.data-tabindex]=\"originalTabindex\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-owns]=\"ariaOwns\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list{display:block;width:100%;background-color:var(--eui-base-color-white)}.eui-tree-list-item{display:block;width:100%;border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{display:flex;align-items:center;width:100%;border-left:3px solid transparent;text-decoration:none;min-height:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-xs);width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-base-color-grey-80);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-grey-80)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list-item-content{display:flex;align-items:center;width:100%}.eui-tree-list-item--primary .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item--secondary .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-grey-50)}.eui-tree-list-item--info .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item--success .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item--warning .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item--danger .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item--accent .eui-tree-list-item-header{border-left:5px solid var(--eui-base-color-accent-100)}.eui-tree-list-item--hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isShowToolbar: [{
                 type: Input
             }], isShowToolbarToggle: [{
@@ -601,57 +705,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 type: ContentChildren,
                 args: [forwardRef(() => EuiTreeListItemComponent)]
             }] } });
-class EuiTreeListToolbarContentTagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListToolbarContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListToolbarContentTagDirective, selector: "EuiTreeListToolbarContent", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListToolbarContentTagDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'EuiTreeListToolbarContent' }]
-        }] });
 class EuiTreeListModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListModule, declarations: [EuiTreeListComponent,
             EuiTreeListItemComponent,
             EuiTreeListItemComponent,
-            EuiTreeListItemSubLabelTagDirective,
-            EuiTreeListItemCustomContentTagDirective,
-            EuiTreeListItemRightContentTagDirective,
+            EuiTreeListItemLabelTagDirective,
             EuiTreeListItemDetailsContentTagDirective,
-            EuiTreeListItemSubContainerContentTagDirective], imports: [CommonModule, FormsModule, EuiIconModule, EuiLabelModule, EuiButtonModule], exports: [EuiTreeListComponent,
+            EuiTreeListItemSubContainerContentTagDirective,
+            EuiTreeListItemContentComponent,
+            EuiTreeListToolbarComponent], imports: [CommonModule, FormsModule, EuiIconModule, EuiLabelModule, EuiButtonModule,
+            EuiInputTextModule,
+            EuiInputGroupModule], exports: [EuiTreeListComponent,
             EuiTreeListItemComponent,
             EuiTreeListItemComponent,
-            EuiTreeListItemSubLabelTagDirective,
-            EuiTreeListItemCustomContentTagDirective,
-            EuiTreeListItemRightContentTagDirective,
+            EuiTreeListItemLabelTagDirective,
             EuiTreeListItemDetailsContentTagDirective,
-            EuiTreeListItemSubContainerContentTagDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListModule, imports: [CommonModule, FormsModule, EuiIconModule, EuiLabelModule, EuiButtonModule] }); }
+            EuiTreeListItemSubContainerContentTagDirective,
+            EuiTreeListItemContentComponent,
+            EuiTreeListToolbarComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListModule, imports: [CommonModule, FormsModule, EuiIconModule, EuiLabelModule, EuiButtonModule,
+            EuiInputTextModule,
+            EuiInputGroupModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule, EuiIconModule, EuiLabelModule, EuiButtonModule],
+                    imports: [
+                        CommonModule, FormsModule, EuiIconModule, EuiLabelModule, EuiButtonModule,
+                        EuiInputTextModule,
+                        EuiInputGroupModule,
+                    ],
                     exports: [
                         EuiTreeListComponent,
                         EuiTreeListItemComponent,
                         EuiTreeListItemComponent,
-                        EuiTreeListItemSubLabelTagDirective,
-                        EuiTreeListItemCustomContentTagDirective,
-                        EuiTreeListItemRightContentTagDirective,
+                        EuiTreeListItemLabelTagDirective,
                         EuiTreeListItemDetailsContentTagDirective,
                         EuiTreeListItemSubContainerContentTagDirective,
+                        EuiTreeListItemContentComponent,
+                        EuiTreeListToolbarComponent,
                     ],
                     declarations: [
                         EuiTreeListComponent,
                         EuiTreeListItemComponent,
                         EuiTreeListItemComponent,
-                        EuiTreeListItemSubLabelTagDirective,
-                        EuiTreeListItemCustomContentTagDirective,
-                        EuiTreeListItemRightContentTagDirective,
+                        EuiTreeListItemLabelTagDirective,
                         EuiTreeListItemDetailsContentTagDirective,
                         EuiTreeListItemSubContainerContentTagDirective,
+                        EuiTreeListItemContentComponent,
+                        EuiTreeListToolbarComponent,
                     ],
                 }]
         }] });
@@ -660,5 +764,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
  * Generated bundle index. Do not edit.
  */
-export { EuiTreeListComponent, EuiTreeListItemComponent, EuiTreeListItemCustomContentTagDirective, EuiTreeListItemDetailsContentTagDirective, EuiTreeListItemRightContentTagDirective, EuiTreeListItemSubContainerContentTagDirective, EuiTreeListItemSubLabelTagDirective, EuiTreeListModule, EuiTreeListToolbarContentTagDirective };
+export { EuiTreeListComponent, EuiTreeListItemComponent, EuiTreeListItemContentComponent, EuiTreeListItemDetailsContentTagDirective, EuiTreeListItemLabelTagDirective, EuiTreeListItemSubContainerContentTagDirective, EuiTreeListModule, EuiTreeListToolbarComponent, EuiUxTreeToolbarButtonsTagDirective };
 //# sourceMappingURL=eui-components-eui-tree-list.mjs.map