npm - @eui/components - Versions diffs - 17.0.0-rc.3 → 17.0.0-rc.5 - Mend

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

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

Files changed (26) hide show

package/docs/components/EuiSearchComponent.html +101 -3
package/docs/components/EuiSkeletonComponent.html +1 -1
package/docs/components/EuiToolbarComponent.html +1 -1
package/docs/dependencies.html +2 -2
package/docs/js/menu-wc.js +6 -6
package/docs/js/menu-wc_es5.js +1 -1
package/docs/js/search/search_index.js +2 -2
package/esm2022/eui-alert/eui-alert.component.mjs +4 -3
package/esm2022/eui-skeleton/eui-skeleton.component.mjs +4 -3
package/esm2022/eui-tree/eui-tree.component.mjs +2 -2
package/esm2022/layout/eui-search/search.component.mjs +13 -5
package/esm2022/layout/eui-toolbar/toolbar.component.mjs +3 -3
package/eui-alert/eui-alert.component.d.ts.map +1 -1
package/eui-skeleton/eui-skeleton.component.d.ts +1 -1
package/eui-skeleton/eui-skeleton.component.d.ts.map +1 -1
package/fesm2022/eui-components-eui-alert.mjs +3 -2
package/fesm2022/eui-components-eui-alert.mjs.map +1 -1
package/fesm2022/eui-components-eui-skeleton.mjs +3 -2
package/fesm2022/eui-components-eui-skeleton.mjs.map +1 -1
package/fesm2022/eui-components-eui-tree.mjs +2 -2
package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
package/fesm2022/eui-components-layout.mjs +14 -6
package/fesm2022/eui-components-layout.mjs.map +1 -1
package/layout/eui-search/search.component.d.ts +5 -3
package/layout/eui-search/search.component.d.ts.map +1 -1
package/package.json +1 -1

package/esm2022/eui-alert/eui-alert.component.mjs CHANGED Viewed

@@ -63,6 +63,7 @@ export class EuiAlertComponent {
         return [
             this.baseStatesDirective.getCssClasses('eui-alert'),
             this.isMuted ? 'eui-alert--muted' : '',
+            this.isFocusable ? 'eui-alert--focusable' : '',
             !this.isVisible ? 'eui-alert--hidden' : '',
         ]
             .join(' ')
@@ -94,7 +95,7 @@ export class EuiAlertComponent {
         return `${dateStr}-${randomStr}`;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiAlertComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: { e2eAttr: "e2eAttr", isMuted: "isMuted", isCloseable: "isCloseable", isFocusable: "isFocusable" }, outputs: { closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "alertTitle", first: true, predicate: i0.forwardRef(() => EuiAlertTitleDirective), descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<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", styles: [".eui-alert{--_border-color: var(--eui-alert-border-color, var(--eui-base-color-info-100));--_color: var(--eui-alert-color, var(--eui-base-color-info-130));--_bg-color: var(--eui-alert-type-container-bg-color, var(--eui-base-color-info-10))}.eui-alert{display:flex;background-color:var(--_bg-color);background-position:var(--eui-base-spacing-s);background-repeat:no-repeat;position:relative;border-left:var(--eui-base-spacing-2xs) solid var(--_border-color);border-radius:var(--eui-base-border-radius)}.eui-alert__type-container{align-items:center;display:flex;margin-right:var(--eui-base-spacing-s);height:var(--eui-base-spacing-l)}.eui-alert__content{display:flex;flex-direction:column;width:100%}.eui-alert__content-header{align-items:center;display:flex;flex:1 1 100%;justify-content:space-between;width:100%}.eui-alert__content-header--with-title{min-height:var(--eui-base-spacing-l)}.eui-alert__title{color:var(--_color);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-alert__content-wrapper{display:flex;flex-basis:auto;flex-shrink:1;overflow:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-alert__content-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-alert__content-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-alert__content-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-alert__content-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-alert__content-wrapper:active:not([readonly]),.eui-alert__content-wrapper:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-alert__content-wrapper [tabindex=\"0\"]:active:not([readonly]),.eui-alert__content-wrapper [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-alert__close{align-self:flex-start;display:flex;margin-left:auto}.eui-alert__close:hover{text-decoration:underline}.eui-alert--info{--_border-color: var(--eui-base-color-info-100);--_bg-color: var(--eui-base-color-info-10);--_color: var(--eui-base-color-info-130)}.eui-alert--success{--_border-color: var(--eui-base-color-success-100);--_bg-color: var(--eui-base-color-success-10);--_color: var(--eui-base-color-success-130)}.eui-alert--danger{--_border-color: var(--eui-base-color-danger-100);--_bg-color: var(--eui-base-color-danger-10);--_color: var(--eui-base-color-danger-130)}.eui-alert--warning{--_border-color: var(--eui-base-color-warning-100);--_bg-color: var(--eui-base-color-warning-10);--_color: var(--eui-base-color-warning-140)}.eui-alert--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "pipe", type: i6.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: EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: { e2eAttr: "e2eAttr", isMuted: "isMuted", isCloseable: "isCloseable", isFocusable: "isFocusable" }, outputs: { closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "alertTitle", first: true, predicate: i0.forwardRef(() => EuiAlertTitleDirective), descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<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", styles: [".eui-alert{--_border-color: var(--eui-alert-border-color, var(--eui-base-color-info-100));--_color: var(--eui-alert-color, var(--eui-base-color-info-130));--_bg-color: var(--eui-alert-type-container-bg-color, var(--eui-base-color-info-10))}.eui-alert{display:flex;background-color:var(--_bg-color);background-position:var(--eui-base-spacing-s);background-repeat:no-repeat;position:relative;border-left:var(--eui-base-spacing-2xs) solid var(--_border-color);border-radius:var(--eui-base-border-radius)}.eui-alert__type-container{align-items:center;display:flex;margin-right:var(--eui-base-spacing-s);height:var(--eui-base-spacing-l)}.eui-alert__content{display:flex;flex-direction:column;width:100%}.eui-alert__content-header{align-items:center;display:flex;flex:1 1 100%;justify-content:space-between;width:100%}.eui-alert__content-header--with-title{min-height:var(--eui-base-spacing-l)}.eui-alert__title{color:var(--_color);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-alert__content-wrapper{display:flex;flex-basis:auto;flex-shrink:1;overflow:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-alert__content-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-alert__content-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-alert__content-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-alert__content-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-alert__close{align-self:flex-start;display:flex;margin-left:auto}.eui-alert__close:hover{text-decoration:underline}.eui-alert--info{--_border-color: var(--eui-base-color-info-100);--_bg-color: var(--eui-base-color-info-10);--_color: var(--eui-base-color-info-130)}.eui-alert--success{--_border-color: var(--eui-base-color-success-100);--_bg-color: var(--eui-base-color-success-10);--_color: var(--eui-base-color-success-130)}.eui-alert--danger{--_border-color: var(--eui-base-color-danger-100);--_bg-color: var(--eui-base-color-danger-10);--_color: var(--eui-base-color-danger-130)}.eui-alert--warning{--_border-color: var(--eui-base-color-warning-100);--_bg-color: var(--eui-base-color-warning-10);--_color: var(--eui-base-color-warning-140)}.eui-alert--hidden{display:none}.eui-alert--focusable:active:not([readonly]),.eui-alert--focusable:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-alert--focusable [tabindex=\"0\"]:active:not([readonly]),.eui-alert--focusable [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
@@ -112,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             directive: BaseStatesDirective,
                             inputs: ['euiSecondary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiVariant'],
                         },
-                    ], template: "<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", styles: [".eui-alert{--_border-color: var(--eui-alert-border-color, var(--eui-base-color-info-100));--_color: var(--eui-alert-color, var(--eui-base-color-info-130));--_bg-color: var(--eui-alert-type-container-bg-color, var(--eui-base-color-info-10))}.eui-alert{display:flex;background-color:var(--_bg-color);background-position:var(--eui-base-spacing-s);background-repeat:no-repeat;position:relative;border-left:var(--eui-base-spacing-2xs) solid var(--_border-color);border-radius:var(--eui-base-border-radius)}.eui-alert__type-container{align-items:center;display:flex;margin-right:var(--eui-base-spacing-s);height:var(--eui-base-spacing-l)}.eui-alert__content{display:flex;flex-direction:column;width:100%}.eui-alert__content-header{align-items:center;display:flex;flex:1 1 100%;justify-content:space-between;width:100%}.eui-alert__content-header--with-title{min-height:var(--eui-base-spacing-l)}.eui-alert__title{color:var(--_color);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-alert__content-wrapper{display:flex;flex-basis:auto;flex-shrink:1;overflow:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-alert__content-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-alert__content-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-alert__content-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-alert__content-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-alert__content-wrapper:active:not([readonly]),.eui-alert__content-wrapper:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-alert__content-wrapper [tabindex=\"0\"]:active:not([readonly]),.eui-alert__content-wrapper [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-alert__close{align-self:flex-start;display:flex;margin-left:auto}.eui-alert__close:hover{text-decoration:underline}.eui-alert--info{--_border-color: var(--eui-base-color-info-100);--_bg-color: var(--eui-base-color-info-10);--_color: var(--eui-base-color-info-130)}.eui-alert--success{--_border-color: var(--eui-base-color-success-100);--_bg-color: var(--eui-base-color-success-10);--_color: var(--eui-base-color-success-130)}.eui-alert--danger{--_border-color: var(--eui-base-color-danger-100);--_bg-color: var(--eui-base-color-danger-10);--_color: var(--eui-base-color-danger-130)}.eui-alert--warning{--_border-color: var(--eui-base-color-warning-100);--_bg-color: var(--eui-base-color-warning-10);--_color: var(--eui-base-color-warning-140)}.eui-alert--hidden{display:none}\n"] }]
+                    ], template: "<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", styles: [".eui-alert{--_border-color: var(--eui-alert-border-color, var(--eui-base-color-info-100));--_color: var(--eui-alert-color, var(--eui-base-color-info-130));--_bg-color: var(--eui-alert-type-container-bg-color, var(--eui-base-color-info-10))}.eui-alert{display:flex;background-color:var(--_bg-color);background-position:var(--eui-base-spacing-s);background-repeat:no-repeat;position:relative;border-left:var(--eui-base-spacing-2xs) solid var(--_border-color);border-radius:var(--eui-base-border-radius)}.eui-alert__type-container{align-items:center;display:flex;margin-right:var(--eui-base-spacing-s);height:var(--eui-base-spacing-l)}.eui-alert__content{display:flex;flex-direction:column;width:100%}.eui-alert__content-header{align-items:center;display:flex;flex:1 1 100%;justify-content:space-between;width:100%}.eui-alert__content-header--with-title{min-height:var(--eui-base-spacing-l)}.eui-alert__title{color:var(--_color);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-alert__content-wrapper{display:flex;flex-basis:auto;flex-shrink:1;overflow:auto;padding:var(--eui-base-spacing-m);width:100%}.eui-alert__content-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-alert__content-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-alert__content-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-alert__content-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-alert__close{align-self:flex-start;display:flex;margin-left:auto}.eui-alert__close:hover{text-decoration:underline}.eui-alert--info{--_border-color: var(--eui-base-color-info-100);--_bg-color: var(--eui-base-color-info-10);--_color: var(--eui-base-color-info-130)}.eui-alert--success{--_border-color: var(--eui-base-color-success-100);--_bg-color: var(--eui-base-color-success-10);--_color: var(--eui-base-color-success-130)}.eui-alert--danger{--_border-color: var(--eui-base-color-danger-100);--_bg-color: var(--eui-base-color-danger-10);--_color: var(--eui-base-color-danger-130)}.eui-alert--warning{--_border-color: var(--eui-base-color-warning-100);--_bg-color: var(--eui-base-color-warning-10);--_color: var(--eui-base-color-warning-140)}.eui-alert--hidden{display:none}.eui-alert--focusable:active:not([readonly]),.eui-alert--focusable:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-alert--focusable [tabindex=\"0\"]:active:not([readonly]),.eui-alert--focusable [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -146,4 +147,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                     exports: [EuiAlertComponent, EuiAlertTitleDirective],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLWFsZXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2V1aS1hbGVydC9ldWktYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZXVpLWFsZXJ0L2V1aS1hbGVydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNILFFBQVEsRUFDUixTQUFTLEVBQ1QsV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUVqQixNQUFNLEVBR04sU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEdBRWIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7OztBQUV0RCxvQkFBb0I7QUFFcEIsTUFBTSxPQUFPLHNCQUFzQjtJQURuQztRQUUwQixVQUFLLEdBQUcsa0JBQWtCLENBQUM7S0FDcEQ7aUlBRlksc0JBQXNCO3FIQUF0QixzQkFBc0I7OzJGQUF0QixzQkFBc0I7a0JBRGxDLFNBQVM7bUJBQUMsRUFBQyxRQUFRLEVBQUUsaUJBQWlCLEVBQUM7OEJBRWQsS0FBSztzQkFBMUIsV0FBVzt1QkFBQyxPQUFPOztBQUV4QixtQkFBbUI7QUFlbkIsTUFBTSxPQUFPLGlCQUFpQjtJQUMxQixJQUNXLFVBQVU7UUFDakIsT0FB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QUFDLGlCQUFpQixFQUFFLHNCQUFzQixDQUFDO29CQUN6RCxPQUFPLEVBQUUsQ0FBQyxpQkFBaUIsRUFBRSxzQkFBc0IsQ0FBQztpQkFDdkQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIE5nTW9kdWxlLFxuICAgIENvbXBvbmVudCxcbiAgICBIb3N0QmluZGluZyxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgSW5wdXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG4gICAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgICBPdXRwdXQsXG4gICAgT25DaGFuZ2VzLFxuICAgIE9uSW5pdCxcbiAgICBEaXJlY3RpdmUsXG4gICAgQ29udGVudENoaWxkLFxuICAgIGZvcndhcmRSZWYsXG4gICAgUXVlcnlMaXN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBCb29sZWFuSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG5pbXBvcnQgeyBFdWlJY29uTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1pY29uJztcbmltcG9ydCB7IEJhc2VTdGF0ZXNEaXJlY3RpdmUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvc2hhcmVkJztcbmltcG9ydCB7IEV1aUxhYmVsTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1sYWJlbCc7XG5pbXBvcnQgeyBjb2VyY2VCb29sZWFuIH0gZnJvbSAnQGV1aS9iYXNlJztcbmltcG9ydCB7IEV1aUJ1dHRvbk1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktYnV0dG9uJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuXG4vKiBlc2xpbnQtZGlzYWJsZSAqL1xuQERpcmVjdGl2ZSh7c2VsZWN0b3I6ICdldWktYWxlcnQtdGl0bGUnfSlcbmV4cG9ydCBjbGFzcyBFdWlBbGVydFRpdGxlRGlyZWN0aXZlIHtcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgY2xhc3MgPSAnZXVpLWFsZXJ0X190aXRsZSc7XG59XG4vKiBlc2xpbnQtZW5hYmxlICovXG5cbkBDb21wb25lbnQoe1xuICAgIHRlbXBsYXRlVXJsOiAnLi9ldWktYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHNlbGVjdG9yOiAnZGl2W2V1aUFsZXJ0XSwgZXVpLWFsZXJ0JyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMvX2luZGV4LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIGRpcmVjdGl2ZTogQmFzZVN0YXRlc0RpcmVjdGl2ZSxcbiAgICAgICAgICAgIGlucHV0czogWydldWlTZWNvbmRhcnknLCAnZXVpU3VjY2VzcycsICdldWlJbmZvJywgJ2V1aVdhcm5pbmcnLCAnZXVpRGFuZ2VyJywgJ2V1aVZhcmlhbnQnXSxcbiAgICAgICAgfSxcbiAgICBdLFxufSlcbmV4cG9ydCBjbGFzcyBFdWlBbGVydENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBBZnRlckNvbnRlbnRJbml0IHtcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgICBwdWJsaWMgZ2V0IGNzc0NsYXNzZXMoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZ2V0Q3NzQ2xhc3NlcygpO1xuICAgIH1cbiAgICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1lMmUnKVxuICAgIEBJbnB1dCgpXG4gICAgZTJlQXR0ciA9ICdldWktYWxlcnQnO1xuXG4gICAgQElucHV0KClcbiAgICBAY29lcmNlQm9vbGVhblxuICAgIGlzTXV0ZWQ6IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpXG4gICAgQGNvZXJjZUJvb2xlYW5cbiAgICBpc0Nsb3NlYWJsZTogQm9vbGVhbklucHV0ID0gZmFsc2U7XG4gICAgQElucHV0KCkgQGNvZXJjZUJvb2xlYW4gaXNGb2N1c2FibGU6IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuXG4gICAgQE91dHB1dCgpIGNsb3NlQWxlcnQgPSBuZXcgRXZlbnRFbWl0dGVyPG51bGw+KCk7XG5cbiAgICBAQ29udGVudENoaWxkKGZvcndhcmRSZWYoKCkgPT4gRXVpQWxlcnRUaXRsZURpcmVjdGl2ZSksIHsgc3RhdGljOiBmYWxzZSB9KSBhbGVydFRpdGxlOiBRdWVyeUxpc3Q8RXVpQWxlcnRUaXRsZURpcmVjdGl2ZT47XG5cbiAgICBpc1Zpc2libGUgPSB0cnVlO1xuICAgIGFsZXJ0SWNvblR5cGU6IHN0cmluZztcbiAgICBhbGVydEljb25GaWxsQ29sb3I6IHN0cmluZztcbiAgICByYW5kb21TdHJpbmdJZDogc3RyaW5nO1xuXG4gICAgY29uc3RydWN0b3IocHVibGljIGJhc2VTdGF0ZXNEaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUpIHt9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZXVpVmFyaWFudCkge1xuICAgICAgICAgICAgdGhpcy5iYXNlU3RhdGVzRGlyZWN0aXZlLmV1aUluZm8gPSB0cnVlO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMucmFuZG9tU3RyaW5nSWQgPSB0aGlzLmdlbmVyYXRlVW5pcXVlSWQoKTtcbiAgICB9XG5cbiAgICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZXRJY29uKCk7XG4gICAgfVxuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNldEljb24oKTtcbiAgICB9XG5cbiAgICBvbkNsb3NlQ2xpY2soKTogdm9pZCB7XG4gICAgICAgIHRoaXMuaXNWaXNpYmxlID0gZmFsc2U7XG4gICAgICAgIHRoaXMuY2xvc2VBbGVydC5lbWl0KCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXRDc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZ2V0Q3NzQ2xhc3NlcygnZXVpLWFsZXJ0JyksXG4gICAgICAgICAgICB0aGlzLmlzTXV0ZWQgPyAnZXVpLWFsZXJ0LS1tdXRlZCcgOiAnJyxcbiAgICAgICAgICAgICF0aGlzLmlzVmlzaWJsZSA/ICdldWktYWxlcnQtLWhpZGRlbicgOiAnJyxcbiAgICAgICAgXVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICAgICAgLnRyaW0oKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHNldEljb24oKTogdm9pZCB7XG4gICAgICAgIHRoaXMuYWxlcnRJY29uVHlwZSA9ICdldWktZWNsLWluZm9ybWF0aW9uJztcbiAgICAgICAgdGhpcy5hbGVydEljb25GaWxsQ29sb3IgPSAnaW5mby0xMDAnO1xuXG4gICAgICAgIGlmICh0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZXVpV2FybmluZykge1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25UeXBlID0gJ2V1aS1lY2wtd2FybmluZyc7XG4gICAgICAgICAgICB0aGlzLmFsZXJ0SWNvbkZpbGxDb2xvciA9ICd3YXJuaW5nLTEwMCc7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKHRoaXMuYmFzZVN0YXRlc0RpcmVjdGl2ZS5ldWlEYW5nZXIpIHtcbiAgICAgICAgICAgIHRoaXMuYWxlcnRJY29uVHlwZSA9ICdldWktZWNsLWVycm9yJztcbiAgICAgICAgICAgIHRoaXMuYWxlcnRJY29uRmlsbENvbG9yID0gJ2Rhbmdlci0xMDAnO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZXVpU3VjY2Vzcykge1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25UeXBlID0gJ2V1aS1lY2wtY2hlY2stZmlsbGVkJztcbiAgICAgICAgICAgIHRoaXMuYWxlcnRJY29uRmlsbENvbG9yID0gJ3N1Y2Nlc3MtMTAwJztcbiAgICAgICAgfVxuICAgICAgICBpZiAodGhpcy5iYXNlU3RhdGVzRGlyZWN0aXZlLmV1aVNlY29uZGFyeSkge1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25UeXBlID0gJ2hlbHAtY2lyY2xlOnNoYXJwJztcbiAgICAgICAgICAgIHRoaXMuYWxlcnRJY29uRmlsbENvbG9yID0gJ2dyZXktMTAwJztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHByaXZhdGUgZ2VuZXJhdGVVbmlxdWVJZCgpOiBzdHJpbmcge1xuICAgICAgICBjb25zdCBkYXRlU3RyID0gRGF0ZS5ub3coKS50b1N0cmluZygzNik7XG4gICAgICAgIGNvbnN0IHJhbmRvbVN0ciA9IE1hdGgucmFuZG9tKCkudG9TdHJpbmcoMzYpLnN1YnN0cmluZygyLCA4KTsgICAvLyBzdGFydCBhdCBpbmRleCAyIHRvIHNraXAgZGVjaW1hbCBwb2ludFxuICAgICAgICByZXR1cm4gYCR7ZGF0ZVN0cn0tJHtyYW5kb21TdHJ9YDtcbiAgICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gICAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgVHJhbnNsYXRlTW9kdWxlLCBFdWlJY29uTW9kdWxlLCBFdWlMYWJlbE1vZHVsZSwgRXVpQnV0dG9uTW9kdWxlXSxcbiAgICBkZWNsYXJhdGlvbnM6IFtFdWlBbGVydENvbXBvbmVudCwgRXVpQWxlcnRUaXRsZURpcmVjdGl2ZV0sXG4gICAgZXhwb3J0czogW0V1aUFsZXJ0Q29tcG9uZW50LCBFdWlBbGVydFRpdGxlRGlyZWN0aXZlXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpQWxlcnRNb2R1bGUge31cbiIsIjxkaXYgY2xhc3M9XCJldWktYWxlcnRfX2NvbnRlbnQtd3JhcHBlclwiIHJvbGU9XCJhbGVydFwiIFt0YWJpbmRleF09XCJpc0ZvY3VzYWJsZSA/ICcwJyA6ICctMSdcIiBbYXR0ci5hcmlhLWRlc2NyaWJlZGJ5XT1cIidhbGVydENvbnRlbnQtJyArIHJhbmRvbVN0cmluZ0lkXCI+XG4gICAgPGRpdiBjbGFzcz1cImV1aS1hbGVydF9fdHlwZS1jb250YWluZXJcIiAqbmdJZj1cIiFpc011dGVkXCI+XG4gICAgICAgIDxldWktaWNvbi1zdmcgY2xhc3M9XCJldWktYWxlcnRfX2ljb24tdHlwZVwiIGljb249XCJ7eyBhbGVydEljb25UeXBlIH19XCIgZmlsbENvbG9yPVwie3sgYWxlcnRJY29uRmlsbENvbG9yIH19XCI+PC9ldWktaWNvbi1zdmc+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBpZD1cImFsZXJ0Q29udGVudC17eyByYW5kb21TdHJpbmdJZCB9fVwiIGNsYXNzPVwiZXVpLWFsZXJ0X19jb250ZW50XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhbGVydFRpdGxlOyBlbHNlIGFsZXJ0Tm9UaXRsZVwiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFdpdGhUaXRsZVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctdGVtcGxhdGUgI2FsZXJ0Tm9UaXRsZT5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnROb1RpdGxlXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2NvbnRlbnRXaXRoVGl0bGU+XG4gICAgPGRpdiBjbGFzcz1cImV1aS1hbGVydF9fY29udGVudC1oZWFkZXIgZXVpLWFsZXJ0X19jb250ZW50LWhlYWRlci0td2l0aC10aXRsZVwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJldWktYWxlcnQtdGl0bGVcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cImNsb3NlQnV0dG9uXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICA8L2Rpdj5cbiAgICA8bmctdGVtcGxhdGUgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy10ZW1wbGF0ZT5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY29udGVudE5vVGl0bGU+XG4gICAgPGRpdiBjbGFzcz1cImV1aS1hbGVydF9fY29udGVudC1oZWFkZXJcIj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cImNsb3NlQnV0dG9uXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY2xvc2VCdXR0b24+XG4gICAgPGRpdiBjbGFzcz1cImV1aS1hbGVydF9fY2xvc2VcIj5cbiAgICAgICAgPGJ1dHRvbiAqbmdJZj1cImlzQ2xvc2VhYmxlXCJcbiAgICAgICAgICAgICAgICBldWlCdXR0b25cbiAgICAgICAgICAgICAgICBldWlCYXNpY0J1dHRvblxuICAgICAgICAgICAgICAgIGV1aVByaW1hcnlcbiAgICAgICAgICAgICAgICBldWlTaXplU1xuICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJDbG9zZSBhbGVydCBidXR0b25cIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwiZXVpLXUtbWwtc1wiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xvc2VDbGljaygpXCI+XG4gICAgICAgICAgICA8c3BhbiBldWlMYWJlbCBjbGFzcz1cImV1aS11LWRpc3BsYXktaGlkZGVuLW1vYmlsZVwiPnt7ICdldWkuQ0xPU0UnIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICAgICAgICAgICAgPGV1aS1pY29uLXN2ZyBpY29uPVwiZXVpLWVjbC1jbG9zZVwiIGNsYXNzPVwiZXVpLXUtbWwteHNcIj48L2V1aS1pY29uLXN2Zz5cbiAgICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2NvbnRlbnQ+XG4gICAgPGRpdiBjbGFzcz1cImV1aS11LWRpc3BsYXktYmxvY2tcIiBbY2xhc3MuZXVpLXUtbXQteHNdPVwiYWxlcnRUaXRsZVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLWFsZXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2V1aS1hbGVydC9ldWktYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZXVpLWFsZXJ0L2V1aS1hbGVydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNILFFBQVEsRUFDUixTQUFTLEVBQ1QsV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUVqQixNQUFNLEVBR04sU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEdBRWIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7OztBQUV0RCxvQkFBb0I7QUFFcEIsTUFBTSxPQUFPLHNCQUFzQjtJQURuQztRQUUwQixVQUFLLEdBQUcsa0JBQWtCLENBQUM7S0FDcEQ7aUlBRlksc0JBQXNCO3FIQUF0QixzQkFBc0I7OzJGQUF0QixzQkFBc0I7a0JBRGxDLFNBQVM7bUJBQUMsRUFBQyxRQUFRLEVBQUUsaUJBQWlCLEVBQUM7OEJBRWQsS0FBSztzQkFBMUIsV0FBVzt1QkFBQyxPQUFPOztBQUV4QixtQkFBbUI7QUFlbkIsTUFBTSxPQUFPLGlCQUFpQjtJQUMxQixJQUNXLFVBQVU7UUFDakIsT0FB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LEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBRSxjQUFjLEVBQUUsZUFBZSxDQUFDO29CQUN4RixZQUFZLEVBQUUsQ0FBQyxpQkFBaUIsRUFBRSxzQkFBc0IsQ0FBQztvQkFDekQsT0FBTyxFQUFFLENBQUMsaUJBQWlCLEVBQUUsc0JBQXNCLENBQUM7aUJBQ3ZEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBOZ01vZHVsZSxcbiAgICBDb21wb25lbnQsXG4gICAgSG9zdEJpbmRpbmcsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIElucHV0LFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgIEFmdGVyQ29udGVudEluaXQsXG4gICAgT3V0cHV0LFxuICAgIE9uQ2hhbmdlcyxcbiAgICBPbkluaXQsXG4gICAgRGlyZWN0aXZlLFxuICAgIENvbnRlbnRDaGlsZCxcbiAgICBmb3J3YXJkUmVmLFxuICAgIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcblxuaW1wb3J0IHsgRXVpSWNvbk1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktaWNvbic7XG5pbXBvcnQgeyBCYXNlU3RhdGVzRGlyZWN0aXZlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL3NoYXJlZCc7XG5pbXBvcnQgeyBFdWlMYWJlbE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktbGFiZWwnO1xuaW1wb3J0IHsgY29lcmNlQm9vbGVhbiB9IGZyb20gJ0BldWkvYmFzZSc7XG5pbXBvcnQgeyBFdWlCdXR0b25Nb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWJ1dHRvbic7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcblxuLyogZXNsaW50LWRpc2FibGUgKi9cbkBEaXJlY3RpdmUoe3NlbGVjdG9yOiAnZXVpLWFsZXJ0LXRpdGxlJ30pXG5leHBvcnQgY2xhc3MgRXVpQWxlcnRUaXRsZURpcmVjdGl2ZSB7XG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGNsYXNzID0gJ2V1aS1hbGVydF9fdGl0bGUnO1xufVxuLyogZXNsaW50LWVuYWJsZSAqL1xuXG5AQ29tcG9uZW50KHtcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXVpLWFsZXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgICBzZWxlY3RvcjogJ2RpdltldWlBbGVydF0sIGV1aS1hbGVydCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3R5bGVzL19pbmRleC5zY3NzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBkaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUsXG4gICAgICAgICAgICBpbnB1dHM6IFsnZXVpU2Vjb25kYXJ5JywgJ2V1aVN1Y2Nlc3MnLCAnZXVpSW5mbycsICdldWlXYXJuaW5nJywgJ2V1aURhbmdlcicsICdldWlWYXJpYW50J10sXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpQWxlcnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgQWZ0ZXJDb250ZW50SW5pdCB7XG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gICAgcHVibGljIGdldCBjc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLmdldENzc0NsYXNzZXMoKTtcbiAgICB9XG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtZTJlJylcbiAgICBASW5wdXQoKVxuICAgIGUyZUF0dHIgPSAnZXVpLWFsZXJ0JztcblxuICAgIEBJbnB1dCgpXG4gICAgQGNvZXJjZUJvb2xlYW5cbiAgICBpc011dGVkOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcbiAgICBASW5wdXQoKVxuICAgIEBjb2VyY2VCb29sZWFuXG4gICAgaXNDbG9zZWFibGU6IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpXG4gICAgQGNvZXJjZUJvb2xlYW5cbiAgICBpc0ZvY3VzYWJsZTogQm9vbGVhbklucHV0ID0gZmFsc2U7XG5cbiAgICBAT3V0cHV0KCkgY2xvc2VBbGVydCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVsbD4oKTtcblxuICAgIEBDb250ZW50Q2hpbGQoZm9yd2FyZFJlZigoKSA9PiBFdWlBbGVydFRpdGxlRGlyZWN0aXZlKSwgeyBzdGF0aWM6IGZhbHNlIH0pIGFsZXJ0VGl0bGU6IFF1ZXJ5TGlzdDxFdWlBbGVydFRpdGxlRGlyZWN0aXZlPjtcblxuICAgIGlzVmlzaWJsZSA9IHRydWU7XG4gICAgYWxlcnRJY29uVHlwZTogc3RyaW5nO1xuICAgIGFsZXJ0SWNvbkZpbGxDb2xvcjogc3RyaW5nO1xuICAgIHJhbmRvbVN0cmluZ0lkOiBzdHJpbmc7XG5cbiAgICBjb25zdHJ1Y3RvcihwdWJsaWMgYmFzZVN0YXRlc0RpcmVjdGl2ZTogQmFzZVN0YXRlc0RpcmVjdGl2ZSkge31cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuYmFzZVN0YXRlc0RpcmVjdGl2ZS5ldWlWYXJpYW50KSB7XG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZXVpSW5mbyA9IHRydWU7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5yYW5kb21TdHJpbmdJZCA9IHRoaXMuZ2VuZXJhdGVVbmlxdWVJZCgpO1xuICAgIH1cblxuICAgIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNldEljb24oKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2V0SWNvbigpO1xuICAgIH1cblxuICAgIG9uQ2xvc2VDbGljaygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc1Zpc2libGUgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5jbG9zZUFsZXJ0LmVtaXQoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGdldENzc0NsYXNzZXMoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIFtcbiAgICAgICAgICAgIHRoaXMuYmFzZVN0YXRlc0RpcmVjdGl2ZS5nZXRDc3NDbGFzc2VzKCdldWktYWxlcnQnKSxcbiAgICAgICAgICAgIHRoaXMuaXNNdXRlZCA/ICdldWktYWxlcnQtLW11dGVkJyA6ICcnLFxuICAgICAgICAgICAgdGhpcy5pc0ZvY3VzYWJsZSA/ICdldWktYWxlcnQtLWZvY3VzYWJsZSc6ICcnLFxuICAgICAgICAgICAgIXRoaXMuaXNWaXNpYmxlID8gJ2V1aS1hbGVydC0taGlkZGVuJyA6ICcnLFxuICAgICAgICBdXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgICAgICAudHJpbSgpO1xuICAgIH1cblxuICAgIHByaXZhdGUgc2V0SWNvbigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5hbGVydEljb25UeXBlID0gJ2V1aS1lY2wtaW5mb3JtYXRpb24nO1xuICAgICAgICB0aGlzLmFsZXJ0SWNvbkZpbGxDb2xvciA9ICdpbmZvLTEwMCc7XG5cbiAgICAgICAgaWYgKHRoaXMuYmFzZVN0YXRlc0RpcmVjdGl2ZS5ldWlXYXJuaW5nKSB7XG4gICAgICAgICAgICB0aGlzLmFsZXJ0SWNvblR5cGUgPSAnZXVpLWVjbC13YXJuaW5nJztcbiAgICAgICAgICAgIHRoaXMuYWxlcnRJY29uRmlsbENvbG9yID0gJ3dhcm5pbmctMTAwJztcbiAgICAgICAgfVxuICAgICAgICBpZiAodGhpcy5iYXNlU3RhdGVzRGlyZWN0aXZlLmV1aURhbmdlcikge1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25UeXBlID0gJ2V1aS1lY2wtZXJyb3InO1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25GaWxsQ29sb3IgPSAnZGFuZ2VyLTEwMCc7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKHRoaXMuYmFzZVN0YXRlc0RpcmVjdGl2ZS5ldWlTdWNjZXNzKSB7XG4gICAgICAgICAgICB0aGlzLmFsZXJ0SWNvblR5cGUgPSAnZXVpLWVjbC1jaGVjay1maWxsZWQnO1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25GaWxsQ29sb3IgPSAnc3VjY2Vzcy0xMDAnO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZXVpU2Vjb25kYXJ5KSB7XG4gICAgICAgICAgICB0aGlzLmFsZXJ0SWNvblR5cGUgPSAnaGVscC1jaXJjbGU6c2hhcnAnO1xuICAgICAgICAgICAgdGhpcy5hbGVydEljb25GaWxsQ29sb3IgPSAnZ3JleS0xMDAnO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZW5lcmF0ZVVuaXF1ZUlkKCk6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IGRhdGVTdHIgPSBEYXRlLm5vdygpLnRvU3RyaW5nKDM2KTtcbiAgICAgICAgY29uc3QgcmFuZG9tU3RyID0gTWF0aC5yYW5kb20oKS50b1N0cmluZygzNikuc3Vic3RyaW5nKDIsIDgpOyAgIC8vIHN0YXJ0IGF0IGluZGV4IDIgdG8gc2tpcCBkZWNpbWFsIHBvaW50XG4gICAgICAgIHJldHVybiBgJHtkYXRlU3RyfS0ke3JhbmRvbVN0cn1gO1xuICAgIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBUcmFuc2xhdGVNb2R1bGUsIEV1aUljb25Nb2R1bGUsIEV1aUxhYmVsTW9kdWxlLCBFdWlCdXR0b25Nb2R1bGVdLFxuICAgIGRlY2xhcmF0aW9uczogW0V1aUFsZXJ0Q29tcG9uZW50LCBFdWlBbGVydFRpdGxlRGlyZWN0aXZlXSxcbiAgICBleHBvcnRzOiBbRXVpQWxlcnRDb21wb25lbnQsIEV1aUFsZXJ0VGl0bGVEaXJlY3RpdmVdLFxufSlcbmV4cG9ydCBjbGFzcyBFdWlBbGVydE1vZHVsZSB7fVxuIiwiPGRpdiBjbGFzcz1cImV1aS1hbGVydF9fY29udGVudC13cmFwcGVyXCIgcm9sZT1cImFsZXJ0XCIgW3RhYmluZGV4XT1cImlzRm9jdXNhYmxlID8gJzAnIDogJy0xJ1wiIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiJ2FsZXJ0Q29udGVudC0nICsgcmFuZG9tU3RyaW5nSWRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZXVpLWFsZXJ0X190eXBlLWNvbnRhaW5lclwiICpuZ0lmPVwiIWlzTXV0ZWRcIj5cbiAgICAgICAgPGV1aS1pY29uLXN2ZyBjbGFzcz1cImV1aS1hbGVydF9faWNvbi10eXBlXCIgaWNvbj1cInt7IGFsZXJ0SWNvblR5cGUgfX1cIiBmaWxsQ29sb3I9XCJ7eyBhbGVydEljb25GaWxsQ29sb3IgfX1cIj48L2V1aS1pY29uLXN2Zz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGlkPVwiYWxlcnRDb250ZW50LXt7IHJhbmRvbVN0cmluZ0lkIH19XCIgY2xhc3M9XCJldWktYWxlcnRfX2NvbnRlbnRcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImFsZXJ0VGl0bGU7IGVsc2UgYWxlcnROb1RpdGxlXCI+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50V2l0aFRpdGxlXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjYWxlcnROb1RpdGxlPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudE5vVGl0bGVcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuPC9kaXY+XG5cbjxuZy10ZW1wbGF0ZSAjY29udGVudFdpdGhUaXRsZT5cbiAgICA8ZGl2IGNsYXNzPVwiZXVpLWFsZXJ0X19jb250ZW50LWhlYWRlciBldWktYWxlcnRfX2NvbnRlbnQtaGVhZGVyLS13aXRoLXRpdGxlXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImV1aS1hbGVydC10aXRsZVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2xvc2VCdXR0b25cIj48L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICAgIDxuZy10ZW1wbGF0ZSAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLXRlbXBsYXRlPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNjb250ZW50Tm9UaXRsZT5cbiAgICA8ZGl2IGNsYXNzPVwiZXVpLWFsZXJ0X19jb250ZW50LWhlYWRlclwiPlxuICAgICAgICA8bmctdGVtcGxhdGUgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2xvc2VCdXR0b25cIj48L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNjbG9zZUJ1dHRvbj5cbiAgICA8ZGl2IGNsYXNzPVwiZXVpLWFsZXJ0X19jbG9zZVwiPlxuICAgICAgICA8YnV0dG9uICpuZ0lmPVwiaXNDbG9zZWFibGVcIlxuICAgICAgICAgICAgICAgIGV1aUJ1dHRvblxuICAgICAgICAgICAgICAgIGV1aUJhc2ljQnV0dG9uXG4gICAgICAgICAgICAgICAgZXVpUHJpbWFyeVxuICAgICAgICAgICAgICAgIGV1aVNpemVTXG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cIkNsb3NlIGFsZXJ0IGJ1dHRvblwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJldWktdS1tbC1zXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbG9zZUNsaWNrKClcIj5cbiAgICAgICAgICAgIDxzcGFuIGV1aUxhYmVsIGNsYXNzPVwiZXVpLXUtZGlzcGxheS1oaWRkZW4tbW9iaWxlXCI+e3sgJ2V1aS5DTE9TRScgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gICAgICAgICAgICA8ZXVpLWljb24tc3ZnIGljb249XCJldWktZWNsLWNsb3NlXCIgY2xhc3M9XCJldWktdS1tbC14c1wiPjwvZXVpLWljb24tc3ZnPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgICA8ZGl2IGNsYXNzPVwiZXVpLXUtZGlzcGxheS1ibG9ja1wiIFtjbGFzcy5ldWktdS1tdC14c109XCJhbGVydFRpdGxlXCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

package/esm2022/eui-skeleton/eui-skeleton.component.mjs CHANGED Viewed

@@ -32,7 +32,7 @@ export 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
@@ -57,10 +57,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']
@@ -73,4 +74,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }], rectangle: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLXNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2V1aS1za2VsZXRvbi9ldWktc2tlbGV0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPO0FBQ0gsWUFBWTtBQUNaLFNBQVMsRUFDVCxXQUFXO0FBQ1gsZ0JBQWdCO0FBQ2hCLEtBQUssRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEdBR3BCLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLGNBQWM7QUFDZCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sV0FBVyxDQUFDOzs7QUFzQjFDLE1BQU0sT0FBTyxvQkFBb0I7SUFDN0IsSUFDVyxVQUFVO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ2hDLENBQUM7SUFPRCxZQUNXLG1CQUF3QztRQUF4Qyx3QkFBbUIsR0FBbkIsbUJBQW1CLENBQXFCO1FBTjNCLFdBQU0sR0FBaUIsS0FBSyxDQUFDO1FBQzdCLFNBQUksR0FBaUIsS0FBSyxDQUFDO1FBQzNCLFdBQU0sR0FBaUIsS0FBSyxDQUFDO1FBQzdCLGNBQVMsR0FBaUIsS0FBSyxDQUFDO0lBSXJELENBQUM7SUFFSSxhQUFhO1FBQ2pCLE9BQU87WUFDSCxJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQztZQUN0RCxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtZQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtZQUNwQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtZQUN4QyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyx5QkFBeUIsQ0FBQSxDQUFDLENBQUMsRUFBRTtTQUVqRDthQUNJLElBQUksQ0FBQyxHQUFHLENBQUM7YUFDVCxJQUFJLEVBQUUsQ0FBQztJQUNoQixDQUFDO2lJQTFCUSxvQkFBb0I7cUhBQXBCLG9CQUFvQixtYUFuQm5CLEVBQUU7O0FBeUJZO0lBQWQsYUFBYTtvREFBOEI7QUFDN0I7SUFBZCxhQUFhO2tEQUE0QjtBQUMzQjtJQUFkLGFBQWE7b0RBQThCO0FBQzdCO0lBQWQsYUFBYTt1REFBaUM7MkZBVC9DLG9CQUFvQjtrQkFwQmhDLFNBQVM7K0JBQ0ksRUFBRSxZQUNGLGNBQWMsbUJBRVAsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxrQkFDckI7d0JBQ1o7NEJBQ0ksU0FBUyxFQUFFLG1CQUFtQjs0QkFDOUIsTUFBTSxFQUFFO2dDQUNKLFdBQVc7Z0NBQ1gsVUFBVTtnQ0FDVixVQUFVO2dDQUNWLFVBQVU7Z0NBQ1YsV0FBVztnQ0FDWCxnQkFBZ0I7NkJBQ25CO3lCQUNKO3FCQUNKO3dGQUlVLFVBQVU7c0JBRHBCLFdBQVc7dUJBQUMsT0FBTztnQkFLSSxNQUFNO3NCQUE3QixLQUFLO2dCQUNrQixJQUFJO3NCQUEzQixLQUFLO2dCQUNrQixNQUFNO3NCQUE3QixLQUFLO2dCQUNrQixTQUFTO3NCQUFoQyxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICAvLyBOZ01vZHVsZSxcbiAgICBDb21wb25lbnQsXG4gICAgSG9zdEJpbmRpbmcsXG4gICAgLy8gRXZlbnRFbWl0dGVyLFxuICAgIElucHV0LFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgIC8vIE91dHB1dCxcbiAgICBPbkluaXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcblxuLy8gZVVJIGltcG9ydHNcbmltcG9ydCB7IEJhc2VTdGF0ZXNEaXJlY3RpdmUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvc2hhcmVkJztcbmltcG9ydCB7IGNvZXJjZUJvb2xlYW4gfSBmcm9tICdAZXVpL2Jhc2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc2VsZWN0b3I6ICdldWktc2tlbGV0b24nLFxuICAgIHN0eWxlVXJsOiAnLi9zdHlsZXMvX2luZGV4LnNjc3MnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgZGlyZWN0aXZlOiBCYXNlU3RhdGVzRGlyZWN0aXZlLFxuICAgICAgICAgICAgaW5wdXRzOiBbXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVYUycsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVTJyxcbiAgICAgICAgICAgICAgICAnZXVpU2l6ZU0nLFxuICAgICAgICAgICAgICAgICdldWlTaXplTCcsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVYTCcsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVWYXJpYW50JyxcbiAgICAgICAgICAgIF0sXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpU2tlbGV0b25Db21wb25lbnQge1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIHB1YmxpYyBnZXQgY3NzQ2xhc3NlcygpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5nZXRDc3NDbGFzc2VzKCk7XG4gICAgfVxuXG4gICAgQElucHV0KCkgQGNvZXJjZUJvb2xlYW4gY2lyY2xlOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBAY29lcmNlQm9vbGVhbiBsaW5lOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBAY29lcmNlQm9vbGVhbiBzcXVhcmU6IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIEBjb2VyY2VCb29sZWFuIHJlY3RhbmdsZTogQm9vbGVhbklucHV0ID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHVibGljIGJhc2VTdGF0ZXNEaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUsXG4gICAgKSB7fVxuXG4gICAgcHJpdmF0ZSBnZXRDc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZ2V0Q3NzQ2xhc3NlcygnZXVpLXNrZWxldG9uJyksXG4gICAgICAgICAgICB0aGlzLmNpcmNsZSA/ICdldWktc2tlbGV0b24tLWNpcmNsZSc6ICcnLFxuICAgICAgICAgICAgdGhpcy5saW5lID8gJ2V1aS1za2VsZXRvbi0tbGluZSc6ICcnLFxuICAgICAgICAgICAgdGhpcy5zcXVhcmUgPyAnZXVpLXNrZWxldG9uLS1zcXVhcmUnOiAnJyxcbiAgICAgICAgICAgIHRoaXMucmVjdGFuZ2xlID8gJ2V1aS1za2VsZXRvbi0tcmVjdGFuZ2xlJzogJycsXG5cbiAgICAgICAgXVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICAgICAgLnRyaW0oKTtcbiAgICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLXNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2V1aS1za2VsZXRvbi9ldWktc2tlbGV0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPO0FBQ0gsWUFBWTtBQUNaLFNBQVMsRUFDVCxXQUFXO0FBQ1gsZ0JBQWdCO0FBQ2hCLEtBQUssRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEdBR3BCLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLGNBQWM7QUFDZCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sV0FBVyxDQUFDOzs7QUF1QjFDLE1BQU0sT0FBTyxvQkFBb0I7SUFDN0IsSUFDVyxVQUFVO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ2hDLENBQUM7SUFPRCxZQUNXLG1CQUF3QztRQUF4Qyx3QkFBbUIsR0FBbkIsbUJBQW1CLENBQXFCO1FBTjNCLFdBQU0sR0FBaUIsS0FBSyxDQUFDO1FBQzdCLFNBQUksR0FBaUIsS0FBSyxDQUFDO1FBQzNCLFdBQU0sR0FBaUIsS0FBSyxDQUFDO1FBQzdCLGNBQVMsR0FBaUIsS0FBSyxDQUFDO0lBSXJELENBQUM7SUFFSSxhQUFhO1FBQ2pCLE9BQU87WUFDSCxJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQztZQUN0RCxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtZQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtZQUNwQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtZQUN4QyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyx5QkFBeUIsQ0FBQSxDQUFDLENBQUMsRUFBRTtTQUVqRDthQUNJLElBQUksQ0FBQyxHQUFHLENBQUM7YUFDVCxJQUFJLEVBQUUsQ0FBQztJQUNoQixDQUFDO2lJQTFCUSxvQkFBb0I7cUhBQXBCLG9CQUFvQiwrYkFwQm5CLEVBQUU7O0FBMEJZO0lBQWQsYUFBYTtvREFBOEI7QUFDN0I7SUFBZCxhQUFhO2tEQUE0QjtBQUMzQjtJQUFkLGFBQWE7b0RBQThCO0FBQzdCO0lBQWQsYUFBYTt1REFBaUM7MkZBVC9DLG9CQUFvQjtrQkFyQmhDLFNBQVM7K0JBQ0ksRUFBRSxZQUNGLGNBQWMsbUJBRVAsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxrQkFDckI7d0JBQ1o7NEJBQ0ksU0FBUyxFQUFFLG1CQUFtQjs0QkFDOUIsTUFBTSxFQUFFO2dDQUNKLFdBQVc7Z0NBQ1gsVUFBVTtnQ0FDVixVQUFVO2dDQUNWLFVBQVU7Z0NBQ1YsV0FBVztnQ0FDWCxZQUFZO2dDQUNaLGdCQUFnQjs2QkFDbkI7eUJBQ0o7cUJBQ0o7d0ZBSVUsVUFBVTtzQkFEcEIsV0FBVzt1QkFBQyxPQUFPO2dCQUtJLE1BQU07c0JBQTdCLEtBQUs7Z0JBQ2tCLElBQUk7c0JBQTNCLEtBQUs7Z0JBQ2tCLE1BQU07c0JBQTdCLEtBQUs7Z0JBQ2tCLFNBQVM7c0JBQWhDLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIC8vIE5nTW9kdWxlLFxuICAgIENvbXBvbmVudCxcbiAgICBIb3N0QmluZGluZyxcbiAgICAvLyBFdmVudEVtaXR0ZXIsXG4gICAgSW5wdXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG4gICAgLy8gT3V0cHV0LFxuICAgIE9uSW5pdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCb29sZWFuSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG4vLyBlVUkgaW1wb3J0c1xuaW1wb3J0IHsgQmFzZVN0YXRlc0RpcmVjdGl2ZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9zaGFyZWQnO1xuaW1wb3J0IHsgY29lcmNlQm9vbGVhbiB9IGZyb20gJ0BldWkvYmFzZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHRlbXBsYXRlOiAnJyxcbiAgICBzZWxlY3RvcjogJ2V1aS1za2VsZXRvbicsXG4gICAgc3R5bGVVcmw6ICcuL3N0eWxlcy9faW5kZXguc2NzcycsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBkaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUsXG4gICAgICAgICAgICBpbnB1dHM6IFtcbiAgICAgICAgICAgICAgICAnZXVpU2l6ZVhTJyxcbiAgICAgICAgICAgICAgICAnZXVpU2l6ZVMnLFxuICAgICAgICAgICAgICAgICdldWlTaXplTScsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVMJyxcbiAgICAgICAgICAgICAgICAnZXVpU2l6ZVhMJyxcbiAgICAgICAgICAgICAgICAnZXVpUm91bmRlZCcsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVWYXJpYW50JyxcbiAgICAgICAgICAgIF0sXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpU2tlbGV0b25Db21wb25lbnQge1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIHB1YmxpYyBnZXQgY3NzQ2xhc3NlcygpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5nZXRDc3NDbGFzc2VzKCk7XG4gICAgfVxuXG4gICAgQElucHV0KCkgQGNvZXJjZUJvb2xlYW4gY2lyY2xlOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBAY29lcmNlQm9vbGVhbiBsaW5lOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBAY29lcmNlQm9vbGVhbiBzcXVhcmU6IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIEBjb2VyY2VCb29sZWFuIHJlY3RhbmdsZTogQm9vbGVhbklucHV0ID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHVibGljIGJhc2VTdGF0ZXNEaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUsXG4gICAgKSB7fVxuXG4gICAgcHJpdmF0ZSBnZXRDc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZ2V0Q3NzQ2xhc3NlcygnZXVpLXNrZWxldG9uJyksXG4gICAgICAgICAgICB0aGlzLmNpcmNsZSA/ICdldWktc2tlbGV0b24tLWNpcmNsZSc6ICcnLFxuICAgICAgICAgICAgdGhpcy5saW5lID8gJ2V1aS1za2VsZXRvbi0tbGluZSc6ICcnLFxuICAgICAgICAgICAgdGhpcy5zcXVhcmUgPyAnZXVpLXNrZWxldG9uLS1zcXVhcmUnOiAnJyxcbiAgICAgICAgICAgIHRoaXMucmVjdGFuZ2xlID8gJ2V1aS1za2VsZXRvbi0tcmVjdGFuZ2xlJzogJycsXG5cbiAgICAgICAgXVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICAgICAgLnRyaW0oKTtcbiAgICB9XG59XG4iXX0=

package/esm2022/eui-tree/eui-tree.component.mjs CHANGED Viewed

@@ -822,11 +822,11 @@ export 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']