@eui/components 18.0.0-next.50 → 18.0.0-next.51

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

@@ -9,21 +9,23 @@ var EuiTreeListItemContentComponent = class _EuiTreeListItemContentComponent {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: _EuiTreeListItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.6", type: _EuiTreeListItemContentComponent, selector: "eui-tree-list-item-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.6", type: _EuiTreeListItemContentComponent, selector: "eui-tree-list-item-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiTreeListItemContentComponent, decorators: [{
   type: Component,
-  args: [{ selector: "eui-tree-list-item-content", template: "<ng-content></ng-content>\n" }]
+  args: [{
+    selector: "eui-tree-list-item-content",
+    template: "<ng-content></ng-content>"
+  }]
 }], propDecorators: { string: [{
   type: HostBinding,
   args: ["class"]
 }] } });
 
 // eui-tree-list-item.component.mjs
-import { Component as Component2, ContentChild, ContentChildren, Directive, EventEmitter, forwardRef, Host, HostBinding as HostBinding2, Inject, Input, Optional, Output, ViewChild, ViewEncapsulation } from "@angular/core";
+import { booleanAttribute, Component as Component2, ContentChild, ContentChildren, Directive, EventEmitter, forwardRef, Host, HostBinding as HostBinding2, Inject, Input, Optional, Output, ViewChild, ViewEncapsulation } from "@angular/core";
 import { consumeEvent, uniqueId } from "@eui/core";
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { BaseStatesDirective } from "@eui/components/shared";
 import * as i02 from "@angular/core";
 import * as i1 from "@angular/router";
@@ -35,60 +37,24 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
   get cssClasses() {
     return this.getCssClasses();
   }
-  get active() {
-    return this._active;
-  }
-  set active(value) {
-    this._active = coerceBooleanProperty(value);
-  }
-  get expanded() {
-    return this._expanded;
-  }
-  set expanded(value) {
-    this._expanded = coerceBooleanProperty(value);
-  }
-  get alwaysExpanded() {
-    return this._alwaysExpanded;
-  }
-  set alwaysExpanded(value) {
-    this._alwaysExpanded = coerceBooleanProperty(value);
-  }
-  get isDisplaySubLinksOnHover() {
-    return this._isDisplaySubLinksOnHover;
-  }
-  set isDisplaySubLinksOnHover(value) {
-    this._isDisplaySubLinksOnHover = coerceBooleanProperty(value);
-  }
-  get isNavigateOnlyOnLabelClick() {
-    return this._isNavigateOnlyOnLabelClick;
-  }
-  set isNavigateOnlyOnLabelClick(value) {
-    this._isNavigateOnlyOnLabelClick = coerceBooleanProperty(value);
-  }
-  get isVisible() {
-    return this._isVisible;
-  }
-  set isVisible(value) {
-    this._isVisible = coerceBooleanProperty(value);
-  }
   constructor(treeListComponent, router, elementRef, baseStatesDirective) {
     this.router = router;
     this.elementRef = elementRef;
     this.baseStatesDirective = baseStatesDirective;
     this.tabIndex = "0";
+    this.ariaRole = "treeitem";
     this.e2eAttr = "eui-tree-list-item";
     this.subLinks = [];
+    this.isActive = false;
+    this.isExpanded = false;
+    this.isAlwaysExpanded = false;
+    this.isVisible = true;
+    this.isDisplaySubLinksOnHover = false;
+    this.isNavigateOnlyOnLabelClick = false;
     this.toggled = new EventEmitter();
     this.isHovered = false;
     this.hasSub = false;
     this.hasCustomContent = false;
-    this.ariaRole = "treeitem";
-    this._active = false;
-    this._expanded = false;
-    this._alwaysExpanded = false;
-    this._isDisplaySubLinksOnHover = false;
-    this._isNavigateOnlyOnLabelClick = false;
-    this._isVisible = true;
     this.treeListComponent = treeListComponent;
   }
   ngAfterContentInit() {
@@ -107,25 +73,25 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
     if (this.subTreeList) {
       this.subTreeList.forEach((subtree) => {
         subtree.disableFocus();
-        subtree.ariaRole = "group";
+        subtree.ariaRoleTree = "group";
       });
     }
   }
   toggle(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.expanded = !this.expanded;
+    this.isExpanded = !this.isExpanded;
     this.toggled.next(this);
   }
   onKeyDown(event) {
     switch (event.keyCode) {
       case 13:
       case 32:
-        this.expanded = !this.expanded;
+        this.isExpanded = !this.isExpanded;
         consumeEvent(event);
         break;
       case 37:
-        this.expanded = false;
+        this.isExpanded = false;
         consumeEvent(event);
         break;
       case 38:
@@ -137,7 +103,7 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
         consumeEvent(event);
         break;
       case 39:
-        this.expanded = true;
+        this.isExpanded = true;
         consumeEvent(event);
         break;
       case 40:
@@ -157,7 +123,7 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
     }
   }
   setExpandedState(state) {
-    this.expanded = state;
+    this.isExpanded = state;
     if (this.subTreeList.length !== 0) {
       this.subTreeList.toArray().forEach((item) => {
         item.setExpandedState(state);
@@ -184,7 +150,7 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
     }
   }
   focusOnNextTreeItem() {
-    if (this.expanded && this.subTreeList && this.subTreeList.length > 0) {
+    if (this.isExpanded && this.subTreeList && this.subTreeList.length > 0) {
       this.subTreeList.first.focus();
       return true;
     } else if (this.treeListComponent) {
@@ -205,7 +171,7 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
   getCssClasses() {
     return [
       this.baseStatesDirective.getCssClasses("eui-tree-list-item"),
-      this.active ? "eui-tree-list-item--active" : "",
+      this.isActive ? "eui-tree-list-item--active" : "",
       !this.isVisible ? "eui-tree-list-item--hidden" : ""
     ].join(" ").trim();
   }
@@ -213,7 +179,7 @@ var EuiTreeListItemComponent = class _EuiTreeListItemComponent {
     this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i02, type: _EuiTreeListItemComponent, deps: [{ token: forwardRef(() => EuiTreeListComponent), host: true, optional: true }, { token: i1.Router }, { token: i02.ElementRef }, { token: i2.BaseStatesDirective }], target: i02.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i02.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.6", 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", ariaLabel: "ariaLabel" }, outputs: { toggled: "toggled" }, host: { properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabIndex", "attr.data-e2e": "this.e2eAttr", "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "attr.role": "this.ariaRole" } }, queries: [{ propertyName: "customLabel", first: true, predicate: i02.forwardRef(() => EuiTreeListItemLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i02.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i02.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i02.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i02.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: i02, template: '<div class="eui-tree-list-item-header">\n    <div\n        #focusable\n        class="eui-tree-list-item-header__content"\n        (keydown)="onKeyDown($event)"\n        attr.aria-label="{{ label }} {{ subLabel }}">\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            <eui-icon-button-expander *ngIf="hasSub && !alwaysExpanded"\n                (buttonClick)="toggle($event)"\n                [isExpanded]="expanded"\n                isDirectionForward>\n            </eui-icon-button-expander>\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.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }, { 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"] }], encapsulation: i02.ViewEncapsulation.None });
+    this.ɵcmp = i02.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: _EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { id: "id", ariaLabel: "ariaLabel", e2eAttr: "e2eAttr", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", url: "url", subLinks: "subLinks", isActive: ["isActive", "isActive", booleanAttribute], isExpanded: ["isExpanded", "isExpanded", booleanAttribute], isAlwaysExpanded: ["isAlwaysExpanded", "isAlwaysExpanded", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isDisplaySubLinksOnHover: ["isDisplaySubLinksOnHover", "isDisplaySubLinksOnHover", booleanAttribute], isNavigateOnlyOnLabelClick: ["isNavigateOnlyOnLabelClick", "isNavigateOnlyOnLabelClick", booleanAttribute] }, outputs: { toggled: "toggled" }, host: { properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabIndex", "attr.role": "this.ariaRole", "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "customLabel", first: true, predicate: i02.forwardRef(() => EuiTreeListItemLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i02.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i02.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i02.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i02.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: i02, template: '<div class="eui-tree-list-item-header">\n    <div\n        #focusable\n        class="eui-tree-list-item-header__content"\n        (keydown)="onKeyDown($event)"\n        attr.aria-label="{{ label }} {{ subLabel }}">\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]="isExpanded || isAlwaysExpanded">\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            <eui-icon-button-expander *ngIf="hasSub && !isAlwaysExpanded"\n                (buttonClick)="toggle($event)"\n                [isExpanded]="isExpanded"\n                isDirectionForward>\n            </eui-icon-button-expander>\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.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }, { 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"] }], encapsulation: i02.ViewEncapsulation.None });
   }
 };
 i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i02, type: EuiTreeListItemComponent, decorators: [{
@@ -223,7 +189,7 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
       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        (keydown)="onKeyDown($event)"\n        attr.aria-label="{{ label }} {{ subLabel }}">\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            <eui-icon-button-expander *ngIf="hasSub && !alwaysExpanded"\n                (buttonClick)="toggle($event)"\n                [isExpanded]="expanded"\n                isDirectionForward>\n            </eui-icon-button-expander>\n        </div>\n    </div>\n</ng-template>\n' }]
+  ], template: '<div class="eui-tree-list-item-header">\n    <div\n        #focusable\n        class="eui-tree-list-item-header__content"\n        (keydown)="onKeyDown($event)"\n        attr.aria-label="{{ label }} {{ subLabel }}">\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]="isExpanded || isAlwaysExpanded">\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            <eui-icon-button-expander *ngIf="hasSub && !isAlwaysExpanded"\n                (buttonClick)="toggle($event)"\n                [isExpanded]="isExpanded"\n                isDirectionForward>\n            </eui-icon-button-expander>\n        </div>\n    </div>\n</ng-template>\n' }]
 }], ctorParameters: () => [{ type: void 0, decorators: [{
   type: Host
 }, {
@@ -237,45 +203,54 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
 }], tabIndex: [{
   type: HostBinding2,
   args: ["attr.tabindex"]
-}], e2eAttr: [{
+}], ariaRole: [{
   type: HostBinding2,
-  args: ["attr.data-e2e"]
-}, {
-  type: Input
+  args: ["attr.role"]
 }], id: [{
   type: HostBinding2,
   args: ["attr.id"]
 }, {
   type: Input
+}], ariaLabel: [{
+  type: HostBinding2,
+  args: ["attr.aria-label"]
+}, {
+  type: Input
+}], e2eAttr: [{
+  type: HostBinding2,
+  args: ["attr.data-e2e"]
+}, {
+  type: Input
 }], label: [{
   type: Input
 }], linkUrl: [{
   type: Input
 }], subLabel: [{
   type: Input
-}], active: [{
-  type: Input
-}], expanded: [{
-  type: Input
-}], alwaysExpanded: [{
-  type: Input
 }], url: [{
   type: Input
-}], isDisplaySubLinksOnHover: [{
-  type: Input
 }], subLinks: [{
   type: Input
+}], isActive: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isExpanded: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isAlwaysExpanded: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isVisible: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isDisplaySubLinksOnHover: [{
+  type: Input,
+  args: [{ transform: booleanAttribute }]
 }], isNavigateOnlyOnLabelClick: [{
-  type: Input
+  type: Input,
+  args: [{ transform: booleanAttribute }]
 }], toggled: [{
   type: Output
-}], isVisible: [{
-  type: Input
-}], ariaLabel: [{
-  type: HostBinding2,
-  args: ["attr.aria-label"]
-}, {
-  type: Input
 }], focusable: [{
   type: ViewChild,
   args: ["focusable"]
@@ -294,9 +269,6 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
 }], customContent: [{
   type: ContentChildren,
   args: [forwardRef(() => EuiTreeListItemContentComponent), { descendants: false }]
-}], ariaRole: [{
-  type: HostBinding2,
-  args: ["attr.role"]
 }] } });
 var EuiTreeListItemLabelTagDirective = class _EuiTreeListItemLabelTagDirective {
   static {
@@ -337,7 +309,7 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
 
 // toolbar/toolbar.component.mjs
 import { Component as Component3, Directive as Directive2, Input as Input2, Output as Output2, EventEmitter as EventEmitter2, ViewEncapsulation as ViewEncapsulation3 } from "@angular/core";
-import { coerceBooleanProperty as coerceBooleanProperty2 } from "@angular/cdk/coercion";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import * as i03 from "@angular/core";
 import * as i12 from "@angular/common";
 import * as i22 from "@angular/forms";
@@ -363,31 +335,31 @@ var EuiTreeListToolbarComponent = class _EuiTreeListToolbarComponent {
     return this._isVisible;
   }
   set isVisible(value) {
-    this._isVisible = coerceBooleanProperty2(value);
+    this._isVisible = coerceBooleanProperty(value);
   }
   get isFilterVisible() {
     return this._isFilterVisible;
   }
   set isFilterVisible(value) {
-    this._isFilterVisible = coerceBooleanProperty2(value);
+    this._isFilterVisible = coerceBooleanProperty(value);
   }
   get isToggleVisible() {
     return this._isToggleVisible;
   }
   set isToggleVisible(value) {
-    this._isToggleVisible = coerceBooleanProperty2(value);
+    this._isToggleVisible = coerceBooleanProperty(value);
   }
   get isToggleExpanded() {
     return this._isToggleExpanded;
   }
   set isToggleExpanded(value) {
-    this._isToggleExpanded = coerceBooleanProperty2(value);
+    this._isToggleExpanded = coerceBooleanProperty(value);
   }
   get hasLabels() {
     return this._hasLabels;
   }
   set hasLabels(value) {
-    this._hasLabels = coerceBooleanProperty2(value);
+    this._hasLabels = coerceBooleanProperty(value);
   }
   ngOnInit() {
     if (this.filterValue !== "" && this.filterValue !== void 0) {
@@ -507,40 +479,18 @@ i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
 }] });
 
 // eui-tree-list.component.mjs
-import { Component as Component4, Input as Input3, Output as Output3, EventEmitter as EventEmitter3, ContentChildren as ContentChildren2, forwardRef as forwardRef3, ViewEncapsulation as ViewEncapsulation5 } from "@angular/core";
-import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
+import { Component as Component4, Input as Input3, Output as Output3, EventEmitter as EventEmitter3, ContentChildren as ContentChildren2, forwardRef as forwardRef3, ViewEncapsulation as ViewEncapsulation5, booleanAttribute as booleanAttribute2 } from "@angular/core";
 import * as i04 from "@angular/core";
 import * as i13 from "@angular/common";
 import * as i33 from "@ngx-translate/core";
 var EuiTreeListComponent = class _EuiTreeListComponent {
-  get isShowToolbar() {
-    return this._isShowToolbar;
-  }
-  set isShowToolbar(value) {
-    this._isShowToolbar = coerceBooleanProperty3(value);
-  }
-  get isShowToolbarToggle() {
-    return this._isShowToolbarToggle;
-  }
-  set isShowToolbarToggle(value) {
-    this._isShowToolbarToggle = coerceBooleanProperty3(value);
-  }
-  get isExpanded() {
-    return this._isExpanded;
-  }
-  set isExpanded(value) {
-    this._isExpanded = coerceBooleanProperty3(value);
-  }
-  get hasItemsUrl() {
-    return this._hasItemsUrl;
-  }
-  set hasItemsUrl(value) {
-    this._hasItemsUrl = coerceBooleanProperty3(value);
-  }
   constructor(elementRef) {
     this.elementRef = elementRef;
+    this.isShowToolbar = false;
+    this.isShowToolbarToggle = true;
+    this.isExpanded = false;
+    this.hasItemsUrl = false;
     this.tabindex = "0";
-    this.ariaRole = "tree";
     this.ariaLabel = "";
     this.toolbarFilterValue = "";
     this.e2eAttr = "eui-tree-list";
@@ -552,10 +502,6 @@ var EuiTreeListComponent = class _EuiTreeListComponent {
     this.originalTabindex = "0";
     this.classes = "";
     this.ariaRoleTree = "tree";
-    this._isShowToolbar = false;
-    this._isShowToolbarToggle = true;
-    this._isExpanded = false;
-    this._hasItemsUrl = false;
   }
   ngAfterViewInit() {
     const treeItemIds = [];
@@ -602,7 +548,7 @@ var EuiTreeListComponent = class _EuiTreeListComponent {
               if (this.filterMatched(1, item2, filterValue)) {
                 item2.isVisible = true;
                 item1.isVisible = true;
-                item1.expanded = true;
+                item1.isExpanded = true;
                 if (item2.subTreeList.length !== 0) {
                   item2.subTreeList.toArray().forEach((item2SubTreeList) => {
                     item2SubTreeList.items.toArray().forEach((item3) => {
@@ -617,9 +563,9 @@ var EuiTreeListComponent = class _EuiTreeListComponent {
                     if (this.filterMatched(2, item4, filterValue)) {
                       item4.isVisible = true;
                       item2.isVisible = true;
-                      item2.expanded = true;
+                      item2.isExpanded = true;
                       item1.isVisible = true;
-                      item1.expanded = true;
+                      item1.isExpanded = true;
                     }
                   });
                 });
@@ -730,7 +676,7 @@ var EuiTreeListComponent = class _EuiTreeListComponent {
     this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i04, type: _EuiTreeListComponent, deps: [{ token: i04.ElementRef }], target: i04.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.6", 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: i04.forwardRef(() => EuiTreeListItemComponent) }], usesOnChanges: true, ngImport: i04, template: `<eui-tree-list-toolbar
+    this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: _EuiTreeListComponent, selector: "eui-tree-list", inputs: { isShowToolbar: ["isShowToolbar", "isShowToolbar", booleanAttribute2], isShowToolbarToggle: ["isShowToolbarToggle", "isShowToolbarToggle", booleanAttribute2], isExpanded: ["isExpanded", "isExpanded", booleanAttribute2], hasItemsUrl: ["hasItemsUrl", "hasItemsUrl", booleanAttribute2], filterLabel: "filterLabel", filterFunction: "filterFunction", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", tabindex: "tabindex", ariaLabel: "ariaLabel", toolbarFilterValue: "toolbarFilterValue", e2eAttr: "e2eAttr" }, outputs: { itemSelected: "itemSelected", filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, queries: [{ propertyName: "items", predicate: i04.forwardRef(() => EuiTreeListItemComponent) }], usesOnChanges: true, ngImport: i04, template: `<eui-tree-list-toolbar
     *ngIf="isShowToolbar"
     [isVisible]="isShowToolbar"
     [isToggleVisible]="isShowToolbarToggle"
@@ -785,11 +731,17 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
 </div>
 `, styles: ['.eui-tree-list{display:block;width:100%;background-color:var(--eui-c-white)}.eui-tree-list-item{display:block;width:100%;border-top:1px solid var(--eui-c-neutral-lightest)}.eui-tree-list-item-header{display:flex;align-items:center;width:100%;border-left:var(--eui-s-xs) solid transparent;text-decoration:none;min-height:calc(3 * var(--eui-s-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-s-xs);width:100%;font:var(--eui-f-m)}.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-tree-list-item-header__content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-tree-list-item-header__content [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;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-s-xs)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-s-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-c-neutral-light);cursor:pointer;padding:var(--eui-s-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-sh-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-c-neutral-bg-light)}.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-c-neutral)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-c-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-c-neutral-light)}.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-s-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-s-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-s-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-s-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-s-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-s-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-s-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-s-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-s-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-s-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-c-primary);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-toolbar{padding:0 var(--eui-s-m);margin-top:var(--eui-s-m)}.eui-tree-list-item--primary .eui-tree-list-item-header{border-color:var(--eui-c-primary)}.eui-tree-list-item--secondary .eui-tree-list-item-header{border-color:var(--eui-c-neutral-lighter)}.eui-tree-list-item--info .eui-tree-list-item-header{border-color:var(--eui-c-info)}.eui-tree-list-item--success .eui-tree-list-item-header{border-color:var(--eui-c-success)}.eui-tree-list-item--warning .eui-tree-list-item-header{border-color:var(--eui-c-warning)}.eui-tree-list-item--danger .eui-tree-list-item-header{border-color:var(--eui-c-danger)}.eui-tree-list-item--accent .eui-tree-list-item-header{border-color:var(--eui-c-accent)}.eui-tree-list-item--hidden{display:none}\n'] }]
 }], ctorParameters: () => [{ type: i04.ElementRef }], propDecorators: { isShowToolbar: [{
-  type: Input3
+  type: Input3,
+  args: [{ transform: booleanAttribute2 }]
 }], isShowToolbarToggle: [{
-  type: Input3
+  type: Input3,
+  args: [{ transform: booleanAttribute2 }]
 }], isExpanded: [{
-  type: Input3
+  type: Input3,
+  args: [{ transform: booleanAttribute2 }]
+}], hasItemsUrl: [{
+  type: Input3,
+  args: [{ transform: booleanAttribute2 }]
 }], filterLabel: [{
   type: Input3
 }], filterFunction: [{
@@ -798,12 +750,8 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
   type: Input3
 }], collapseAllLabel: [{
   type: Input3
-}], hasItemsUrl: [{
-  type: Input3
 }], tabindex: [{
   type: Input3
-}], ariaRole: [{
-  type: Input3
 }], ariaLabel: [{
   type: Input3
 }], toolbarFilterValue: [{