@eui/components 18.0.0-next.30 → 18.0.0-next.32
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.
- package/docs/components/EuiDateRangeSelectorComponent.html +1 -20
- package/docs/components/EuiDatepickerComponent.html +1 -20
- package/docs/components/EuiFieldsetComponent.html +1 -1
- package/docs/components/EuiMenuComponent.html +2 -42
- package/docs/components/EuiMenuItemComponent.html +1 -24
- package/docs/dependencies.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/directives/eui-resizable/eui-resizable.component.mjs +2 -2
- package/esm2022/directives/eui-tooltip/container/eui-tooltip-container.component.mjs +3 -3
- package/esm2022/eui-alert/eui-alert.component.mjs +2 -2
- package/esm2022/eui-autocomplete/eui-autocomplete.component.mjs +6 -3
- package/esm2022/eui-avatar/eui-avatar.component.mjs +2 -2
- package/esm2022/eui-badge/eui-badge.component.mjs +2 -2
- package/esm2022/eui-block-content/eui-block-content.component.mjs +2 -2
- package/esm2022/eui-block-document/eui-block-document.component.mjs +2 -2
- package/esm2022/eui-button/eui-button.component.mjs +2 -2
- package/esm2022/eui-button-group/eui-button-group.component.mjs +2 -2
- package/esm2022/eui-button-v2/eui-button-v2.component.mjs +2 -2
- package/esm2022/eui-card/eui-card.component.mjs +2 -2
- package/esm2022/eui-chip/eui-chip.component.mjs +2 -2
- package/esm2022/eui-dashboard-button/eui-dashboard-button.component.mjs +2 -2
- package/esm2022/eui-dashboard-card/eui-dashboard-card.component.mjs +2 -2
- package/esm2022/eui-date-range-selector/eui-date-range-selector.component.mjs +3 -5
- package/esm2022/eui-datepicker/eui-datepicker.component.mjs +3 -5
- package/esm2022/eui-dialog/container/eui-dialog-container.component.mjs +2 -2
- package/esm2022/eui-dialog/eui-dialog.component.mjs +2 -2
- package/esm2022/eui-discussion-thread/eui-discussion-thread.component.mjs +2 -2
- package/esm2022/eui-dropdown/dropdown-item/eui-dropdown-item.component.mjs +2 -2
- package/esm2022/eui-dropdown/eui-dropdown.component.mjs +3 -3
- package/esm2022/eui-ecl-date-block/eui-ecl-date-block.component.mjs +2 -2
- package/esm2022/eui-ecl-label/eui-ecl-label.component.mjs +2 -2
- package/esm2022/eui-feedback-message/eui-feedback-message.component.mjs +2 -2
- package/esm2022/eui-fieldset/eui-fieldset.component.mjs +4 -3
- package/esm2022/eui-file-upload/eui-file-upload.component.mjs +2 -2
- package/esm2022/eui-growl/eui-growl.component.mjs +2 -2
- package/esm2022/eui-icon/eui-icon-svg-button/eui-icon-svg-button.component.mjs +2 -2
- package/esm2022/eui-icon/eui-icon-svg.component.mjs +4 -4
- package/esm2022/eui-icon-toggle/eui-icon-toggle.component.mjs +2 -2
- package/esm2022/eui-input-checkbox/eui-input-checkbox.component.mjs +2 -2
- package/esm2022/eui-input-group/eui-input-group.component.mjs +2 -2
- package/esm2022/eui-input-number/eui-input-number.component.mjs +2 -2
- package/esm2022/eui-input-radio/eui-input-radio.component.mjs +2 -2
- package/esm2022/eui-input-text/eui-input-text.component.mjs +2 -2
- package/esm2022/eui-label/eui-label.component.mjs +2 -2
- package/esm2022/eui-language-selector/language-selector.component.mjs +2 -2
- package/esm2022/eui-list/eui-list-item/eui-list-item.component.mjs +2 -2
- package/esm2022/eui-list/eui-list.component.mjs +2 -2
- package/esm2022/eui-menu/eui-menu-item.component.mjs +3 -5
- package/esm2022/eui-menu/eui-menu.component.mjs +3 -6
- package/esm2022/eui-overlay/eui-overlay.component.mjs +2 -2
- package/esm2022/eui-page/eui-page.component.mjs +2 -2
- package/esm2022/eui-popover/eui-popover.component.mjs +2 -2
- package/esm2022/eui-progress-bar/eui-progress-bar.component.mjs +2 -2
- package/esm2022/eui-progress-circle/eui-progress-circle.component.mjs +2 -2
- package/esm2022/eui-select/eui-select.component.mjs +2 -2
- package/esm2022/eui-sidebar-menu/eui-sidebar-menu.component.mjs +2 -2
- package/esm2022/eui-skeleton/eui-skeleton.component.mjs +2 -2
- package/esm2022/eui-slide-toggle/eui-slide-toggle.component.mjs +3 -3
- package/esm2022/eui-table/eui-table.component.mjs +2 -2
- package/esm2022/eui-tabs/eui-tab/eui-tab.component.mjs +2 -2
- package/esm2022/eui-tabs/eui-tabs.component.mjs +2 -2
- package/esm2022/eui-textarea/eui-textarea.component.mjs +2 -2
- package/esm2022/eui-timebar/eui-timebar.component.mjs +2 -2
- package/esm2022/eui-timeline/eui-timeline-item.component.mjs +2 -2
- package/esm2022/eui-timeline/eui-timeline.component.mjs +2 -2
- package/esm2022/eui-timepicker/eui-timepicker.component.mjs +2 -2
- package/esm2022/eui-tree/eui-tree.component.mjs +2 -2
- package/esm2022/eui-tree-list/eui-tree-list.component.mjs +2 -2
- package/esm2022/eui-wizard/eui-wizard-step.component.mjs +2 -2
- package/esm2022/eui-wizard/eui-wizard.component.mjs +2 -2
- package/esm2022/externals/charts/chart/chart.component.mjs +2 -2
- package/esm2022/externals/eui-editor/eui-editor.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-footer/footer.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-header/header.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-sidebar/sidebar-header-user-profile/sidebar-header-user-profile.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-sidebar/sidebar.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-toolbar/toolbar.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-top-message/top-message.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/breadcrumb.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/collapsed-breadcrumb/collapsed-breadcrumb.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/item/breadcrumb-item.component.mjs +2 -2
- package/esm2022/layout/eui-footer/footer.component.mjs +2 -2
- package/esm2022/layout/eui-header/header.component.mjs +2 -2
- package/esm2022/layout/eui-notifications/eui-notifications.component.mjs +2 -2
- package/esm2022/layout/eui-notifications-v2/eui-notifications.component.mjs +2 -2
- package/esm2022/layout/eui-search/search.component.mjs +2 -2
- package/esm2022/layout/eui-toolbar/toolbar.component.mjs +2 -2
- package/esm2022/layout/eui-user-profile/user-profile.component.mjs +2 -2
- package/eui-autocomplete/eui-autocomplete.component.d.ts.map +1 -1
- package/eui-date-range-selector/eui-date-range-selector.component.d.ts +1 -2
- package/eui-date-range-selector/eui-date-range-selector.component.d.ts.map +1 -1
- package/eui-datepicker/eui-datepicker.component.d.ts +1 -2
- package/eui-datepicker/eui-datepicker.component.d.ts.map +1 -1
- package/eui-fieldset/eui-fieldset.component.d.ts.map +1 -1
- package/eui-icon/eui-icon-svg.component.d.ts.map +1 -1
- package/eui-menu/eui-menu-item.component.d.ts +0 -1
- package/eui-menu/eui-menu-item.component.d.ts.map +1 -1
- package/eui-menu/eui-menu.component.d.ts.map +1 -1
- package/fesm2022/eui-components-directives.mjs +4 -4
- package/fesm2022/eui-components-directives.mjs.map +1 -1
- package/fesm2022/eui-components-eui-alert.mjs +2 -2
- package/fesm2022/eui-components-eui-alert.mjs.map +1 -1
- package/fesm2022/eui-components-eui-autocomplete.mjs +5 -2
- package/fesm2022/eui-components-eui-autocomplete.mjs.map +2 -2
- package/fesm2022/eui-components-eui-avatar.mjs +2 -2
- package/fesm2022/eui-components-eui-avatar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-badge.mjs +2 -2
- package/fesm2022/eui-components-eui-badge.mjs.map +1 -1
- package/fesm2022/eui-components-eui-block-content.mjs +2 -2
- package/fesm2022/eui-components-eui-block-content.mjs.map +1 -1
- package/fesm2022/eui-components-eui-block-document.mjs +2 -2
- package/fesm2022/eui-components-eui-block-document.mjs.map +1 -1
- package/fesm2022/eui-components-eui-button-group.mjs +2 -2
- package/fesm2022/eui-components-eui-button-group.mjs.map +1 -1
- package/fesm2022/eui-components-eui-button-v2.mjs +2 -2
- package/fesm2022/eui-components-eui-button-v2.mjs.map +1 -1
- package/fesm2022/eui-components-eui-button.mjs +2 -2
- package/fesm2022/eui-components-eui-button.mjs.map +1 -1
- package/fesm2022/eui-components-eui-card.mjs +2 -2
- package/fesm2022/eui-components-eui-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-chip.mjs +2 -2
- package/fesm2022/eui-components-eui-chip.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dashboard-button.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-button.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dashboard-card.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-date-range-selector.mjs +5 -7
- package/fesm2022/eui-components-eui-date-range-selector.mjs.map +2 -2
- package/fesm2022/eui-components-eui-datepicker.mjs +5 -7
- package/fesm2022/eui-components-eui-datepicker.mjs.map +2 -2
- package/fesm2022/eui-components-eui-dialog.mjs +4 -4
- package/fesm2022/eui-components-eui-dialog.mjs.map +1 -1
- package/fesm2022/eui-components-eui-discussion-thread.mjs +2 -2
- package/fesm2022/eui-components-eui-discussion-thread.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dropdown.mjs +4 -4
- package/fesm2022/eui-components-eui-dropdown.mjs.map +1 -1
- package/fesm2022/eui-components-eui-ecl-date-block.mjs +2 -2
- package/fesm2022/eui-components-eui-ecl-date-block.mjs.map +1 -1
- package/fesm2022/eui-components-eui-ecl-label.mjs +2 -2
- package/fesm2022/eui-components-eui-ecl-label.mjs.map +1 -1
- package/fesm2022/eui-components-eui-feedback-message.mjs +2 -2
- package/fesm2022/eui-components-eui-feedback-message.mjs.map +1 -1
- package/fesm2022/eui-components-eui-fieldset.mjs +4 -3
- package/fesm2022/eui-components-eui-fieldset.mjs.map +2 -2
- package/fesm2022/eui-components-eui-file-upload.mjs +2 -2
- package/fesm2022/eui-components-eui-file-upload.mjs.map +1 -1
- package/fesm2022/eui-components-eui-growl.mjs +2 -2
- package/fesm2022/eui-components-eui-growl.mjs.map +1 -1
- package/fesm2022/eui-components-eui-icon-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-icon-toggle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-icon.mjs +2 -5
- package/fesm2022/eui-components-eui-icon.mjs.map +2 -2
- package/fesm2022/eui-components-eui-input-checkbox.mjs +2 -2
- package/fesm2022/eui-components-eui-input-checkbox.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-group.mjs +2 -2
- package/fesm2022/eui-components-eui-input-group.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-number.mjs +2 -2
- package/fesm2022/eui-components-eui-input-number.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-radio.mjs +2 -2
- package/fesm2022/eui-components-eui-input-radio.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-text.mjs +2 -2
- package/fesm2022/eui-components-eui-input-text.mjs.map +1 -1
- package/fesm2022/eui-components-eui-label.mjs +2 -2
- package/fesm2022/eui-components-eui-label.mjs.map +1 -1
- package/fesm2022/eui-components-eui-language-selector.mjs +2 -2
- package/fesm2022/eui-components-eui-language-selector.mjs.map +1 -1
- package/fesm2022/eui-components-eui-list.mjs +4 -4
- package/fesm2022/eui-components-eui-list.mjs.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +8 -11
- package/fesm2022/eui-components-eui-menu.mjs.map +2 -2
- package/fesm2022/eui-components-eui-overlay.mjs +2 -2
- package/fesm2022/eui-components-eui-overlay.mjs.map +1 -1
- package/fesm2022/eui-components-eui-page.mjs +2 -2
- package/fesm2022/eui-components-eui-page.mjs.map +1 -1
- package/fesm2022/eui-components-eui-popover.mjs +2 -2
- package/fesm2022/eui-components-eui-popover.mjs.map +1 -1
- package/fesm2022/eui-components-eui-progress-bar.mjs +2 -2
- package/fesm2022/eui-components-eui-progress-bar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-progress-circle.mjs +2 -2
- package/fesm2022/eui-components-eui-progress-circle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-select.mjs +2 -2
- package/fesm2022/eui-components-eui-select.mjs.map +1 -1
- package/fesm2022/eui-components-eui-sidebar-menu.mjs +2 -2
- package/fesm2022/eui-components-eui-sidebar-menu.mjs.map +1 -1
- package/fesm2022/eui-components-eui-skeleton.mjs +2 -2
- package/fesm2022/eui-components-eui-skeleton.mjs.map +1 -1
- package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-slide-toggle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-table.mjs +2 -2
- package/fesm2022/eui-components-eui-table.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tabs.mjs +4 -4
- package/fesm2022/eui-components-eui-tabs.mjs.map +1 -1
- package/fesm2022/eui-components-eui-textarea.mjs +2 -2
- package/fesm2022/eui-components-eui-textarea.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timebar.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timeline.mjs +4 -4
- package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timepicker.mjs +2 -2
- package/fesm2022/eui-components-eui-timepicker.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
- package/fesm2022/eui-components-eui-tree-list.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-eui-wizard.mjs +4 -4
- package/fesm2022/eui-components-eui-wizard.mjs.map +1 -1
- package/fesm2022/eui-components-externals-charts.mjs +2 -2
- package/fesm2022/eui-components-externals-charts.mjs.map +1 -1
- package/fesm2022/eui-components-externals-eui-editor.mjs +2 -2
- package/fesm2022/eui-components-externals-eui-editor.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +34 -34
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -25,11 +25,11 @@ export class EuiTimelineComponent {
|
|
|
25
25
|
return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "timelineItems", predicate: EuiTimelineItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "timelineItems", predicate: EuiTimelineItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-ctx-c-white);border-color:var(--eui-ctx-c-ac);border-radius:50%;border-style:solid;border-width:2px;display:flex;flex-direction:column;max-height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin:0 var(--eui-base-spacing-m);min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-ctx-c-s-lighter);content:\"\";height:calc(100% - var(--eui-base-spacing-2xs));position:absolute;top:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:2px;z-index:1}.eui-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-ctx-c-s-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-base-spacing-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-s);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-ctx-c-s-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-ctx-c-s);font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-ctx-c-s-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-base-spacing-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-ctx-c-s-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-ctx-c-s);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-p)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-p-dark)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-s-lightest)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-s-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-in)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-in-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-wa)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-wa-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-su)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-su-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-da)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-da-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-ac)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-ac-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-m)}\n"] }); }
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimelineComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-
|
|
32
|
+
args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-ctx-c-white);border-color:var(--eui-ctx-c-ac);border-radius:50%;border-style:solid;border-width:2px;display:flex;flex-direction:column;max-height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin:0 var(--eui-base-spacing-m);min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-ctx-c-s-lighter);content:\"\";height:calc(100% - var(--eui-base-spacing-2xs));position:absolute;top:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:2px;z-index:1}.eui-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-ctx-c-s-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-base-spacing-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-s);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-ctx-c-s-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-ctx-c-s);font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-ctx-c-s-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-base-spacing-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-ctx-c-s-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-ctx-c-s);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-p)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-p-dark)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-s-lightest)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-s-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-in)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-in-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-wa)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-wa-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-su)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-su-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-da)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-da-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-ctx-c-ac)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-ctx-c-ac-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-m)}\n"] }]
|
|
33
33
|
}], propDecorators: { cssClasses: [{
|
|
34
34
|
type: HostBinding,
|
|
35
35
|
args: ['class']
|
|
@@ -354,11 +354,11 @@ export class EuiTimepickerComponent {
|
|
|
354
354
|
this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
|
|
355
355
|
}
|
|
356
356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimepickerComponent, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-base-color-info-130)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimepickerComponent, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-ctx-c-p)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
358
358
|
}
|
|
359
359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
|
|
360
360
|
type: Component,
|
|
361
|
-
args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-
|
|
361
|
+
args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"eui-chevron-up\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"eui-chevron-down\"\n fillColor=\"grey-75\"\n size=\"l\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-ctx-c-p)}.eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
362
362
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
363
363
|
type: Optional
|
|
364
364
|
}, {
|
|
@@ -883,11 +883,11 @@ export class EuiTreeComponent {
|
|
|
883
883
|
return scrolled.getElementRef().nativeElement === this.cdkScrollableRef.getElementRef().nativeElement;
|
|
884
884
|
}
|
|
885
885
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
886
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", 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: "<div class=\"eui-ul-rep 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 <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\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 path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\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 <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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 <!--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 <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 children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\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?.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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;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--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 .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}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-base-color-grey-20);content:\"\";height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-xl));position:absolute;top:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-left:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\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", "info", "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", 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", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { 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", "isInputIcon", "euiStart", "euiEnd"] }, { 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: ["e2eAttr", "aria-label"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { 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 }); }
|
|
886
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", 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: "<div class=\"eui-ul-rep 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 <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\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 path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\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 <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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 <!--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 <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 children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\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?.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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-ctx-c-s-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-ctx-c-bg0);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-ctx-c-s-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-ctx-c-s-bg-light);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--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 .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-ctx-c-s-bg-light)}.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}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-ctx-c-s-lightest);content:\"\";height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-xl));position:absolute;top:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-ctx-c-s-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-ctx-c-s-lightest);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-ctx-c-s-lightest);border-left:1px solid var(--eui-ctx-c-s-lightest);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\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", "info", "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", 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", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { 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", "isInputIcon", "euiStart", "euiEnd"] }, { 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: ["e2eAttr", "aria-label"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { 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 }); }
|
|
887
887
|
}
|
|
888
888
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTreeComponent, decorators: [{
|
|
889
889
|
type: Component,
|
|
890
|
-
args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-ul-rep 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 <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\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 path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\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 <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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 <!--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 <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 children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\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?.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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;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--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 .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}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-base-color-grey-20);content:\"\";height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-xl));position:absolute;top:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-left:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\n"] }]
|
|
890
|
+
args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-ul-rep 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 <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\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 path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\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 <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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 <!--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 <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 children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\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?.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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-ctx-c-s-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-ctx-c-bg0);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-ctx-c-s-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-ctx-c-s-bg-light);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--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 .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-ctx-c-s-bg-light)}.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}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-ctx-c-s-lightest);content:\"\";height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-xl));position:absolute;top:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-ctx-c-s-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-ctx-c-s-lightest);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-ctx-c-s-lightest);border-left:1px solid var(--eui-ctx-c-s-lightest);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\n"] }]
|
|
891
891
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }], propDecorators: { cssClasses: [{
|
|
892
892
|
type: HostBinding,
|
|
893
893
|
args: ['class']
|
|
@@ -239,11 +239,11 @@ export class EuiTreeListComponent {
|
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTreeListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
242
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EuiTreeListComponent, selector: "eui-tree-list", inputs: { isShowToolbar: "isShowToolbar", isShowToolbarToggle: "isShowToolbarToggle", isExpanded: "isExpanded", filterLabel: "filterLabel", filterFunction: "filterFunction", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", hasItemsUrl: "hasItemsUrl", tabindex: "tabindex", ariaRole: "ariaRole", ariaLabel: "ariaLabel", toolbarFilterValue: "toolbarFilterValue", e2eAttr: "e2eAttr" }, outputs: { itemSelected: "itemSelected", filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiTreeListItemComponent) }], usesOnChanges: true, ngImport: i0, template: "<eui-tree-list-toolbar\n *ngIf=\"isShowToolbar\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n (filter)=\"onFilter($event)\"\n [filterValue]=\"toolbarFilterValue\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n [filterLabel]=\"filterLabel ? filterLabel : 'eui.FILTER' | translate\"\n [expandAllLabel]=\"hasExpandAllLabel ? expandAllLabel : 'eui.EXPANDALL' | translate\"\n [collapseAllLabel]=\"hasCollapseAllLabel ? collapseAllLabel : 'eui.COLLAPSEALL' | translate\"\n [isToggleExpanded]=\"isExpanded\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-tree-list-toolbar>\n\n<div\n class=\"eui-tree-list\"\n [attr.role]=\"ariaRoleTree\"\n [attr.data-tabindex]=\"originalTabindex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-owns]=\"ariaOwns\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list{display:block;width:100%;background-color:var(--eui-
|
|
242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EuiTreeListComponent, selector: "eui-tree-list", inputs: { isShowToolbar: "isShowToolbar", isShowToolbarToggle: "isShowToolbarToggle", isExpanded: "isExpanded", filterLabel: "filterLabel", filterFunction: "filterFunction", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", hasItemsUrl: "hasItemsUrl", tabindex: "tabindex", ariaRole: "ariaRole", ariaLabel: "ariaLabel", toolbarFilterValue: "toolbarFilterValue", e2eAttr: "e2eAttr" }, outputs: { itemSelected: "itemSelected", filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiTreeListItemComponent) }], usesOnChanges: true, ngImport: i0, template: "<eui-tree-list-toolbar\n *ngIf=\"isShowToolbar\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n (filter)=\"onFilter($event)\"\n [filterValue]=\"toolbarFilterValue\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n [filterLabel]=\"filterLabel ? filterLabel : 'eui.FILTER' | translate\"\n [expandAllLabel]=\"hasExpandAllLabel ? expandAllLabel : 'eui.EXPANDALL' | translate\"\n [collapseAllLabel]=\"hasCollapseAllLabel ? collapseAllLabel : 'eui.COLLAPSEALL' | translate\"\n [isToggleExpanded]=\"isExpanded\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-tree-list-toolbar>\n\n<div\n class=\"eui-tree-list\"\n [attr.role]=\"ariaRoleTree\"\n [attr.data-tabindex]=\"originalTabindex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-owns]=\"ariaOwns\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list{display:block;width:100%;background-color:var(--eui-ctx-c-white)}.eui-tree-list-item{display:block;width:100%;border-top:1px solid var(--eui-ctx-c-s-lightest)}.eui-tree-list-item-header{display:flex;align-items:center;width:100%;border-left:var(--eui-base-spacing-xs) solid transparent;text-decoration:none;min-height:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-xs);width:100%;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-ctx-c-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tree-list-item-header__content:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-ctx-c-s-light);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-ctx-c-s-bg-light);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-ctx-c-s-bg-light)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-ctx-c-s)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-ctx-c-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-ctx-c-s-light)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}.eui-tree-list-item__hover-content{background-color:var(--eui-ctx-c-p);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list-item-content{display:flex;align-items:center;width:100%}.eui-tree-list-item--primary .eui-tree-list-item-header{border-color:var(--eui-ctx-c-p)}.eui-tree-list-item--secondary .eui-tree-list-item-header{border-color:var(--eui-ctx-c-s-lighter)}.eui-tree-list-item--info .eui-tree-list-item-header{border-color:var(--eui-ctx-c-in)}.eui-tree-list-item--success .eui-tree-list-item-header{border-color:var(--eui-ctx-c-su)}.eui-tree-list-item--warning .eui-tree-list-item-header{border-color:var(--eui-ctx-c-wa)}.eui-tree-list-item--danger .eui-tree-list-item-header{border-color:var(--eui-ctx-c-da)}.eui-tree-list-item--accent .eui-tree-list-item-header{border-color:var(--eui-ctx-c-ac)}.eui-tree-list-item--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiTreeListToolbarComponent, selector: "eui-tree-list-toolbar", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
243
243
|
}
|
|
244
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTreeListComponent, decorators: [{
|
|
245
245
|
type: Component,
|
|
246
|
-
args: [{ selector: 'eui-tree-list', encapsulation: ViewEncapsulation.None, template: "<eui-tree-list-toolbar\n *ngIf=\"isShowToolbar\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n (filter)=\"onFilter($event)\"\n [filterValue]=\"toolbarFilterValue\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n [filterLabel]=\"filterLabel ? filterLabel : 'eui.FILTER' | translate\"\n [expandAllLabel]=\"hasExpandAllLabel ? expandAllLabel : 'eui.EXPANDALL' | translate\"\n [collapseAllLabel]=\"hasCollapseAllLabel ? collapseAllLabel : 'eui.COLLAPSEALL' | translate\"\n [isToggleExpanded]=\"isExpanded\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-tree-list-toolbar>\n\n<div\n class=\"eui-tree-list\"\n [attr.role]=\"ariaRoleTree\"\n [attr.data-tabindex]=\"originalTabindex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-owns]=\"ariaOwns\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list{display:block;width:100%;background-color:var(--eui-
|
|
246
|
+
args: [{ selector: 'eui-tree-list', encapsulation: ViewEncapsulation.None, template: "<eui-tree-list-toolbar\n *ngIf=\"isShowToolbar\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n (filter)=\"onFilter($event)\"\n [filterValue]=\"toolbarFilterValue\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n [filterLabel]=\"filterLabel ? filterLabel : 'eui.FILTER' | translate\"\n [expandAllLabel]=\"hasExpandAllLabel ? expandAllLabel : 'eui.EXPANDALL' | translate\"\n [collapseAllLabel]=\"hasCollapseAllLabel ? collapseAllLabel : 'eui.COLLAPSEALL' | translate\"\n [isToggleExpanded]=\"isExpanded\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n</eui-tree-list-toolbar>\n\n<div\n class=\"eui-tree-list\"\n [attr.role]=\"ariaRoleTree\"\n [attr.data-tabindex]=\"originalTabindex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-owns]=\"ariaOwns\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</div>\n", styles: [".eui-tree-list{display:block;width:100%;background-color:var(--eui-ctx-c-white)}.eui-tree-list-item{display:block;width:100%;border-top:1px solid var(--eui-ctx-c-s-lightest)}.eui-tree-list-item-header{display:flex;align-items:center;width:100%;border-left:var(--eui-base-spacing-xs) solid transparent;text-decoration:none;min-height:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-xs);width:100%;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-ctx-c-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tree-list-item-header__content:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle-wrapper{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s);text-align:center}.eui-tree-list-item-header__content-expand-toggle{color:var(--eui-ctx-c-s-light);cursor:pointer;padding:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-expand-toggle:hover{box-shadow:var(--eui-base-shadow-1)}.eui-tree-list-item-header__details-content{border-top:1px solid var(--eui-ctx-c-s-bg-light);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-ctx-c-s-bg-light)}.eui-tree-list .eui-tree-list .eui-tree-list-item{border-top:0}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{color:var(--eui-ctx-c-s)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-ctx-c-text)}.eui-tree-list .eui-tree-list .eui-tree-list{padding-left:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content{border-bottom:0}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-ctx-c-s-light)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:var(--eui-base-spacing-m)}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(2 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(3 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(4 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(5 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(6 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(7 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(8 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(9 * var(--eui-base-spacing-m))}.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content,.eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list .eui-tree-list-item-header__details-content{margin-left:calc(10 * var(--eui-base-spacing-m))}.eui-tree-list--no-bullets .eui-tree-list .eui-tree-list .eui-tree-list-item-header__content:before{content:\"\"}.eui-tree-list-item__hover-content{background-color:var(--eui-ctx-c-p);height:100%;left:var(--eui-layout-sidebar-width);position:fixed;top:calc(var(--eui-layout-header-height) + var(--eui-layout-nav-height) - 1);width:var(--eui-layout-sidebar-width)}.eui-tree-list-item-content{display:flex;align-items:center;width:100%}.eui-tree-list-item--primary .eui-tree-list-item-header{border-color:var(--eui-ctx-c-p)}.eui-tree-list-item--secondary .eui-tree-list-item-header{border-color:var(--eui-ctx-c-s-lighter)}.eui-tree-list-item--info .eui-tree-list-item-header{border-color:var(--eui-ctx-c-in)}.eui-tree-list-item--success .eui-tree-list-item-header{border-color:var(--eui-ctx-c-su)}.eui-tree-list-item--warning .eui-tree-list-item-header{border-color:var(--eui-ctx-c-wa)}.eui-tree-list-item--danger .eui-tree-list-item-header{border-color:var(--eui-ctx-c-da)}.eui-tree-list-item--accent .eui-tree-list-item-header{border-color:var(--eui-ctx-c-ac)}.eui-tree-list-item--hidden{display:none}\n"] }]
|
|
247
247
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isShowToolbar: [{
|
|
248
248
|
type: Input
|
|
249
249
|
}], isShowToolbarToggle: [{
|