npm - @eui/components - Versions diffs - 17.0.0-next.21 → 17.0.0-next.23 - Mend

@eui/components 17.0.0-next.21 → 17.0.0-next.23

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 (429) hide show

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

@@ -307,10 +307,10 @@ class EuiUxTreeNodeComponent {
     hasSelectedChildren(UxLinkLegacy) {
         return UxLinkLegacy.children.filter((c) => c.selected === true).length > 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeNodeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiUxTreeNodeComponent, selector: "eui-ux-tree-node", inputs: { expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", templateVariable: "templateVariable", node: "node", nodeContentTemplate: "nodeContentTemplate", e2eAttr: "e2eAttr", isFirst: "isFirst", isLast: "isLast", isRootNode: "isRootNode", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", isShowActiveNode: "isShowActiveNode", isHideToggles: "isHideToggles", isClickSelectingNode: "isClickSelectingNode", highlightPath: "highlightPath", autoTranslate: "autoTranslate", hasSelectAll: "hasSelectAll" }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", selectionChange: "selectionChange" }, ngImport: i0, template: "<li\n    *ngIf=\"node.visible\"\n    class=\"ux-tree__node\"\n    [class.first-child]=\"isFirst\"\n    [class.last-child]=\"isLast\"\n    [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n    [class.ux-tree__node--disabled]=\"node.disabled\"\n    title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n        <button\n            (click)=\"onNodeToggle($event, node)\"\n            (keydown)=\"onNodeKeydown($event, node)\"\n            styleClass=\"ux-tree__node-toggle-icon\"\n            *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n            euiSizeS\n            euiButton\n            euiBasicButton\n            [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\">\n            <eui-icon [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></eui-icon>\n        </button>\n\n        <span\n            *ngIf=\"isMultiselect\"\n            [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n            [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n            <input\n                type=\"checkbox\"\n                class=\"ux-input__checkbox\"\n                [class.checkbox-label-indeterminate]=\"node.indeterminate\"\n                [class.ux-input__checkbox--selected]=\"node.selected && !node.indeterminate\"\n                [id]=\"nodeId\"\n                [value]=\"node.label\"\n                [disabled]=\"node.disabled\"\n                [(ngModel)]=\"node.selected\"\n                [attr.aria-label]=\"checkInputLabel()\"\n                (change)=\"onCheckboxChange(node, $event)\" />\n            <label class=\"ux-tree__node-checkbox-label\" [class.checkbox-label-indeterminate]=\"node.indeterminate\" [for]=\"nodeId\"> </label>\n        </span>\n\n        <div\n            *ngIf=\"nodeContentTemplate\"\n            class=\"ux-tree__custom-content\"\n            [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n            [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n            <ng-template [ngTemplateOutlet]=\"nodeContentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-template>\n        </div>\n\n        <ng-container *ngIf=\"!nodeContentTemplate\">\n            <ng-container *ngIf=\"node.typeLabel || node.iconClass\">\n                <span\n                    *ngIf=\"node.typeLabel\"\n                    class=\"ux-tree__node-type ux-tree__node-type--{{ node.typeClass }}\"\n                    [class.ux-tree__node-type-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n                    (click)=\"onNodeClick($event, node)\"\n                    (keydown)=\"onNodeKeydown($event, node)\">\n                    {{ node.typeLabel }}\n                </span>\n\n                <span *ngIf=\"node.iconClass\" class=\"ux-tree__node-icon ux-tree__node-type--{{ node.iconTypeClass }}\">\n                    <span class=\"{{ node.iconClass }}\"></span>\n                </span>\n\n                <div class=\"ux-tree__node-label-wrapped\">\n                    <span\n                        [class.text-muted]=\"node.disabled\"\n                        [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n                        (click)=\"onNodeClick($event, node)\"\n                        (keydown)=\"onNodeKeydown($event, node)\">\n                        <span *ngIf=\"autoTranslate; else manualTranslation\">\n                            {{ node.label | translate }}\n                        </span>\n                        <ng-template #manualTranslation>{{ node.label }}</ng-template>\n                        <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n                    </span>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!(node.typeLabel || node.iconClass)\">\n                <span\n                    class=\"ux-tree__node-label\"\n                    [class.ux-tree__node-label-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n                    [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n                    [class.text-muted]=\"node.disabled\"\n                    (click)=\"onNodeClick($event, node)\"\n                    (keydown)=\"onNodeKeydown($event, node)\">\n                    <span *ngIf=\"autoTranslate; else manualTranslation\">\n                        {{ node.label | translate }}\n                    </span>\n                    <ng-template #manualTranslation>{{ node.label }}</ng-template>\n                    <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n                </span>\n            </ng-container>\n\n            <div *ngIf=\"node.badges\" class=\"eui-u-ml-auto\">\n                <eui-chip\n                    *ngFor=\"let badge of node.badges\"\n                    styleClass=\"ux-tree__node-badge\"\n                    euiSizeS\n                    euiOutline\n                    euiVariant=\"{{ badge.typeClass }}\">\n                    {{ badge.label }}\n                </eui-chip>\n            </div>\n\n            <span\n                *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\"\n                class=\"ux-tree__node-metacontent-toggle ux-tree__node-clickable\"\n                (click)=\"onMetadataNodeToggle($event, node)\">\n                <span class=\"eui-icon\" [ngClass]=\"node.expanded ? 'eui-icon eui-icon-angle-down' : 'eui-icon eui-icon-angle-right'\"></span>\n            </span>\n        </ng-container>\n    </div>\n    <ng-container *ngIf=\"node.expanded\">\n        <ul *ngIf=\"hasNodeChildren(node)\" class=\"ux-tree__nodes\">\n            <eui-ux-tree-node\n                *ngFor=\"let subNode of node.children; let isFirst = first; let isLast = last; trackBy: trackByFn\"\n                [node]=\"subNode\"\n                [isMultiselect]=\"isMultiselect\"\n                [isRecursiveSelection]=\"isRecursiveSelection\"\n                (nodeClick)=\"onSubNodeClick($event)\"\n                (nodeToggle)=\"onSubNodeToggle($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                [isFirst]=\"isFirst\"\n                [isLast]=\"isLast\"\n                [isClickTogglingNode]=\"isClickTogglingNode\"\n                expandedIconClass=\"{{ expandedIconClass }}\"\n                collapsedIconClass=\"{{ collapsedIconClass }}\"\n                [templateVariable]=\"templateVariable\"\n                [nodeContentTemplate]=\"nodeContentTemplate\"\n                [isShowActiveNode]=\"isShowActiveNode\"\n                [isHideToggles]=\"isHideToggles\"\n                [isClickSelectingNode]=\"isClickSelectingNode\"\n                [highlightPath]=\"highlightPath\"\n                [isRecursiveParentSelection]=\"isRecursiveParentSelection\"\n                [autoTranslate]=\"autoTranslate\">\n            </eui-ux-tree-node>\n        </ul>\n        <div *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\" class=\"ux-tree__node-metacontent\">\n            <ng-template [ngTemplateOutlet]=\"templateVariable\" [ngTemplateOutletContext]=\"{ metadata: node.metadata }\"></ng-template>\n        </div>\n    </ng-container>\n</li>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: EuiUxTreeNodeComponent, selector: "eui-ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeNodeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiUxTreeNodeComponent, selector: "eui-ux-tree-node", inputs: { expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", templateVariable: "templateVariable", node: "node", nodeContentTemplate: "nodeContentTemplate", e2eAttr: "e2eAttr", isFirst: "isFirst", isLast: "isLast", isRootNode: "isRootNode", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", isShowActiveNode: "isShowActiveNode", isHideToggles: "isHideToggles", isClickSelectingNode: "isClickSelectingNode", highlightPath: "highlightPath", autoTranslate: "autoTranslate", hasSelectAll: "hasSelectAll" }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", selectionChange: "selectionChange" }, ngImport: i0, template: "<li\n    *ngIf=\"node.visible\"\n    class=\"ux-tree__node\"\n    [class.first-child]=\"isFirst\"\n    [class.last-child]=\"isLast\"\n    [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n    [class.ux-tree__node--disabled]=\"node.disabled\"\n    title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n        <button\n            (click)=\"onNodeToggle($event, node)\"\n            (keydown)=\"onNodeKeydown($event, node)\"\n            styleClass=\"ux-tree__node-toggle-icon\"\n            *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n            euiSizeS\n            euiButton\n            euiBasicButton\n            [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\">\n            <eui-icon [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></eui-icon>\n        </button>\n\n        <span\n            *ngIf=\"isMultiselect\"\n            [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n            [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n            <input\n                type=\"checkbox\"\n                class=\"ux-input__checkbox\"\n                [class.checkbox-label-indeterminate]=\"node.indeterminate\"\n                [class.ux-input__checkbox--selected]=\"node.selected && !node.indeterminate\"\n                [id]=\"nodeId\"\n                [value]=\"node.label\"\n                [disabled]=\"node.disabled\"\n                [(ngModel)]=\"node.selected\"\n                [attr.aria-label]=\"checkInputLabel()\"\n                (change)=\"onCheckboxChange(node, $event)\" />\n            <label class=\"ux-tree__node-checkbox-label\" [class.checkbox-label-indeterminate]=\"node.indeterminate\" [for]=\"nodeId\"> </label>\n        </span>\n\n        <div\n            *ngIf=\"nodeContentTemplate\"\n            class=\"ux-tree__custom-content\"\n            [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n            [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n            <ng-template [ngTemplateOutlet]=\"nodeContentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-template>\n        </div>\n\n        <ng-container *ngIf=\"!nodeContentTemplate\">\n            <ng-container *ngIf=\"node.typeLabel || node.iconClass\">\n                <span\n                    *ngIf=\"node.typeLabel\"\n                    class=\"ux-tree__node-type ux-tree__node-type--{{ node.typeClass }}\"\n                    [class.ux-tree__node-type-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n                    (click)=\"onNodeClick($event, node)\"\n                    (keydown)=\"onNodeKeydown($event, node)\">\n                    {{ node.typeLabel }}\n                </span>\n\n                <span *ngIf=\"node.iconClass\" class=\"ux-tree__node-icon ux-tree__node-type--{{ node.iconTypeClass }}\">\n                    <span class=\"{{ node.iconClass }}\"></span>\n                </span>\n\n                <div class=\"ux-tree__node-label-wrapped\">\n                    <span\n                        [class.text-muted]=\"node.disabled\"\n                        [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n                        (click)=\"onNodeClick($event, node)\"\n                        (keydown)=\"onNodeKeydown($event, node)\">\n                        <span *ngIf=\"autoTranslate; else manualTranslation\">\n                            {{ node.label | translate }}\n                        </span>\n                        <ng-template #manualTranslation>{{ node.label }}</ng-template>\n                        <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n                    </span>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!(node.typeLabel || node.iconClass)\">\n                <span\n                    class=\"ux-tree__node-label\"\n                    [class.ux-tree__node-label-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n                    [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n                    [class.text-muted]=\"node.disabled\"\n                    (click)=\"onNodeClick($event, node)\"\n                    (keydown)=\"onNodeKeydown($event, node)\">\n                    <span *ngIf=\"autoTranslate; else manualTranslation\">\n                        {{ node.label | translate }}\n                    </span>\n                    <ng-template #manualTranslation>{{ node.label }}</ng-template>\n                    <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n                </span>\n            </ng-container>\n\n            <div *ngIf=\"node.badges\" class=\"eui-u-ml-auto\">\n                <eui-chip\n                    *ngFor=\"let badge of node.badges\"\n                    styleClass=\"ux-tree__node-badge\"\n                    euiSizeS\n                    euiOutline\n                    euiVariant=\"{{ badge.typeClass }}\">\n                    {{ badge.label }}\n                </eui-chip>\n            </div>\n\n            <span\n                *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\"\n                class=\"ux-tree__node-metacontent-toggle ux-tree__node-clickable\"\n                (click)=\"onMetadataNodeToggle($event, node)\">\n                <span class=\"eui-icon\" [ngClass]=\"node.expanded ? 'eui-icon eui-icon-angle-down' : 'eui-icon eui-icon-angle-right'\"></span>\n            </span>\n        </ng-container>\n    </div>\n    <ng-container *ngIf=\"node.expanded\">\n        <ul *ngIf=\"hasNodeChildren(node)\" class=\"ux-tree__nodes\">\n            <eui-ux-tree-node\n                *ngFor=\"let subNode of node.children; let isFirst = first; let isLast = last; trackBy: trackByFn\"\n                [node]=\"subNode\"\n                [isMultiselect]=\"isMultiselect\"\n                [isRecursiveSelection]=\"isRecursiveSelection\"\n                (nodeClick)=\"onSubNodeClick($event)\"\n                (nodeToggle)=\"onSubNodeToggle($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                [isFirst]=\"isFirst\"\n                [isLast]=\"isLast\"\n                [isClickTogglingNode]=\"isClickTogglingNode\"\n                expandedIconClass=\"{{ expandedIconClass }}\"\n                collapsedIconClass=\"{{ collapsedIconClass }}\"\n                [templateVariable]=\"templateVariable\"\n                [nodeContentTemplate]=\"nodeContentTemplate\"\n                [isShowActiveNode]=\"isShowActiveNode\"\n                [isHideToggles]=\"isHideToggles\"\n                [isClickSelectingNode]=\"isClickSelectingNode\"\n                [highlightPath]=\"highlightPath\"\n                [isRecursiveParentSelection]=\"isRecursiveParentSelection\"\n                [autoTranslate]=\"autoTranslate\">\n            </eui-ux-tree-node>\n        </ul>\n        <div *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\" class=\"ux-tree__node-metacontent\">\n            <ng-template [ngTemplateOutlet]=\"templateVariable\" [ngTemplateOutletContext]=\"{ metadata: node.metadata }\"></ng-template>\n        </div>\n    </ng-container>\n</li>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: EuiUxTreeNodeComponent, selector: "eui-ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-ux-tree-node', template: "<li\n    *ngIf=\"node.visible\"\n    class=\"ux-tree__node\"\n    [class.first-child]=\"isFirst\"\n    [class.last-child]=\"isLast\"\n    [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n    [class.ux-tree__node--disabled]=\"node.disabled\"\n    title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n        <button\n            (click)=\"onNodeToggle($event, node)\"\n            (keydown)=\"onNodeKeydown($event, node)\"\n            styleClass=\"ux-tree__node-toggle-icon\"\n            *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n            euiSizeS\n            euiButton\n            euiBasicButton\n            [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\">\n            <eui-icon [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></eui-icon>\n        </button>\n\n        <span\n            *ngIf=\"isMultiselect\"\n            [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n            [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n            <input\n                type=\"checkbox\"\n                class=\"ux-input__checkbox\"\n                [class.checkbox-label-indeterminate]=\"node.indeterminate\"\n                [class.ux-input__checkbox--selected]=\"node.selected && !node.indeterminate\"\n                [id]=\"nodeId\"\n                [value]=\"node.label\"\n                [disabled]=\"node.disabled\"\n                [(ngModel)]=\"node.selected\"\n                [attr.aria-label]=\"checkInputLabel()\"\n                (change)=\"onCheckboxChange(node, $event)\" />\n            <label class=\"ux-tree__node-checkbox-label\" [class.checkbox-label-indeterminate]=\"node.indeterminate\" [for]=\"nodeId\"> </label>\n        </span>\n\n        <div\n            *ngIf=\"nodeContentTemplate\"\n            class=\"ux-tree__custom-content\"\n            [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n            [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n            <ng-template [ngTemplateOutlet]=\"nodeContentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-template>\n        </div>\n\n        <ng-container *ngIf=\"!nodeContentTemplate\">\n            <ng-container *ngIf=\"node.typeLabel || node.iconClass\">\n                <span\n                    *ngIf=\"node.typeLabel\"\n                    class=\"ux-tree__node-type ux-tree__node-type--{{ node.typeClass }}\"\n                    [class.ux-tree__node-type-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n                    (click)=\"onNodeClick($event, node)\"\n                    (keydown)=\"onNodeKeydown($event, node)\">\n                    {{ node.typeLabel }}\n                </span>\n\n                <span *ngIf=\"node.iconClass\" class=\"ux-tree__node-icon ux-tree__node-type--{{ node.iconTypeClass }}\">\n                    <span class=\"{{ node.iconClass }}\"></span>\n                </span>\n\n                <div class=\"ux-tree__node-label-wrapped\">\n                    <span\n                        [class.text-muted]=\"node.disabled\"\n                        [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n                        (click)=\"onNodeClick($event, node)\"\n                        (keydown)=\"onNodeKeydown($event, node)\">\n                        <span *ngIf=\"autoTranslate; else manualTranslation\">\n                            {{ node.label | translate }}\n                        </span>\n                        <ng-template #manualTranslation>{{ node.label }}</ng-template>\n                        <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n                    </span>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!(node.typeLabel || node.iconClass)\">\n                <span\n                    class=\"ux-tree__node-label\"\n                    [class.ux-tree__node-label-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n                    [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n                    [class.text-muted]=\"node.disabled\"\n                    (click)=\"onNodeClick($event, node)\"\n                    (keydown)=\"onNodeKeydown($event, node)\">\n                    <span *ngIf=\"autoTranslate; else manualTranslation\">\n                        {{ node.label | translate }}\n                    </span>\n                    <ng-template #manualTranslation>{{ node.label }}</ng-template>\n                    <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n                </span>\n            </ng-container>\n\n            <div *ngIf=\"node.badges\" class=\"eui-u-ml-auto\">\n                <eui-chip\n                    *ngFor=\"let badge of node.badges\"\n                    styleClass=\"ux-tree__node-badge\"\n                    euiSizeS\n                    euiOutline\n                    euiVariant=\"{{ badge.typeClass }}\">\n                    {{ badge.label }}\n                </eui-chip>\n            </div>\n\n            <span\n                *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\"\n                class=\"ux-tree__node-metacontent-toggle ux-tree__node-clickable\"\n                (click)=\"onMetadataNodeToggle($event, node)\">\n                <span class=\"eui-icon\" [ngClass]=\"node.expanded ? 'eui-icon eui-icon-angle-down' : 'eui-icon eui-icon-angle-right'\"></span>\n            </span>\n        </ng-container>\n    </div>\n    <ng-container *ngIf=\"node.expanded\">\n        <ul *ngIf=\"hasNodeChildren(node)\" class=\"ux-tree__nodes\">\n            <eui-ux-tree-node\n                *ngFor=\"let subNode of node.children; let isFirst = first; let isLast = last; trackBy: trackByFn\"\n                [node]=\"subNode\"\n                [isMultiselect]=\"isMultiselect\"\n                [isRecursiveSelection]=\"isRecursiveSelection\"\n                (nodeClick)=\"onSubNodeClick($event)\"\n                (nodeToggle)=\"onSubNodeToggle($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                [isFirst]=\"isFirst\"\n                [isLast]=\"isLast\"\n                [isClickTogglingNode]=\"isClickTogglingNode\"\n                expandedIconClass=\"{{ expandedIconClass }}\"\n                collapsedIconClass=\"{{ collapsedIconClass }}\"\n                [templateVariable]=\"templateVariable\"\n                [nodeContentTemplate]=\"nodeContentTemplate\"\n                [isShowActiveNode]=\"isShowActiveNode\"\n                [isHideToggles]=\"isHideToggles\"\n                [isClickSelectingNode]=\"isClickSelectingNode\"\n                [highlightPath]=\"highlightPath\"\n                [isRecursiveParentSelection]=\"isRecursiveParentSelection\"\n                [autoTranslate]=\"autoTranslate\">\n            </eui-ux-tree-node>\n        </ul>\n        <div *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\" class=\"ux-tree__node-metacontent\">\n            <ng-template [ngTemplateOutlet]=\"templateVariable\" [ngTemplateOutletContext]=\"{ metadata: node.metadata }\"></ng-template>\n        </div>\n    </ng-container>\n</li>\n" }]
         }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { expandedIconClass: [{
@@ -434,10 +434,10 @@ class EuiUxTreeToolbarComponent {
         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: EuiUxTreeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiUxTreeToolbarComponent, selector: "eui-ux-tree-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...\" (change)=\"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\n        <!-- <button *ngIf=\"!isSelectedAll\" euiButton euiSecondary euiOutline (click)=\"selectAll()\">\n            <span euiLabel>Select all</span>\n            <eui-icon-svg icon=\"eui-checkbox\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n        <button *ngIf=\"isSelectedAll\" euiButton euiSecondary euiOutline (click)=\"deselectAll()\">\n            <span euiLabel>Deselect all</span>\n            <eui-icon-svg icon=\"eui-checkbox-outline\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button> -->\n    </div>\n</div>\n\n<!--\n\n\n<div *ngIf=\"isVisible\" class=\"ux-a-toolbar-filter\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-a-toolbar-filter-content\">\n        <div *ngIf=\"isFilterVisible\" class=\"ux-a-toolbar-filter-filter\">\n            <div class=\"ux-input-group\">\n                <span class=\"ux-input-group-prepend\">\n                    <span class=\"ux-input-group-text\">\n                        <span class=\"eui-icon eui-icon-search-m\"></span>\n                    </span>\n                </span>\n                <input\n                    type=\"text\"\n                    euiInputText\n                    class=\"ux-a-toolbar-filter-filter-input\"\n                    placeholder=\"{{ filterLabel ? filterLabel : ('eui.FILTER' | translate) }}\"\n                    [(ngModel)]=\"filterValue\"\n                    (ngModelChange)=\"onFilter($event)\" />\n            </div>\n        </div>\n        <div *ngIf=\"isToggleVisible\" class=\"ux-a-toolbar-filter-trigger-wrapper\">\n            <button\n                *ngIf=\"!isToggleExpanded\"\n                type=\"button\"\n                euiButton\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onExpandAll($event)\">\n                <span class=\"eui-icon eui-icon-level-down ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ expandAllLabel ? expandAllLabel : ('eui.EXPANDALL' | translate) }}</span>\n            </button>\n            <button\n                *ngIf=\"isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onCollapseAll($event)\">\n                <span class=\"eui-icon eui-icon-level-up ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ collapseAllLabel ? collapseAllLabel : ('eui.COLLAPSEALL' | translate) }}</span>\n            </button>\n            <ng-content select=\"EuiUxTreeToolbarFilterButtons\"></ng-content>\n        </div>\n\n        <div class=\"ux-a-toolbar-filter-sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div> -->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i6$1.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr", "styleClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiUxTreeToolbarComponent, selector: "eui-ux-tree-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...\" (change)=\"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\n        <!-- <button *ngIf=\"!isSelectedAll\" euiButton euiSecondary euiOutline (click)=\"selectAll()\">\n            <span euiLabel>Select all</span>\n            <eui-icon-svg icon=\"eui-checkbox\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n        <button *ngIf=\"isSelectedAll\" euiButton euiSecondary euiOutline (click)=\"deselectAll()\">\n            <span euiLabel>Deselect all</span>\n            <eui-icon-svg icon=\"eui-checkbox-outline\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button> -->\n    </div>\n</div>\n\n<!--\n\n\n<div *ngIf=\"isVisible\" class=\"ux-a-toolbar-filter\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-a-toolbar-filter-content\">\n        <div *ngIf=\"isFilterVisible\" class=\"ux-a-toolbar-filter-filter\">\n            <div class=\"ux-input-group\">\n                <span class=\"ux-input-group-prepend\">\n                    <span class=\"ux-input-group-text\">\n                        <span class=\"eui-icon eui-icon-search-m\"></span>\n                    </span>\n                </span>\n                <input\n                    type=\"text\"\n                    euiInputText\n                    class=\"ux-a-toolbar-filter-filter-input\"\n                    placeholder=\"{{ filterLabel ? filterLabel : ('eui.FILTER' | translate) }}\"\n                    [(ngModel)]=\"filterValue\"\n                    (ngModelChange)=\"onFilter($event)\" />\n            </div>\n        </div>\n        <div *ngIf=\"isToggleVisible\" class=\"ux-a-toolbar-filter-trigger-wrapper\">\n            <button\n                *ngIf=\"!isToggleExpanded\"\n                type=\"button\"\n                euiButton\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onExpandAll($event)\">\n                <span class=\"eui-icon eui-icon-level-down ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ expandAllLabel ? expandAllLabel : ('eui.EXPANDALL' | translate) }}</span>\n            </button>\n            <button\n                *ngIf=\"isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onCollapseAll($event)\">\n                <span class=\"eui-icon eui-icon-level-up ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ collapseAllLabel ? collapseAllLabel : ('eui.COLLAPSEALL' | translate) }}</span>\n            </button>\n            <ng-content select=\"EuiUxTreeToolbarFilterButtons\"></ng-content>\n        </div>\n\n        <div class=\"ux-a-toolbar-filter-sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div> -->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i6$1.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: EuiUxTreeToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-ux-tree-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...\" (change)=\"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\n        <!-- <button *ngIf=\"!isSelectedAll\" euiButton euiSecondary euiOutline (click)=\"selectAll()\">\n            <span euiLabel>Select all</span>\n            <eui-icon-svg icon=\"eui-checkbox\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button>\n        <button *ngIf=\"isSelectedAll\" euiButton euiSecondary euiOutline (click)=\"deselectAll()\">\n            <span euiLabel>Deselect all</span>\n            <eui-icon-svg icon=\"eui-checkbox-outline\" class=\"eui-u-ml-s\"></eui-icon-svg>\n        </button> -->\n    </div>\n</div>\n\n<!--\n\n\n<div *ngIf=\"isVisible\" class=\"ux-a-toolbar-filter\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-a-toolbar-filter-content\">\n        <div *ngIf=\"isFilterVisible\" class=\"ux-a-toolbar-filter-filter\">\n            <div class=\"ux-input-group\">\n                <span class=\"ux-input-group-prepend\">\n                    <span class=\"ux-input-group-text\">\n                        <span class=\"eui-icon eui-icon-search-m\"></span>\n                    </span>\n                </span>\n                <input\n                    type=\"text\"\n                    euiInputText\n                    class=\"ux-a-toolbar-filter-filter-input\"\n                    placeholder=\"{{ filterLabel ? filterLabel : ('eui.FILTER' | translate) }}\"\n                    [(ngModel)]=\"filterValue\"\n                    (ngModelChange)=\"onFilter($event)\" />\n            </div>\n        </div>\n        <div *ngIf=\"isToggleVisible\" class=\"ux-a-toolbar-filter-trigger-wrapper\">\n            <button\n                *ngIf=\"!isToggleExpanded\"\n                type=\"button\"\n                euiButton\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onExpandAll($event)\">\n                <span class=\"eui-icon eui-icon-level-down ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ expandAllLabel ? expandAllLabel : ('eui.EXPANDALL' | translate) }}</span>\n            </button>\n            <button\n                *ngIf=\"isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onCollapseAll($event)\">\n                <span class=\"eui-icon eui-icon-level-up ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ collapseAllLabel ? collapseAllLabel : ('eui.COLLAPSEALL' | translate) }}</span>\n            </button>\n            <ng-content select=\"EuiUxTreeToolbarFilterButtons\"></ng-content>\n        </div>\n\n        <div class=\"ux-a-toolbar-filter-sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div> -->\n" }]
         }], propDecorators: { isVisible: [{
@@ -468,10 +468,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 type: Output
             }] } });
 class EuiUxTreeToolbarFilterButtonsTagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeToolbarFilterButtonsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiUxTreeToolbarFilterButtonsTagDirective, selector: "EuiUxTreeToolbarFilterButtons", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeToolbarFilterButtonsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiUxTreeToolbarFilterButtonsTagDirective, selector: "EuiUxTreeToolbarFilterButtons", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeToolbarFilterButtonsTagDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeToolbarFilterButtonsTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'EuiUxTreeToolbarFilterButtons' }]
         }] });
@@ -878,10 +878,10 @@ class EuiUxTreeComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiUxTreeComponent, selector: "eui-ux-tree", inputs: { nodes: "nodes", collapseAllLabel: "collapseAllLabel", expandAllLabel: "expandAllLabel", filterLabel: "filterLabel", collapsedIconClass: "collapsedIconClass", expandedIconClass: "expandedIconClass", setFilterValue: "setFilterValue", e2eAttr: "e2eAttr", isShowToolbar: "isShowToolbar", isExpanded: "isExpanded", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isClickTogglingNode: "isClickTogglingNode", isShowActiveNode: "isShowActiveNode", isHideToggles: "isHideToggles", isHideLines: "isHideLines", isClickSelectingNode: "isClickSelectingNode", showFilteredChildren: "showFilteredChildren", expandFilteredChildren: "expandFilteredChildren", highlightPath: "highlightPath", autoTranslate: "autoTranslate", hasLabels: "hasLabels", hasSelectAll: "hasSelectAll", hasSelectAllFiltered: "hasSelectAllFiltered", isRecursiveParentSelection: "isRecursiveParentSelection" }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", selectionChange: "selectionChange", filter: "filter" }, queries: [{ propertyName: "templateVariable", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }, { propertyName: "treeNodes", predicate: EuiUxTreeNodeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-ux-tree-toolbar\n    *ngIf=\"isShowToolbar\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"!isHideToggles\"\n    (filter)=\"onFilter($event)\"\n    [filterValue]=\"setFilterValue\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    [expandAllLabel]=\"expandAllLabel ? expandAllLabel : null\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    [isToggleExpanded]=\"isExpanded\"\n    [hasLabels]=\"hasLabels\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-ux-tree-toolbar>\n\n<div class=\"eui-u-flex\" *ngIf=\"hasSelectAll || hasSelectAllFiltered\">\n    <input\n        type=\"checkbox\"\n        class=\"ux-input__checkbox\"\n        id=\"selectAll\"\n        [checked]=\"isMinimumOneSelected ? 'checked' : null\"\n        (change)=\"onSelectAllChange($event)\" />\n    <label\n        class=\"ux-tree__node-checkbox-label\"\n        [class.checkbox-label-indeterminate]=\"isMinimumOneSelected && !isAllSelected\"\n        for=\"selectAll\"\n        [class.ux-tree__node-checkbox-label--onelevel]=\"checkForChildren()\">\n        <ng-container *ngIf=\"!allSelected && !isMinimumOneSelected && !isAllSelected\">\n            {{ 'eui.uxtree.SELECT-ALL' | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"allSelected || isMinimumOneSelected || isAllSelected\">\n            {{ 'eui.uxtree.UNSELECT-ALL' | translate }}\n        </ng-container>\n    </label>\n</div>\n<ng-container *ngIf=\"nodes.length > 500 && !hasSelectAll && !hasSelectAllFiltered; else noVirtualScroll\">\n    <cdk-virtual-scroll-viewport\n        #virtualScrolling\n        itemSize=\"30\"\n        class=\"ux-tree__virtual-scrolling__container\"\n        minBufferPx=\"2000\"\n        maxBufferPx=\"2400\">\n        <div *cdkVirtualFor=\"let node of visibleNodes; trackBy: trackByFn\" class=\"ux-tree__virtual-scrolling__item\">\n            <ul\n                class=\"ux-tree\"\n                [class.ux-tree--hidelines]=\"isHideLines\"\n                [class.ux-tree--multiselect]=\"isMultiselect\"\n                [class.ux-tree--onelevel]=\"checkForChildren()\"\n                attr.data-e2e=\"{{ e2eAttr }}\">\n                <eui-ux-tree-node\n                    [node]=\"node\"\n                    (nodeClick)=\"onNodeClick($event)\"\n                    (nodeToggle)=\"onNodeToggle($event)\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    [isRootNode]=\"true\"\n                    [isMultiselect]=\"isMultiselect\"\n                    [isRecursiveSelection]=\"isRecursiveSelection\"\n                    [isClickTogglingNode]=\"isClickTogglingNode\"\n                    expandedIconClass=\"{{ expandedIconClass }}\"\n                    collapsedIconClass=\"{{ collapsedIconClass }}\"\n                    [templateVariable]=\"templateVariable\"\n                    [nodeContentTemplate]=\"nodeContentTemplate\"\n                    [isShowActiveNode]=\"isShowActiveNode\"\n                    [autoTranslate]=\"autoTranslate\"\n                    [isHideToggles]=\"isHideToggles\"\n                    [isClickSelectingNode]=\"isClickSelectingNode\"\n                    [highlightPath]=\"highlightPath\"\n                    [isRecursiveParentSelection]=\"isRecursiveParentSelection\">\n                </eui-ux-tree-node>\n            </ul>\n        </div>\n    </cdk-virtual-scroll-viewport>\n</ng-container>\n\n<ng-template #noVirtualScroll>\n    <ul\n        class=\"ux-tree\"\n        [class.ux-tree--hidelines]=\"isHideLines\"\n        [class.ux-tree--multiselect]=\"isMultiselect\"\n        [class.ux-tree--onelevel]=\"checkForChildren()\"\n        attr.data-e2e=\"{{ e2eAttr }}\">\n        <eui-ux-tree-node\n            *ngFor=\"let node of nodes; trackBy: trackByFn\"\n            [node]=\"node\"\n            (nodeClick)=\"onNodeClick($event)\"\n            (nodeToggle)=\"onNodeToggle($event)\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [isRootNode]=\"true\"\n            [isMultiselect]=\"isMultiselect\"\n            [isRecursiveSelection]=\"isRecursiveSelection\"\n            [isClickTogglingNode]=\"isClickTogglingNode\"\n            expandedIconClass=\"{{ expandedIconClass }}\"\n            collapsedIconClass=\"{{ collapsedIconClass }}\"\n            [templateVariable]=\"templateVariable\"\n            [nodeContentTemplate]=\"nodeContentTemplate\"\n            [isShowActiveNode]=\"isShowActiveNode\"\n            [autoTranslate]=\"autoTranslate\"\n            [isHideToggles]=\"isHideToggles\"\n            [isClickSelectingNode]=\"isClickSelectingNode\"\n            [highlightPath]=\"highlightPath\"\n            [isRecursiveParentSelection]=\"isRecursiveParentSelection\">\n        </eui-ux-tree-node>\n    </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.ux-tree li.ux-tree__node--expandable:before{border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;position:relative;left:4px;bottom:2px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0!important;padding:0!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto;margin-right:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}.ux-a-toolbar-filter{display:flex;padding-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.ux-a-toolbar-filter-content{align-items:center;display:flex;flex-grow:1}.ux-a-toolbar-filter-sub-content{margin-left:auto}.ux-a-toolbar-filter-trigger-wrapper{display:flex;flex-shrink:0}.ux-a-toolbar-filter-trigger{margin-right:var(--eui-base-spacing-xs)}.ux-a-toolbar-filter-trigger.ux-button{border-color:var(--eui-base-color-grey-20)!important;box-shadow:none}.eui-t-compact .ux-a-toolbar-filter-trigger.ux-button.ux-button--outline{padding:8px var(--eui-base-spacing-m)}.ux-a-toolbar-filter-trigger .eui-icon{font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter{margin-right:var(--eui-base-spacing-xs);position:relative;width:100%}.ux-a-toolbar-filter-filter .eui-icon{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter-input{width:100%;width:calc(100% - 36px)!important}.ux-a-toolbar-filter-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{border:1px solid var(--eui-base-color-grey-20);box-shadow:none}.eui-t-compact .ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{padding:8px var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: EuiUxTreeNodeComponent, selector: "eui-ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "component", type: EuiUxTreeToolbarComponent, selector: "eui-ux-tree-toolbar", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiUxTreeComponent, selector: "eui-ux-tree", inputs: { nodes: "nodes", collapseAllLabel: "collapseAllLabel", expandAllLabel: "expandAllLabel", filterLabel: "filterLabel", collapsedIconClass: "collapsedIconClass", expandedIconClass: "expandedIconClass", setFilterValue: "setFilterValue", e2eAttr: "e2eAttr", isShowToolbar: "isShowToolbar", isExpanded: "isExpanded", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isClickTogglingNode: "isClickTogglingNode", isShowActiveNode: "isShowActiveNode", isHideToggles: "isHideToggles", isHideLines: "isHideLines", isClickSelectingNode: "isClickSelectingNode", showFilteredChildren: "showFilteredChildren", expandFilteredChildren: "expandFilteredChildren", highlightPath: "highlightPath", autoTranslate: "autoTranslate", hasLabels: "hasLabels", hasSelectAll: "hasSelectAll", hasSelectAllFiltered: "hasSelectAllFiltered", isRecursiveParentSelection: "isRecursiveParentSelection" }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", selectionChange: "selectionChange", filter: "filter" }, queries: [{ propertyName: "templateVariable", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }, { propertyName: "treeNodes", predicate: EuiUxTreeNodeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-ux-tree-toolbar\n    *ngIf=\"isShowToolbar\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"!isHideToggles\"\n    (filter)=\"onFilter($event)\"\n    [filterValue]=\"setFilterValue\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    [expandAllLabel]=\"expandAllLabel ? expandAllLabel : null\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    [isToggleExpanded]=\"isExpanded\"\n    [hasLabels]=\"hasLabels\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-ux-tree-toolbar>\n\n<div class=\"eui-u-flex\" *ngIf=\"hasSelectAll || hasSelectAllFiltered\">\n    <input\n        type=\"checkbox\"\n        class=\"ux-input__checkbox\"\n        id=\"selectAll\"\n        [checked]=\"isMinimumOneSelected ? 'checked' : null\"\n        (change)=\"onSelectAllChange($event)\" />\n    <label\n        class=\"ux-tree__node-checkbox-label\"\n        [class.checkbox-label-indeterminate]=\"isMinimumOneSelected && !isAllSelected\"\n        for=\"selectAll\"\n        [class.ux-tree__node-checkbox-label--onelevel]=\"checkForChildren()\">\n        <ng-container *ngIf=\"!allSelected && !isMinimumOneSelected && !isAllSelected\">\n            {{ 'eui.uxtree.SELECT-ALL' | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"allSelected || isMinimumOneSelected || isAllSelected\">\n            {{ 'eui.uxtree.UNSELECT-ALL' | translate }}\n        </ng-container>\n    </label>\n</div>\n<ng-container *ngIf=\"nodes.length > 500 && !hasSelectAll && !hasSelectAllFiltered; else noVirtualScroll\">\n    <cdk-virtual-scroll-viewport\n        #virtualScrolling\n        itemSize=\"30\"\n        class=\"ux-tree__virtual-scrolling__container\"\n        minBufferPx=\"2000\"\n        maxBufferPx=\"2400\">\n        <div *cdkVirtualFor=\"let node of visibleNodes; trackBy: trackByFn\" class=\"ux-tree__virtual-scrolling__item\">\n            <ul\n                class=\"ux-tree\"\n                [class.ux-tree--hidelines]=\"isHideLines\"\n                [class.ux-tree--multiselect]=\"isMultiselect\"\n                [class.ux-tree--onelevel]=\"checkForChildren()\"\n                attr.data-e2e=\"{{ e2eAttr }}\">\n                <eui-ux-tree-node\n                    [node]=\"node\"\n                    (nodeClick)=\"onNodeClick($event)\"\n                    (nodeToggle)=\"onNodeToggle($event)\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    [isRootNode]=\"true\"\n                    [isMultiselect]=\"isMultiselect\"\n                    [isRecursiveSelection]=\"isRecursiveSelection\"\n                    [isClickTogglingNode]=\"isClickTogglingNode\"\n                    expandedIconClass=\"{{ expandedIconClass }}\"\n                    collapsedIconClass=\"{{ collapsedIconClass }}\"\n                    [templateVariable]=\"templateVariable\"\n                    [nodeContentTemplate]=\"nodeContentTemplate\"\n                    [isShowActiveNode]=\"isShowActiveNode\"\n                    [autoTranslate]=\"autoTranslate\"\n                    [isHideToggles]=\"isHideToggles\"\n                    [isClickSelectingNode]=\"isClickSelectingNode\"\n                    [highlightPath]=\"highlightPath\"\n                    [isRecursiveParentSelection]=\"isRecursiveParentSelection\">\n                </eui-ux-tree-node>\n            </ul>\n        </div>\n    </cdk-virtual-scroll-viewport>\n</ng-container>\n\n<ng-template #noVirtualScroll>\n    <ul\n        class=\"ux-tree\"\n        [class.ux-tree--hidelines]=\"isHideLines\"\n        [class.ux-tree--multiselect]=\"isMultiselect\"\n        [class.ux-tree--onelevel]=\"checkForChildren()\"\n        attr.data-e2e=\"{{ e2eAttr }}\">\n        <eui-ux-tree-node\n            *ngFor=\"let node of nodes; trackBy: trackByFn\"\n            [node]=\"node\"\n            (nodeClick)=\"onNodeClick($event)\"\n            (nodeToggle)=\"onNodeToggle($event)\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [isRootNode]=\"true\"\n            [isMultiselect]=\"isMultiselect\"\n            [isRecursiveSelection]=\"isRecursiveSelection\"\n            [isClickTogglingNode]=\"isClickTogglingNode\"\n            expandedIconClass=\"{{ expandedIconClass }}\"\n            collapsedIconClass=\"{{ collapsedIconClass }}\"\n            [templateVariable]=\"templateVariable\"\n            [nodeContentTemplate]=\"nodeContentTemplate\"\n            [isShowActiveNode]=\"isShowActiveNode\"\n            [autoTranslate]=\"autoTranslate\"\n            [isHideToggles]=\"isHideToggles\"\n            [isClickSelectingNode]=\"isClickSelectingNode\"\n            [highlightPath]=\"highlightPath\"\n            [isRecursiveParentSelection]=\"isRecursiveParentSelection\">\n        </eui-ux-tree-node>\n    </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.ux-tree li.ux-tree__node--expandable:before{border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;position:relative;left:4px;bottom:2px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0!important;padding:0!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto;margin-right:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}.ux-a-toolbar-filter{display:flex;padding-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.ux-a-toolbar-filter-content{align-items:center;display:flex;flex-grow:1}.ux-a-toolbar-filter-sub-content{margin-left:auto}.ux-a-toolbar-filter-trigger-wrapper{display:flex;flex-shrink:0}.ux-a-toolbar-filter-trigger{margin-right:var(--eui-base-spacing-xs)}.ux-a-toolbar-filter-trigger.ux-button{border-color:var(--eui-base-color-grey-20)!important;box-shadow:none}.eui-t-compact .ux-a-toolbar-filter-trigger.ux-button.ux-button--outline{padding:8px var(--eui-base-spacing-m)}.ux-a-toolbar-filter-trigger .eui-icon{font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter{margin-right:var(--eui-base-spacing-xs);position:relative;width:100%}.ux-a-toolbar-filter-filter .eui-icon{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter-input{width:100%;width:calc(100% - 36px)!important}.ux-a-toolbar-filter-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{border:1px solid var(--eui-base-color-grey-20);box-shadow:none}.eui-t-compact .ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{padding:8px var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: EuiUxTreeNodeComponent, selector: "eui-ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "component", type: EuiUxTreeToolbarComponent, selector: "eui-ux-tree-toolbar", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-ux-tree', encapsulation: ViewEncapsulation.None, template: "<eui-ux-tree-toolbar\n    *ngIf=\"isShowToolbar\"\n    [isVisible]=\"isShowToolbar\"\n    [isToggleVisible]=\"!isHideToggles\"\n    (filter)=\"onFilter($event)\"\n    [filterValue]=\"setFilterValue\"\n    (expandAll)=\"onExpandAll($event)\"\n    (collapseAll)=\"onCollapseAll($event)\"\n    filterLabel=\"{{ filterLabel }}\"\n    [expandAllLabel]=\"expandAllLabel ? expandAllLabel : null\"\n    collapseAllLabel=\"{{ collapseAllLabel }}\"\n    [isToggleExpanded]=\"isExpanded\"\n    [hasLabels]=\"hasLabels\"\n    attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-ux-tree-toolbar>\n\n<div class=\"eui-u-flex\" *ngIf=\"hasSelectAll || hasSelectAllFiltered\">\n    <input\n        type=\"checkbox\"\n        class=\"ux-input__checkbox\"\n        id=\"selectAll\"\n        [checked]=\"isMinimumOneSelected ? 'checked' : null\"\n        (change)=\"onSelectAllChange($event)\" />\n    <label\n        class=\"ux-tree__node-checkbox-label\"\n        [class.checkbox-label-indeterminate]=\"isMinimumOneSelected && !isAllSelected\"\n        for=\"selectAll\"\n        [class.ux-tree__node-checkbox-label--onelevel]=\"checkForChildren()\">\n        <ng-container *ngIf=\"!allSelected && !isMinimumOneSelected && !isAllSelected\">\n            {{ 'eui.uxtree.SELECT-ALL' | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"allSelected || isMinimumOneSelected || isAllSelected\">\n            {{ 'eui.uxtree.UNSELECT-ALL' | translate }}\n        </ng-container>\n    </label>\n</div>\n<ng-container *ngIf=\"nodes.length > 500 && !hasSelectAll && !hasSelectAllFiltered; else noVirtualScroll\">\n    <cdk-virtual-scroll-viewport\n        #virtualScrolling\n        itemSize=\"30\"\n        class=\"ux-tree__virtual-scrolling__container\"\n        minBufferPx=\"2000\"\n        maxBufferPx=\"2400\">\n        <div *cdkVirtualFor=\"let node of visibleNodes; trackBy: trackByFn\" class=\"ux-tree__virtual-scrolling__item\">\n            <ul\n                class=\"ux-tree\"\n                [class.ux-tree--hidelines]=\"isHideLines\"\n                [class.ux-tree--multiselect]=\"isMultiselect\"\n                [class.ux-tree--onelevel]=\"checkForChildren()\"\n                attr.data-e2e=\"{{ e2eAttr }}\">\n                <eui-ux-tree-node\n                    [node]=\"node\"\n                    (nodeClick)=\"onNodeClick($event)\"\n                    (nodeToggle)=\"onNodeToggle($event)\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    [isRootNode]=\"true\"\n                    [isMultiselect]=\"isMultiselect\"\n                    [isRecursiveSelection]=\"isRecursiveSelection\"\n                    [isClickTogglingNode]=\"isClickTogglingNode\"\n                    expandedIconClass=\"{{ expandedIconClass }}\"\n                    collapsedIconClass=\"{{ collapsedIconClass }}\"\n                    [templateVariable]=\"templateVariable\"\n                    [nodeContentTemplate]=\"nodeContentTemplate\"\n                    [isShowActiveNode]=\"isShowActiveNode\"\n                    [autoTranslate]=\"autoTranslate\"\n                    [isHideToggles]=\"isHideToggles\"\n                    [isClickSelectingNode]=\"isClickSelectingNode\"\n                    [highlightPath]=\"highlightPath\"\n                    [isRecursiveParentSelection]=\"isRecursiveParentSelection\">\n                </eui-ux-tree-node>\n            </ul>\n        </div>\n    </cdk-virtual-scroll-viewport>\n</ng-container>\n\n<ng-template #noVirtualScroll>\n    <ul\n        class=\"ux-tree\"\n        [class.ux-tree--hidelines]=\"isHideLines\"\n        [class.ux-tree--multiselect]=\"isMultiselect\"\n        [class.ux-tree--onelevel]=\"checkForChildren()\"\n        attr.data-e2e=\"{{ e2eAttr }}\">\n        <eui-ux-tree-node\n            *ngFor=\"let node of nodes; trackBy: trackByFn\"\n            [node]=\"node\"\n            (nodeClick)=\"onNodeClick($event)\"\n            (nodeToggle)=\"onNodeToggle($event)\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [isRootNode]=\"true\"\n            [isMultiselect]=\"isMultiselect\"\n            [isRecursiveSelection]=\"isRecursiveSelection\"\n            [isClickTogglingNode]=\"isClickTogglingNode\"\n            expandedIconClass=\"{{ expandedIconClass }}\"\n            collapsedIconClass=\"{{ collapsedIconClass }}\"\n            [templateVariable]=\"templateVariable\"\n            [nodeContentTemplate]=\"nodeContentTemplate\"\n            [isShowActiveNode]=\"isShowActiveNode\"\n            [autoTranslate]=\"autoTranslate\"\n            [isHideToggles]=\"isHideToggles\"\n            [isClickSelectingNode]=\"isClickSelectingNode\"\n            [highlightPath]=\"highlightPath\"\n            [isRecursiveParentSelection]=\"isRecursiveParentSelection\">\n        </eui-ux-tree-node>\n    </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.ux-tree li.ux-tree__node--expandable:before{border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;position:relative;left:4px;bottom:2px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0!important;padding:0!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto;margin-right:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}.ux-a-toolbar-filter{display:flex;padding-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.ux-a-toolbar-filter-content{align-items:center;display:flex;flex-grow:1}.ux-a-toolbar-filter-sub-content{margin-left:auto}.ux-a-toolbar-filter-trigger-wrapper{display:flex;flex-shrink:0}.ux-a-toolbar-filter-trigger{margin-right:var(--eui-base-spacing-xs)}.ux-a-toolbar-filter-trigger.ux-button{border-color:var(--eui-base-color-grey-20)!important;box-shadow:none}.eui-t-compact .ux-a-toolbar-filter-trigger.ux-button.ux-button--outline{padding:8px var(--eui-base-spacing-m)}.ux-a-toolbar-filter-trigger .eui-icon{font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter{margin-right:var(--eui-base-spacing-xs);position:relative;width:100%}.ux-a-toolbar-filter-filter .eui-icon{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter-input{width:100%;width:calc(100% - 36px)!important}.ux-a-toolbar-filter-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{border:1px solid var(--eui-base-color-grey-20);box-shadow:none}.eui-t-compact .ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{padding:8px var(--eui-base-spacing-s)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nodes: [{
@@ -957,8 +957,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             }] } });
 class EuiUxTreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeModule, declarations: [EuiUxTreeComponent, EuiUxTreeNodeComponent, EuiUxTreeToolbarComponent, EuiUxTreeToolbarFilterButtonsTagDirective], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeModule, declarations: [EuiUxTreeComponent, EuiUxTreeNodeComponent, EuiUxTreeToolbarComponent, EuiUxTreeToolbarFilterButtonsTagDirective], imports: [CommonModule,
             FormsModule,
             TranslateModule,
             ScrollingModule,
@@ -967,7 +967,7 @@ class EuiUxTreeModule {
             EuiChipModule,
             EuiInputTextModule,
             EuiInputGroupModule], exports: [EuiUxTreeComponent, EuiUxTreeNodeComponent, EuiUxTreeToolbarComponent, EuiUxTreeToolbarFilterButtonsTagDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeModule, imports: [CommonModule,
             FormsModule,
             TranslateModule,
             ScrollingModule,
@@ -977,7 +977,7 @@ class EuiUxTreeModule {
             EuiInputTextModule,
             EuiInputGroupModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiUxTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiUxTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/eui-components-eui-wizard.mjs CHANGED Viewed

@@ -75,10 +75,10 @@ class EuiWizardStepComponent {
             url: this.url,
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiWizardStepComponent, selector: "eui-wizard-step", inputs: { id: "id", indexLabel: "indexLabel", indexIconClass: "indexIconClass", indexIconSvgName: "indexIconSvgName", label: "label", subLabel: "subLabel", index: "index", url: "url", isCompleted: "isCompleted", isActive: "isActive", isShowStepTitle: "isShowStepTitle", isInvalid: "isInvalid", isWarning: "isWarning", isDisabled: "isDisabled" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-base-color-grey-20);display:flex;margin:var(--eui-base-spacing-xl) 0 -1px 0;padding-bottom:var(--eui-base-spacing-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-base-spacing-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__current-marker-icon>svg{color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);height:var(--eui-base-spacing-4xl);width:var(--eui-base-spacing-4xl)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-base-color-grey-25);content:\"\";margin-bottom:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-80);border-radius:100%;height:var(--eui-base-spacing-3xl);margin:-40px auto 0;padding-top:var(--eui-base-spacing-xs);width:var(--eui-base-spacing-3xl)}.eui-t-compact .eui-wizard-step__bullet-item{margin-top:-30px}.eui-wizard-step__bullet-item-icon,.eui-wizard-step__bullet-item-icon .eui-wizard-step__icon{font-size:var(--eui-base-font-size-3xl)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-base-spacing-m)}.eui-wizard-step__label-wrapper-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-base-spacing-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-primary-75)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-success-110);border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-success-110)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-success-120)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-success-110)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-danger-100)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-danger-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-warning-140)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-warning-140)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-90)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-grey-25)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-grey-80)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-base-color-accent-110);border-radius:50%}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiWizardStepComponent, selector: "eui-wizard-step", inputs: { id: "id", indexLabel: "indexLabel", indexIconClass: "indexIconClass", indexIconSvgName: "indexIconSvgName", label: "label", subLabel: "subLabel", index: "index", url: "url", isCompleted: "isCompleted", isActive: "isActive", isShowStepTitle: "isShowStepTitle", isInvalid: "isInvalid", isWarning: "isWarning", isDisabled: "isDisabled" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-base-color-grey-20);display:flex;margin:var(--eui-base-spacing-xl) 0 -1px 0;padding-bottom:var(--eui-base-spacing-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-base-spacing-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__current-marker-icon>svg{color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);height:var(--eui-base-spacing-4xl);width:var(--eui-base-spacing-4xl)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-base-color-grey-25);content:\"\";margin-bottom:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-80);border-radius:100%;height:var(--eui-base-spacing-3xl);margin:-40px auto 0;padding-top:var(--eui-base-spacing-xs);width:var(--eui-base-spacing-3xl)}.eui-t-compact .eui-wizard-step__bullet-item{margin-top:-30px}.eui-wizard-step__bullet-item-icon,.eui-wizard-step__bullet-item-icon .eui-wizard-step__icon{font-size:var(--eui-base-font-size-3xl)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-base-spacing-m)}.eui-wizard-step__label-wrapper-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-base-spacing-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-primary-75)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-success-110);border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-success-110)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-success-120)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-success-110)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-danger-100)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-danger-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-warning-140)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-warning-140)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-90)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-grey-25)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-grey-80)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-base-color-accent-110);border-radius:50%}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-wizard-step', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-base-color-grey-20);display:flex;margin:var(--eui-base-spacing-xl) 0 -1px 0;padding-bottom:var(--eui-base-spacing-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-base-spacing-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__current-marker-icon>svg{color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);height:var(--eui-base-spacing-4xl);width:var(--eui-base-spacing-4xl)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-base-color-grey-25);content:\"\";margin-bottom:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-80);border-radius:100%;height:var(--eui-base-spacing-3xl);margin:-40px auto 0;padding-top:var(--eui-base-spacing-xs);width:var(--eui-base-spacing-3xl)}.eui-t-compact .eui-wizard-step__bullet-item{margin-top:-30px}.eui-wizard-step__bullet-item-icon,.eui-wizard-step__bullet-item-icon .eui-wizard-step__icon{font-size:var(--eui-base-font-size-3xl)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-base-spacing-m)}.eui-wizard-step__label-wrapper-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-base-spacing-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-primary-75)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-success-110);border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-success-110)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-success-120)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-success-110)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-danger-100)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-danger-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-warning-140)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-warning-140)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-90)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-grey-25)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-grey-80)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-base-color-accent-110);border-radius:50%}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"] }]
         }], propDecorators: { id: [{
@@ -241,10 +241,10 @@ class EuiWizardComponent {
         }
         return null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiWizardComponent, selector: "eui-wizard", inputs: { activeStepIndex: "activeStepIndex", steps: "steps", tabindex: "tabindex", e2eAttr: "e2eAttr", isCustomContent: "isCustomContent", isShowStepTitle: "isShowStepTitle", isNavigationAllowed: "isNavigationAllowed" }, outputs: { selectStep: "selectStep" }, queries: [{ propertyName: "childrenSteps", predicate: EuiWizardStepComponent }], viewQueries: [{ propertyName: "canBeFocused", predicate: ["canBeFocused"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconClass && !step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <!-- v15 OK-->\n                    <span *ngIf=\"step?.indexIconClass && step?.indexIconClass !== undefined\" role=\"presentation\">\n                        <span class=\"eui-wizard-step__icon eui-icon {{ step?.indexIconClass }}\"></span>\n                    </span>\n\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n\n                <span\n                    *ngIf=\"!step?.indexIconClass && !step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                    role=\"presentation\">\n                    {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n                </span>\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-base-color-grey-20);display:flex;margin:var(--eui-base-spacing-xl) 0 -1px 0;padding-bottom:var(--eui-base-spacing-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-base-spacing-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__current-marker-icon>svg{color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);height:var(--eui-base-spacing-4xl);width:var(--eui-base-spacing-4xl)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-base-color-grey-25);content:\"\";margin-bottom:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-80);border-radius:100%;height:var(--eui-base-spacing-3xl);margin:-40px auto 0;padding-top:var(--eui-base-spacing-xs);width:var(--eui-base-spacing-3xl)}.eui-t-compact .eui-wizard-step__bullet-item{margin-top:-30px}.eui-wizard-step__bullet-item-icon,.eui-wizard-step__bullet-item-icon .eui-wizard-step__icon{font-size:var(--eui-base-font-size-3xl)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-base-spacing-m)}.eui-wizard-step__label-wrapper-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-base-spacing-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-primary-75)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-success-110);border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-success-110)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-success-120)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-success-110)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-danger-100)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-danger-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-warning-140)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-warning-140)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-90)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-grey-25)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-grey-80)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-base-color-accent-110);border-radius:50%}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiWizardComponent, selector: "eui-wizard", inputs: { activeStepIndex: "activeStepIndex", steps: "steps", tabindex: "tabindex", e2eAttr: "e2eAttr", isCustomContent: "isCustomContent", isShowStepTitle: "isShowStepTitle", isNavigationAllowed: "isNavigationAllowed" }, outputs: { selectStep: "selectStep" }, queries: [{ propertyName: "childrenSteps", predicate: EuiWizardStepComponent }], viewQueries: [{ propertyName: "canBeFocused", predicate: ["canBeFocused"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconClass && !step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <!-- v15 OK-->\n                    <span *ngIf=\"step?.indexIconClass && step?.indexIconClass !== undefined\" role=\"presentation\">\n                        <span class=\"eui-wizard-step__icon eui-icon {{ step?.indexIconClass }}\"></span>\n                    </span>\n\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n\n                <span\n                    *ngIf=\"!step?.indexIconClass && !step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                    role=\"presentation\">\n                    {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n                </span>\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-base-color-grey-20);display:flex;margin:var(--eui-base-spacing-xl) 0 -1px 0;padding-bottom:var(--eui-base-spacing-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-base-spacing-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__current-marker-icon>svg{color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);height:var(--eui-base-spacing-4xl);width:var(--eui-base-spacing-4xl)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-base-color-grey-25);content:\"\";margin-bottom:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-80);border-radius:100%;height:var(--eui-base-spacing-3xl);margin:-40px auto 0;padding-top:var(--eui-base-spacing-xs);width:var(--eui-base-spacing-3xl)}.eui-t-compact .eui-wizard-step__bullet-item{margin-top:-30px}.eui-wizard-step__bullet-item-icon,.eui-wizard-step__bullet-item-icon .eui-wizard-step__icon{font-size:var(--eui-base-font-size-3xl)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-base-spacing-m)}.eui-wizard-step__label-wrapper-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-base-spacing-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-primary-75)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-success-110);border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-success-110)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-success-120)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-success-110)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-danger-100)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-danger-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-warning-140)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-warning-140)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-90)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-grey-25)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-grey-80)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-base-color-accent-110);border-radius:50%}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconClass && !step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <!-- v15 OK-->\n                    <span *ngIf=\"step?.indexIconClass && step?.indexIconClass !== undefined\" role=\"presentation\">\n                        <span class=\"eui-wizard-step__icon eui-icon {{ step?.indexIconClass }}\"></span>\n                    </span>\n\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n\n                <span\n                    *ngIf=\"!step?.indexIconClass && !step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                    role=\"presentation\">\n                    {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n                </span>\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-base-color-grey-20);display:flex;margin:var(--eui-base-spacing-xl) 0 -1px 0;padding-bottom:var(--eui-base-spacing-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-base-spacing-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__current-marker-icon>svg{color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);height:var(--eui-base-spacing-4xl);width:var(--eui-base-spacing-4xl)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-base-color-grey-25);content:\"\";margin-bottom:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-80);border-radius:100%;height:var(--eui-base-spacing-3xl);margin:-40px auto 0;padding-top:var(--eui-base-spacing-xs);width:var(--eui-base-spacing-3xl)}.eui-t-compact .eui-wizard-step__bullet-item{margin-top:-30px}.eui-wizard-step__bullet-item-icon,.eui-wizard-step__bullet-item-icon .eui-wizard-step__icon{font-size:var(--eui-base-font-size-3xl)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-base-spacing-m)}.eui-wizard-step__label-wrapper-label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-base-spacing-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-primary-100)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-primary-75)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-success-110);border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-success-110)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-base-color-success-120)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-success-110)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-danger-100)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-danger-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-grey-100)}.eui-wizard-step--warning .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-warning-140)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-base-color-warning-140)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-90)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-base-color-grey-25)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-grey-80)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-base-color-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-base-color-accent-110);border-radius:50%}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"] }]
         }], propDecorators: { activeStepIndex: [{
@@ -338,19 +338,19 @@ class EuiWizardService {
     _navigateToStep(url) {
         this.router.navigate([url], { relativeTo: this.route });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.Router }] });
 class EuiWizardModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardModule, declarations: [EuiWizardStepComponent, EuiWizardComponent], imports: [CommonModule, RouterModule, EuiIconModule], exports: [EuiWizardStepComponent, EuiWizardComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardModule, providers: [EuiWizardService], imports: [CommonModule, RouterModule, EuiIconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardModule, declarations: [EuiWizardStepComponent, EuiWizardComponent], imports: [CommonModule, RouterModule, EuiIconModule], exports: [EuiWizardStepComponent, EuiWizardComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardModule, providers: [EuiWizardService], imports: [CommonModule, RouterModule, EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiWizardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiWizardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, EuiIconModule],

package/fesm2022/eui-components-externals-charts.mjs CHANGED Viewed

@@ -182,10 +182,10 @@ class ChartComponent {
         this.chartObj = new ApexCharts(this.chartElement.nativeElement, options);
         this.render();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: ChartComponent, selector: "eui-apex-chart", inputs: { chart: "chart", annotations: "annotations", colors: "colors", dataLabels: "dataLabels", series: "series", stroke: "stroke", labels: "labels", legend: "legend", markers: "markers", noData: "noData", fill: "fill", tooltip: "tooltip", plotOptions: "plotOptions", responsive: "responsive", xaxis: "xaxis", yaxis: "yaxis", grid: "grid", states: "states", title: "title", subtitle: "subtitle", theme: "theme", forecastDataPoints: "forecastDataPoints", autoUpdateSeries: "autoUpdateSeries", hasTableLegend: "hasTableLegend" }, viewQueries: [{ propertyName: "chartElement", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-apex-chart-wrapper\">\n    <div #chart></div>\n</div>\n\n<div *ngIf=\"chartType === 'pie' && getHasTableLegend\" class=\"chart-legend__container text-center\">\n    <ul class=\"chart-legend\">\n        <li class=\"chart-legend-item\" *ngFor=\"let item of getSeries; let i = index\">\n            <span class=\"chart-legend-item-marker ux-icon ux-icon-fw ux-icon-circle\" [style.color]=\"colors[i]\"></span>\n            <span class=\"chart-legend-item-label\">{{ labels[i] }}</span>\n            <span class=\"chart-legend-item-counter\" *ngIf=\"chartType === 'pie'\">{{ item }}</span>\n        </li>\n    </ul>\n</div>\n", styles: [".eui-apex-chart-wrapper{display:block!important;margin:1rem auto;min-height:10px!important;position:relative;width:100%}.eui-apex-chart-wrapper .apexcharts-canvas{margin:0 auto}.apexcharts-legend-series{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.apexcharts-gridline{pointer-events:none;stroke:#efefef}.apexcharts-legend-text{font-size:13px!important}.apexcharts-pie-label{fill:#fff!important}.apexcharts-yaxis text,.apexcharts-xaxis text{fill:#fff}.apexcharts-point-annotations text,.apexcharts-xaxis-annotations text,.apexcharts-yaxis-annotations text{fill:#fff}.apexcharts-radar-series polygon{fill:transparent}.apexcharts-pie-label,.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value{fill:#fff!important}.chart-legend__container{margin-bottom:var(--eui-base-spacing-l)}.chart-legend__container .chart-legend{display:block;margin:0;padding:0}.chart-legend{background-color:var(--eui-base-color-grey-15);font-size:var(--eui-base-font-size-s);margin:var(--eui-base-spacing-l) 2% 0 2%;padding:var(--eui-base-spacing-xs)}.chart-legend .chart-legend-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-50);display:flex;padding:var(--eui-base-spacing-s)}.chart-legend .chart-legend-item:last-child{border-bottom:none}.chart-legend .chart-legend-item .chart-legend-item-marker{flex:none;margin-right:var(--eui-base-spacing-xs)}.chart-legend .chart-legend-item .chart-legend-item-counter{flex:none;margin-left:auto;padding-left:var(--eui-base-spacing-xs)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: ChartComponent, selector: "eui-apex-chart", inputs: { chart: "chart", annotations: "annotations", colors: "colors", dataLabels: "dataLabels", series: "series", stroke: "stroke", labels: "labels", legend: "legend", markers: "markers", noData: "noData", fill: "fill", tooltip: "tooltip", plotOptions: "plotOptions", responsive: "responsive", xaxis: "xaxis", yaxis: "yaxis", grid: "grid", states: "states", title: "title", subtitle: "subtitle", theme: "theme", forecastDataPoints: "forecastDataPoints", autoUpdateSeries: "autoUpdateSeries", hasTableLegend: "hasTableLegend" }, viewQueries: [{ propertyName: "chartElement", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-apex-chart-wrapper\">\n    <div #chart></div>\n</div>\n\n<div *ngIf=\"chartType === 'pie' && getHasTableLegend\" class=\"chart-legend__container text-center\">\n    <ul class=\"chart-legend\">\n        <li class=\"chart-legend-item\" *ngFor=\"let item of getSeries; let i = index\">\n            <span class=\"chart-legend-item-marker ux-icon ux-icon-fw ux-icon-circle\" [style.color]=\"colors[i]\"></span>\n            <span class=\"chart-legend-item-label\">{{ labels[i] }}</span>\n            <span class=\"chart-legend-item-counter\" *ngIf=\"chartType === 'pie'\">{{ item }}</span>\n        </li>\n    </ul>\n</div>\n", styles: [".eui-apex-chart-wrapper{display:block!important;margin:1rem auto;min-height:10px!important;position:relative;width:100%}.eui-apex-chart-wrapper .apexcharts-canvas{margin:0 auto}.apexcharts-legend-series{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.apexcharts-gridline{pointer-events:none;stroke:#efefef}.apexcharts-legend-text{font-size:13px!important}.apexcharts-pie-label{fill:#fff!important}.apexcharts-yaxis text,.apexcharts-xaxis text{fill:#fff}.apexcharts-point-annotations text,.apexcharts-xaxis-annotations text,.apexcharts-yaxis-annotations text{fill:#fff}.apexcharts-radar-series polygon{fill:transparent}.apexcharts-pie-label,.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value{fill:#fff!important}.chart-legend__container{margin-bottom:var(--eui-base-spacing-l)}.chart-legend__container .chart-legend{display:block;margin:0;padding:0}.chart-legend{background-color:var(--eui-base-color-grey-15);font-size:var(--eui-base-font-size-s);margin:var(--eui-base-spacing-l) 2% 0 2%;padding:var(--eui-base-spacing-xs)}.chart-legend .chart-legend-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-50);display:flex;padding:var(--eui-base-spacing-s)}.chart-legend .chart-legend-item:last-child{border-bottom:none}.chart-legend .chart-legend-item .chart-legend-item-marker{flex:none;margin-right:var(--eui-base-spacing-xs)}.chart-legend .chart-legend-item .chart-legend-item-counter{flex:none;margin-left:auto;padding-left:var(--eui-base-spacing-xs)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-apex-chart', template: "<div class=\"eui-apex-chart-wrapper\">\n    <div #chart></div>\n</div>\n\n<div *ngIf=\"chartType === 'pie' && getHasTableLegend\" class=\"chart-legend__container text-center\">\n    <ul class=\"chart-legend\">\n        <li class=\"chart-legend-item\" *ngFor=\"let item of getSeries; let i = index\">\n            <span class=\"chart-legend-item-marker ux-icon ux-icon-fw ux-icon-circle\" [style.color]=\"colors[i]\"></span>\n            <span class=\"chart-legend-item-label\">{{ labels[i] }}</span>\n            <span class=\"chart-legend-item-counter\" *ngIf=\"chartType === 'pie'\">{{ item }}</span>\n        </li>\n    </ul>\n</div>\n", styles: [".eui-apex-chart-wrapper{display:block!important;margin:1rem auto;min-height:10px!important;position:relative;width:100%}.eui-apex-chart-wrapper .apexcharts-canvas{margin:0 auto}.apexcharts-legend-series{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.apexcharts-gridline{pointer-events:none;stroke:#efefef}.apexcharts-legend-text{font-size:13px!important}.apexcharts-pie-label{fill:#fff!important}.apexcharts-yaxis text,.apexcharts-xaxis text{fill:#fff}.apexcharts-point-annotations text,.apexcharts-xaxis-annotations text,.apexcharts-yaxis-annotations text{fill:#fff}.apexcharts-radar-series polygon{fill:transparent}.apexcharts-pie-label,.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value{fill:#fff!important}.chart-legend__container{margin-bottom:var(--eui-base-spacing-l)}.chart-legend__container .chart-legend{display:block;margin:0;padding:0}.chart-legend{background-color:var(--eui-base-color-grey-15);font-size:var(--eui-base-font-size-s);margin:var(--eui-base-spacing-l) 2% 0 2%;padding:var(--eui-base-spacing-xs)}.chart-legend .chart-legend-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-50);display:flex;padding:var(--eui-base-spacing-s)}.chart-legend .chart-legend-item:last-child{border-bottom:none}.chart-legend .chart-legend-item .chart-legend-item-marker{flex:none;margin-right:var(--eui-base-spacing-xs)}.chart-legend .chart-legend-item .chart-legend-item-counter{flex:none;margin-left:auto;padding-left:var(--eui-base-spacing-xs)}\n"] }]
         }], propDecorators: { chart: [{
@@ -244,11 +244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
 window.ApexCharts = ApexCharts;
 const COMPONENTS = [ChartComponent];
 class EuiChartsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiChartsModule, declarations: [ChartComponent], imports: [CommonModule], exports: [ChartComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiChartsModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiChartsModule, declarations: [ChartComponent], imports: [CommonModule], exports: [ChartComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiChartsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiChartsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiChartsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],