@eui/components 17.0.0-rc.3 → 17.0.0-rc.5

package/fesm2022/eui-components-eui-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-components-eui-alert.mjs","sources":["../../eui-alert/eui-alert.component.ts","../../eui-alert/eui-alert.component.html","../../eui-alert/eui-components-eui-alert.ts"],"sourcesContent":["import {\n    NgModule,\n    Component,\n    HostBinding,\n    EventEmitter,\n    Input,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    AfterContentInit,\n    Output,\n    OnChanges,\n    OnInit,\n    Directive,\n    ContentChild,\n    forwardRef,\n    QueryList,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BooleanInput } from '@angular/cdk/coercion';\n\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { EuiLabelModule } from '@eui/components/eui-label';\nimport { coerceBoolean } from '@eui/base';\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/* eslint-disable */\n@Directive({selector: 'eui-alert-title'})\nexport class EuiAlertTitleDirective {\n    @HostBinding('class') class = 'eui-alert__title';\n}\n/* eslint-enable */\n\n@Component({\n    templateUrl: './eui-alert.component.html',\n    selector: 'div[euiAlert], eui-alert',\n    styleUrls: ['./styles/_index.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: ['euiSecondary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiVariant'],\n        },\n    ],\n})\nexport class EuiAlertComponent implements OnInit, OnChanges, AfterContentInit {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-alert';\n\n    @Input()\n    @coerceBoolean\n    isMuted: BooleanInput = false;\n    @Input()\n    @coerceBoolean\n    isCloseable: BooleanInput = false;\n    @Input() @coerceBoolean isFocusable: BooleanInput = false;\n\n    @Output() closeAlert = new EventEmitter<null>();\n\n    @ContentChild(forwardRef(() => EuiAlertTitleDirective), { static: false }) alertTitle: QueryList<EuiAlertTitleDirective>;\n\n    isVisible = true;\n    alertIconType: string;\n    alertIconFillColor: string;\n    randomStringId: string;\n\n    constructor(public baseStatesDirective: BaseStatesDirective) {}\n\n    ngOnInit(): void {\n        if (!this.baseStatesDirective.euiVariant) {\n            this.baseStatesDirective.euiInfo = true;\n        }\n        this.randomStringId = this.generateUniqueId();\n    }\n\n    ngOnChanges(): void {\n        this.setIcon();\n    }\n\n    ngAfterContentInit(): void {\n        this.setIcon();\n    }\n\n    onCloseClick(): void {\n        this.isVisible = false;\n        this.closeAlert.emit();\n    }\n\n    private getCssClasses(): string {\n        return [\n            this.baseStatesDirective.getCssClasses('eui-alert'),\n            this.isMuted ? 'eui-alert--muted' : '',\n            !this.isVisible ? 'eui-alert--hidden' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    private setIcon(): void {\n        this.alertIconType = 'eui-ecl-information';\n        this.alertIconFillColor = 'info-100';\n\n        if (this.baseStatesDirective.euiWarning) {\n            this.alertIconType = 'eui-ecl-warning';\n            this.alertIconFillColor = 'warning-100';\n        }\n        if (this.baseStatesDirective.euiDanger) {\n            this.alertIconType = 'eui-ecl-error';\n            this.alertIconFillColor = 'danger-100';\n        }\n        if (this.baseStatesDirective.euiSuccess) {\n            this.alertIconType = 'eui-ecl-check-filled';\n            this.alertIconFillColor = 'success-100';\n        }\n        if (this.baseStatesDirective.euiSecondary) {\n            this.alertIconType = 'help-circle:sharp';\n            this.alertIconFillColor = 'grey-100';\n        }\n    }\n\n    private generateUniqueId(): string {\n        const dateStr = Date.now().toString(36);\n        const randomStr = Math.random().toString(36).substring(2, 8);   // start at index 2 to skip decimal point\n        return `${dateStr}-${randomStr}`;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, TranslateModule, EuiIconModule, EuiLabelModule, EuiButtonModule],\n    declarations: [EuiAlertComponent, EuiAlertTitleDirective],\n    exports: [EuiAlertComponent, EuiAlertTitleDirective],\n})\nexport class EuiAlertModule {}\n","<div class=\"eui-alert__content-wrapper\" role=\"alert\" [tabindex]=\"isFocusable ? '0' : '-1'\" [attr.aria-describedby]=\"'alertContent-' + randomStringId\">\n    <div class=\"eui-alert__type-container\" *ngIf=\"!isMuted\">\n        <eui-icon-svg class=\"eui-alert__icon-type\" icon=\"{{ alertIconType }}\" fillColor=\"{{ alertIconFillColor }}\"></eui-icon-svg>\n    </div>\n    <div id=\"alertContent-{{ randomStringId }}\" class=\"eui-alert__content\">\n        <ng-container *ngIf=\"alertTitle; else alertNoTitle\">\n            <ng-template *ngTemplateOutlet=\"contentWithTitle\"></ng-template>\n        </ng-container>\n        <ng-template #alertNoTitle>\n            <ng-template *ngTemplateOutlet=\"contentNoTitle\"></ng-template>\n        </ng-template>\n    </div>\n</div>\n\n<ng-template #contentWithTitle>\n    <div class=\"eui-alert__content-header eui-alert__content-header--with-title\">\n        <ng-content select=\"eui-alert-title\"></ng-content>\n        <ng-template *ngTemplateOutlet=\"closeButton\"></ng-template>\n    </div>\n    <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n</ng-template>\n\n<ng-template #contentNoTitle>\n    <div class=\"eui-alert__content-header\">\n        <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n        <ng-template *ngTemplateOutlet=\"closeButton\"></ng-template>\n    </div>\n</ng-template>\n\n<ng-template #closeButton>\n    <div class=\"eui-alert__close\">\n        <button *ngIf=\"isCloseable\"\n                euiButton\n                euiBasicButton\n                euiPrimary\n                euiSizeS\n                aria-label=\"Close alert button\"\n                class=\"eui-u-ml-s\"\n                (click)=\"onCloseClick()\">\n            <span euiLabel class=\"eui-u-display-hidden-mobile\">{{ 'eui.CLOSE' | translate }}</span>\n            <eui-icon-svg icon=\"eui-ecl-close\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #content>\n    <div class=\"eui-u-display-block\" [class.eui-u-mt-xs]=\"alertTitle\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-components-eui-alert.mjs","sources":["../../eui-alert/eui-alert.component.ts","../../eui-alert/eui-alert.component.html","../../eui-alert/eui-components-eui-alert.ts"],"sourcesContent":["import {\n    NgModule,\n    Component,\n    HostBinding,\n    EventEmitter,\n    Input,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    AfterContentInit,\n    Output,\n    OnChanges,\n    OnInit,\n    Directive,\n    ContentChild,\n    forwardRef,\n    QueryList,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BooleanInput } from '@angular/cdk/coercion';\n\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { EuiLabelModule } from '@eui/components/eui-label';\nimport { coerceBoolean } from '@eui/base';\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/* eslint-disable */\n@Directive({selector: 'eui-alert-title'})\nexport class EuiAlertTitleDirective {\n    @HostBinding('class') class = 'eui-alert__title';\n}\n/* eslint-enable */\n\n@Component({\n    templateUrl: './eui-alert.component.html',\n    selector: 'div[euiAlert], eui-alert',\n    styleUrls: ['./styles/_index.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: ['euiSecondary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiVariant'],\n        },\n    ],\n})\nexport class EuiAlertComponent implements OnInit, OnChanges, AfterContentInit {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-alert';\n\n    @Input()\n    @coerceBoolean\n    isMuted: BooleanInput = false;\n    @Input()\n    @coerceBoolean\n    isCloseable: BooleanInput = false;\n    @Input()\n    @coerceBoolean\n    isFocusable: BooleanInput = false;\n\n    @Output() closeAlert = new EventEmitter<null>();\n\n    @ContentChild(forwardRef(() => EuiAlertTitleDirective), { static: false }) alertTitle: QueryList<EuiAlertTitleDirective>;\n\n    isVisible = true;\n    alertIconType: string;\n    alertIconFillColor: string;\n    randomStringId: string;\n\n    constructor(public baseStatesDirective: BaseStatesDirective) {}\n\n    ngOnInit(): void {\n        if (!this.baseStatesDirective.euiVariant) {\n            this.baseStatesDirective.euiInfo = true;\n        }\n        this.randomStringId = this.generateUniqueId();\n    }\n\n    ngOnChanges(): void {\n        this.setIcon();\n    }\n\n    ngAfterContentInit(): void {\n        this.setIcon();\n    }\n\n    onCloseClick(): void {\n        this.isVisible = false;\n        this.closeAlert.emit();\n    }\n\n    private getCssClasses(): string {\n        return [\n            this.baseStatesDirective.getCssClasses('eui-alert'),\n            this.isMuted ? 'eui-alert--muted' : '',\n            this.isFocusable ? 'eui-alert--focusable': '',\n            !this.isVisible ? 'eui-alert--hidden' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    private setIcon(): void {\n        this.alertIconType = 'eui-ecl-information';\n        this.alertIconFillColor = 'info-100';\n\n        if (this.baseStatesDirective.euiWarning) {\n            this.alertIconType = 'eui-ecl-warning';\n            this.alertIconFillColor = 'warning-100';\n        }\n        if (this.baseStatesDirective.euiDanger) {\n            this.alertIconType = 'eui-ecl-error';\n            this.alertIconFillColor = 'danger-100';\n        }\n        if (this.baseStatesDirective.euiSuccess) {\n            this.alertIconType = 'eui-ecl-check-filled';\n            this.alertIconFillColor = 'success-100';\n        }\n        if (this.baseStatesDirective.euiSecondary) {\n            this.alertIconType = 'help-circle:sharp';\n            this.alertIconFillColor = 'grey-100';\n        }\n    }\n\n    private generateUniqueId(): string {\n        const dateStr = Date.now().toString(36);\n        const randomStr = Math.random().toString(36).substring(2, 8);   // start at index 2 to skip decimal point\n        return `${dateStr}-${randomStr}`;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, TranslateModule, EuiIconModule, EuiLabelModule, EuiButtonModule],\n    declarations: [EuiAlertComponent, EuiAlertTitleDirective],\n    exports: [EuiAlertComponent, EuiAlertTitleDirective],\n})\nexport class EuiAlertModule {}\n","<div class=\"eui-alert__content-wrapper\" role=\"alert\" [tabindex]=\"isFocusable ? '0' : '-1'\" [attr.aria-describedby]=\"'alertContent-' + randomStringId\">\n    <div class=\"eui-alert__type-container\" *ngIf=\"!isMuted\">\n        <eui-icon-svg class=\"eui-alert__icon-type\" icon=\"{{ alertIconType }}\" fillColor=\"{{ alertIconFillColor }}\"></eui-icon-svg>\n    </div>\n    <div id=\"alertContent-{{ randomStringId }}\" class=\"eui-alert__content\">\n        <ng-container *ngIf=\"alertTitle; else alertNoTitle\">\n            <ng-template *ngTemplateOutlet=\"contentWithTitle\"></ng-template>\n        </ng-container>\n        <ng-template #alertNoTitle>\n            <ng-template *ngTemplateOutlet=\"contentNoTitle\"></ng-template>\n        </ng-template>\n    </div>\n</div>\n\n<ng-template #contentWithTitle>\n    <div class=\"eui-alert__content-header eui-alert__content-header--with-title\">\n        <ng-content select=\"eui-alert-title\"></ng-content>\n        <ng-template *ngTemplateOutlet=\"closeButton\"></ng-template>\n    </div>\n    <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n</ng-template>\n\n<ng-template #contentNoTitle>\n    <div class=\"eui-alert__content-header\">\n        <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n        <ng-template *ngTemplateOutlet=\"closeButton\"></ng-template>\n    </div>\n</ng-template>\n\n<ng-template #closeButton>\n    <div class=\"eui-alert__close\">\n        <button *ngIf=\"isCloseable\"\n                euiButton\n                euiBasicButton\n                euiPrimary\n                euiSizeS\n                aria-label=\"Close alert button\"\n                class=\"eui-u-ml-s\"\n                (click)=\"onCloseClick()\">\n            <span euiLabel class=\"eui-u-display-hidden-mobile\">{{ 'eui.CLOSE' | translate }}</span>\n            <eui-icon-svg icon=\"eui-ecl-close\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #content>\n    <div class=\"eui-u-display-block\" [class.eui-u-mt-xs]=\"alertTitle\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-components-eui-skeleton.mjs

@@ -29,7 +29,7 @@ class EuiSkeletonComponent {
             .trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSkeletonComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSkeletonComponent, selector: "eui-skeleton", inputs: { circle: "circle", line: "line", square: "square", rectangle: "rectangle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: '', isInline: true, styles: [".eui-skeleton{display:inline-flex;animation:fading 2s infinite}.eui-skeleton--circle{border-radius:50%;height:3rem;width:3rem}.eui-skeleton--line{display:block;height:var(--eui-base-spacing-m);width:100%}.eui-skeleton--square{height:3rem;width:3rem}.eui-skeleton--rectangle{height:var(--eui-base-spacing-xl);width:100%}@keyframes fading{0%{background-color:#a5a5a51a}50%{background-color:#a5a5a54d}to{background-color:#a5a5a51a}}.eui-skeleton--size-xs.eui-skeleton--line,.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-skeleton--size-xs.eui-skeleton--circle,.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-skeleton--size-s.eui-skeleton--line,.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-skeleton--size-s.eui-skeleton--circle,.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-skeleton--size-m.eui-skeleton--line,.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-skeleton--size-m.eui-skeleton--circle,.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-skeleton--size-l.eui-skeleton--line,.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-skeleton--size-l.eui-skeleton--circle,.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-skeleton--size-xl.eui-skeleton--line,.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-skeleton--size-xl.eui-skeleton--circle,.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSkeletonComponent, selector: "eui-skeleton", inputs: { circle: "circle", line: "line", square: "square", rectangle: "rectangle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiRounded", "euiRounded", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: '', isInline: true, styles: [".eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-base-color-grey-15);overflow:hidden}.eui-skeleton:after{content:\"\";animation:skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}.eui-skeleton--circle{border-radius:50%;height:3rem;width:3rem}.eui-skeleton--line{display:block;height:var(--eui-base-spacing-m);width:100%}.eui-skeleton--square{height:3rem;width:3rem}.eui-skeleton--rectangle{height:var(--eui-base-spacing-xl);width:100%}.eui-skeleton--rounded{border-radius:var(--eui-base-spacing-m)}@keyframes skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.eui-skeleton--size-xs.eui-skeleton--line,.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-skeleton--size-xs.eui-skeleton--circle,.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-skeleton--size-s.eui-skeleton--line,.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-skeleton--size-s.eui-skeleton--circle,.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-skeleton--size-m.eui-skeleton--line,.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-skeleton--size-m.eui-skeleton--circle,.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-skeleton--size-l.eui-skeleton--line,.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-skeleton--size-l.eui-skeleton--circle,.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-skeleton--size-xl.eui-skeleton--line,.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-skeleton--size-xl.eui-skeleton--circle,.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
@@ -54,10 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                                 'euiSizeM',
                                 'euiSizeL',
                                 'euiSizeXL',
+                                'euiRounded',
                                 'euiSizeVariant',
                             ],
                         },
-                    ], styles: [".eui-skeleton{display:inline-flex;animation:fading 2s infinite}.eui-skeleton--circle{border-radius:50%;height:3rem;width:3rem}.eui-skeleton--line{display:block;height:var(--eui-base-spacing-m);width:100%}.eui-skeleton--square{height:3rem;width:3rem}.eui-skeleton--rectangle{height:var(--eui-base-spacing-xl);width:100%}@keyframes fading{0%{background-color:#a5a5a51a}50%{background-color:#a5a5a54d}to{background-color:#a5a5a51a}}.eui-skeleton--size-xs.eui-skeleton--line,.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-skeleton--size-xs.eui-skeleton--circle,.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-skeleton--size-s.eui-skeleton--line,.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-skeleton--size-s.eui-skeleton--circle,.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-skeleton--size-m.eui-skeleton--line,.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-skeleton--size-m.eui-skeleton--circle,.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-skeleton--size-l.eui-skeleton--line,.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-skeleton--size-l.eui-skeleton--circle,.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-skeleton--size-xl.eui-skeleton--line,.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-skeleton--size-xl.eui-skeleton--circle,.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"] }]
+                    ], styles: [".eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-base-color-grey-15);overflow:hidden}.eui-skeleton:after{content:\"\";animation:skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}.eui-skeleton--circle{border-radius:50%;height:3rem;width:3rem}.eui-skeleton--line{display:block;height:var(--eui-base-spacing-m);width:100%}.eui-skeleton--square{height:3rem;width:3rem}.eui-skeleton--rectangle{height:var(--eui-base-spacing-xl);width:100%}.eui-skeleton--rounded{border-radius:var(--eui-base-spacing-m)}@keyframes skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.eui-skeleton--size-xs.eui-skeleton--line,.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-skeleton--size-xs.eui-skeleton--circle,.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-skeleton--size-s.eui-skeleton--line,.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-skeleton--size-s.eui-skeleton--circle,.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-skeleton--size-m.eui-skeleton--line,.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-skeleton--size-m.eui-skeleton--circle,.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-skeleton--size-l.eui-skeleton--line,.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-skeleton--size-l.eui-skeleton--circle,.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-skeleton--size-xl.eui-skeleton--line,.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-skeleton--size-xl.eui-skeleton--circle,.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/eui-components-eui-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-components-eui-skeleton.mjs","sources":["../../eui-skeleton/eui-skeleton.component.ts","../../eui-skeleton/eui-skeleton.module.ts","../../eui-skeleton/eui-components-eui-skeleton.ts"],"sourcesContent":["import {\n    // NgModule,\n    Component,\n    HostBinding,\n    // EventEmitter,\n    Input,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    // Output,\n    OnInit,\n} from '@angular/core';\nimport { BooleanInput } from '@angular/cdk/coercion';\n\n// eUI imports\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { coerceBoolean } from '@eui/base';\n\n@Component({\n    template: '',\n    selector: 'eui-skeleton',\n    styleUrl: './styles/_index.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: [\n                'euiSizeXS',\n                'euiSizeS',\n                'euiSizeM',\n                'euiSizeL',\n                'euiSizeXL',\n                'euiSizeVariant',\n            ],\n        },\n    ],\n})\nexport class EuiSkeletonComponent {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n\n    @Input() @coerceBoolean circle: BooleanInput = false;\n    @Input() @coerceBoolean line: BooleanInput = false;\n    @Input() @coerceBoolean square: BooleanInput = false;\n    @Input() @coerceBoolean rectangle: BooleanInput = false;\n\n    constructor(\n        public baseStatesDirective: BaseStatesDirective,\n    ) {}\n\n    private getCssClasses(): string {\n        return [\n            this.baseStatesDirective.getCssClasses('eui-skeleton'),\n            this.circle ? 'eui-skeleton--circle': '',\n            this.line ? 'eui-skeleton--line': '',\n            this.square ? 'eui-skeleton--square': '',\n            this.rectangle ? 'eui-skeleton--rectangle': '',\n\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { EuiSkeletonComponent } from './eui-skeleton.component';\n\nconst COMPONENTS = [EuiSkeletonComponent];\n\n@NgModule({\n    imports: [\n        CommonModule,\n    ],\n    declarations: [...COMPONENTS],\n    exports: [...COMPONENTS],\n})\nexport class EuiSkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-components-eui-skeleton.mjs","sources":["../../eui-skeleton/eui-skeleton.component.ts","../../eui-skeleton/eui-skeleton.module.ts","../../eui-skeleton/eui-components-eui-skeleton.ts"],"sourcesContent":["import {\n    // NgModule,\n    Component,\n    HostBinding,\n    // EventEmitter,\n    Input,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    // Output,\n    OnInit,\n} from '@angular/core';\nimport { BooleanInput } from '@angular/cdk/coercion';\n\n// eUI imports\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { coerceBoolean } from '@eui/base';\n\n@Component({\n    template: '',\n    selector: 'eui-skeleton',\n    styleUrl: './styles/_index.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: [\n                'euiSizeXS',\n                'euiSizeS',\n                'euiSizeM',\n                'euiSizeL',\n                'euiSizeXL',\n                'euiRounded',\n                'euiSizeVariant',\n            ],\n        },\n    ],\n})\nexport class EuiSkeletonComponent {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n\n    @Input() @coerceBoolean circle: BooleanInput = false;\n    @Input() @coerceBoolean line: BooleanInput = false;\n    @Input() @coerceBoolean square: BooleanInput = false;\n    @Input() @coerceBoolean rectangle: BooleanInput = false;\n\n    constructor(\n        public baseStatesDirective: BaseStatesDirective,\n    ) {}\n\n    private getCssClasses(): string {\n        return [\n            this.baseStatesDirective.getCssClasses('eui-skeleton'),\n            this.circle ? 'eui-skeleton--circle': '',\n            this.line ? 'eui-skeleton--line': '',\n            this.square ? 'eui-skeleton--square': '',\n            this.rectangle ? 'eui-skeleton--rectangle': '',\n\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { EuiSkeletonComponent } from './eui-skeleton.component';\n\nconst COMPONENTS = [EuiSkeletonComponent];\n\n@NgModule({\n    imports: [\n        CommonModule,\n    ],\n    declarations: [...COMPONENTS],\n    exports: [...COMPONENTS],\n})\nexport class EuiSkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -897,11 +897,11 @@ class EuiTreeComponent {
         return scrolled.getElementRef().nativeElement === this.cdkScrollableRef.getElementRef().nativeElement;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isSingleSelect: "isSingleSelect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", showUnderlinedLinks: "showUnderlinedLinks", showLines: "showLines", autoTranslate: "autoTranslate", highlightPath: "highlightPath" }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        *ngIf=\"renderTree\"\n        class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    (click)=\"onNodeClick(treeRunTimeItemModel)\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines && _isMultiLevel\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"\n                    highlightPath\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link\"\n                    [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                aria-label=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%;overflow-y:auto}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-2xs)}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i7.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: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isSingleSelect: "isSingleSelect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", showUnderlinedLinks: "showUnderlinedLinks", showLines: "showLines", autoTranslate: "autoTranslate", highlightPath: "highlightPath" }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        *ngIf=\"renderTree\"\n        class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    (click)=\"onNodeClick(treeRunTimeItemModel)\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines && _isMultiLevel\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"\n                    highlightPath\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link\"\n                    [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                aria-label=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%;overflow-y:auto}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child:before{content:\"\";border-left:1px solid var(--eui-base-color-grey-25);margin:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-m) var(--eui-base-spacing-s)}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-m));margin-right:calc(.5 * var(--eui-base-spacing-m))}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i7.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: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        *ngIf=\"renderTree\"\n        class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    (click)=\"onNodeClick(treeRunTimeItemModel)\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines && _isMultiLevel\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"\n                    highlightPath\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link\"\n                    [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                aria-label=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%;overflow-y:auto}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-2xs)}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\n"] }]
+            args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        *ngIf=\"renderTree\"\n        class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    (click)=\"onNodeClick(treeRunTimeItemModel)\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines && _isMultiLevel\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"\n                    highlightPath\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link\"\n                    [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                aria-label=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%;overflow-y:auto}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child:before{content:\"\";border-left:1px solid var(--eui-base-color-grey-25);margin:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-m) var(--eui-base-spacing-s)}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-m));margin-right:calc(.5 * var(--eui-base-spacing-m))}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']