@eui/components 17.0.0-next.14 → 17.0.0-next.15
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/EuiTreeListComponent.html +1 -182
- package/docs/components/EuiTreeListItemComponent.html +1 -277
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/eui-button/eui-button.component.mjs +2 -2
- package/esm2022/eui-date-range-selector/eui-date-range-selector.component.mjs +2 -2
- package/esm2022/eui-file-upload/eui-file-upload.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-slide-toggle/eui-slide-toggle.component.mjs +3 -3
- package/esm2022/eui-tree-list/eui-tree-list-item.component.mjs +9 -37
- package/esm2022/eui-tree-list/eui-tree-list.component.mjs +30 -33
- package/esm2022/eui-wizard/eui-wizard-step.component.mjs +2 -2
- package/esm2022/eui-wizard/eui-wizard.component.mjs +2 -2
- package/esm2022/layout/eui-toolbar/toolbar.component.mjs +2 -2
- package/eui-tree-list/eui-tree-list-item.component.d.ts +1 -13
- package/eui-tree-list/eui-tree-list-item.component.d.ts.map +1 -1
- package/eui-tree-list/eui-tree-list.component.d.ts +1 -8
- package/eui-tree-list/eui-tree-list.component.d.ts.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-date-range-selector.mjs +2 -2
- package/fesm2022/eui-components-eui-date-range-selector.mjs.map +1 -1
- 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-list.mjs +4 -4
- package/fesm2022/eui-components-eui-list.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-tree-list.mjs +37 -68
- package/fesm2022/eui-components-eui-tree-list.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-layout.mjs +2 -2
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -39,24 +39,12 @@ class EuiTreeListItemComponent {
|
|
|
39
39
|
set isDisplaySubLinksOnHover(value) {
|
|
40
40
|
this._isDisplaySubLinksOnHover = coerceBooleanProperty(value);
|
|
41
41
|
}
|
|
42
|
-
get hasMarker() {
|
|
43
|
-
return this._hasMarker;
|
|
44
|
-
}
|
|
45
|
-
set hasMarker(value) {
|
|
46
|
-
this._hasMarker = coerceBooleanProperty(value);
|
|
47
|
-
}
|
|
48
42
|
get isNavigateOnlyOnLabelClick() {
|
|
49
43
|
return this._isNavigateOnlyOnLabelClick;
|
|
50
44
|
}
|
|
51
45
|
set isNavigateOnlyOnLabelClick(value) {
|
|
52
46
|
this._isNavigateOnlyOnLabelClick = coerceBooleanProperty(value);
|
|
53
47
|
}
|
|
54
|
-
get isIconRounded() {
|
|
55
|
-
return this._isIconRounded;
|
|
56
|
-
}
|
|
57
|
-
set isIconRounded(value) {
|
|
58
|
-
this._isIconRounded = coerceBooleanProperty(value);
|
|
59
|
-
}
|
|
60
48
|
get isVisible() {
|
|
61
49
|
return this._isVisible;
|
|
62
50
|
}
|
|
@@ -78,9 +66,9 @@ class EuiTreeListItemComponent {
|
|
|
78
66
|
this._expanded = false;
|
|
79
67
|
this._alwaysExpanded = false;
|
|
80
68
|
this._isDisplaySubLinksOnHover = false;
|
|
81
|
-
|
|
69
|
+
// private _hasMarker = false;
|
|
82
70
|
this._isNavigateOnlyOnLabelClick = false;
|
|
83
|
-
|
|
71
|
+
// private _isIconRounded = false;
|
|
84
72
|
this._isVisible = true;
|
|
85
73
|
this.treeListComponent = treeListComponent;
|
|
86
74
|
}
|
|
@@ -97,9 +85,9 @@ class EuiTreeListItemComponent {
|
|
|
97
85
|
if (this.customContent.length !== 0) {
|
|
98
86
|
this.hasCustomContent = true;
|
|
99
87
|
}
|
|
100
|
-
if (this.markerTypeClass && !this.hasMarker) {
|
|
101
|
-
|
|
102
|
-
}
|
|
88
|
+
// if (this.markerTypeClass && !this.hasMarker) {
|
|
89
|
+
// this.hasMarker = true;
|
|
90
|
+
// }
|
|
103
91
|
// make sure that any child tree-list is non-focusable and that it has the role of a WAI-ARIA group:
|
|
104
92
|
if (this.subTreeList) {
|
|
105
93
|
this.subTreeList.forEach((subtree) => {
|
|
@@ -218,21 +206,17 @@ class EuiTreeListItemComponent {
|
|
|
218
206
|
}
|
|
219
207
|
}
|
|
220
208
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemComponent, deps: [{ token: forwardRef(() => EuiTreeListComponent), host: true }, { token: i1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
221
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { styleClass: "styleClass", headerStyleClass: "headerStyleClass", id: "id", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", iconClass: "iconClass", active: "active", expanded: "expanded", alwaysExpanded: "alwaysExpanded", url: "url", isDisplaySubLinksOnHover: "isDisplaySubLinksOnHover", subLinks: "subLinks", typeClass: "typeClass", hasMarker: "hasMarker", markerTypeClass: "markerTypeClass", isNavigateOnlyOnLabelClick: "isNavigateOnlyOnLabelClick", isIconRounded: "isIconRounded", iconTypeClass: "iconTypeClass", e2eAttr: "e2eAttr", isVisible: "isVisible" }, outputs: { toggled: "toggled" }, queries: [{ propertyName: "customSubLabel", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EuiTreeListItemCustomContentTagDirective) }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div\n class=\"eui-tree-list-item {{ styleClass }}\"\n [class.eui-tree-list-item--active]=\"active\"\n [hidden]=\"!isVisible\"\n attr.data-e2e=\"{{ e2eAttr }}\"\n tabindex=\"0\">\n <div class=\"eui-tree-list-item-header eui-tree-list-item-header--{{ typeClass }} {{ headerStyleClass }}\" (click)=\"navigateToLink($event)\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\">\n <ng-template [ngIf]=\"hasCustomContent\">\n <ng-content select=\"euiTreeListItemCustomContent\"></ng-content>\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"!hasCustomContent\">\n <span euiLabel>\n {{ label }}\n </span>\n <span euiSublabel *ngIf=\"customSubLabel\">\n <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n </span>\n <span euiSublabel *ngIf=\"!customSubLabel\">\n {{ subLabel }}\n </span>\n\n <!-- <eui-label\n label=\"{{ label }}\"\n subLabel=\"{{ subLabel }}\"\n iconClass=\"{{ iconClass }}\"\n [isIconRounded]=\"isIconRounded\"\n iconTypeClass=\"{{ iconTypeClass }}\"\n [hasMarker]=\"hasMarker\"\n markerTypeClass=\"{{ markerTypeClass }}\"\n [isClickable]=\"linkUrl && isNavigateOnlyOnLabelClick\"\n (click)=\"navigateToLink($event)\"\n (labelClicked)=\"onLabelClicked($event)\"\n [isBoldLabel]=\"true\"\n tabindex=\"-1\">\n <uxLabelSubLabel *ngIf=\"customSubLabel\">\n <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n </uxLabelSubLabel>\n </eui-label> -->\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"hasCustomDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"euiTreeListItemDetailsContent\"></ng-content>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"hasCustomSubContainerContent\">\n <ng-content select=\"euiTreeListItemSubContainerContent\"></ng-content>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n </ng-template>\n</div>\n\n<ng-template #rightContent><ng-content select=\"euiTreeListItemRightContent\"></ng-content></ng-template>\n", styles: ["eui-tree-list .ux-a-toolbar-filter{padding:var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-s)}.eui-tree-list{margin-bottom:-2px}.eui-tree-list--no-bullets .eui-tree-list-item-header__content:before{content:\"\";padding-left:0;width:0}.eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content-icon{font-size:var(--eui-base-font-size-l)}.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-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.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-base-color-grey-80);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-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.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-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-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-base-color-grey-80)}.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--with-items-url .eui-tree-list-item-header__content .ux-a-label__label{color:var(--eui-base-color-primary-100)!important;cursor:pointer}.eui-tree-list--with-items-url .eui-tree-list-item-header__content .ux-a-label__label:hover{text-decoration:underline}uxtreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}uxtreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);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--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}.eui-tree-list--advanced ux-a-label,.eui-tree-list--advanced .ux-a-label{display:flex;width:100%}.eui-tree-list--advanced ux-a-label .ux-a-label__content,.eui-tree-list--advanced .ux-a-label .ux-a-label__content{align-items:center;display:flex;width:100%}.eui-tree-list--advanced ux-a-label .ux-a-label__sub-label,.eui-tree-list--advanced .ux-a-label .ux-a-label__sub-label{display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list--advanced ux-a-label .ux-a-label__sub-label uxlabelsublabel,.eui-tree-list--advanced ux-a-label .ux-a-label__sub-label uxtreelistitemsublabel,.eui-tree-list--advanced .ux-a-label .ux-a-label__sub-label uxlabelsublabel,.eui-tree-list--advanced .ux-a-label .ux-a-label__sub-label uxtreelistitemsublabel{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
209
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { id: "id", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", active: "active", expanded: "expanded", alwaysExpanded: "alwaysExpanded", url: "url", isDisplaySubLinksOnHover: "isDisplaySubLinksOnHover", subLinks: "subLinks", isNavigateOnlyOnLabelClick: "isNavigateOnlyOnLabelClick", e2eAttr: "e2eAttr", isVisible: "isVisible" }, outputs: { toggled: "toggled" }, queries: [{ propertyName: "customSubLabel", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EuiTreeListItemCustomContentTagDirective) }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div\n class=\"eui-tree-list-item\"\n [class.eui-tree-list-item--active]=\"active\"\n [hidden]=\"!isVisible\"\n attr.data-e2e=\"{{ e2eAttr }}\"\n tabindex=\"0\">\n <div class=\"eui-tree-list-item-header eui-tree-list-item-header\" (click)=\"navigateToLink($event)\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\">\n <ng-template [ngIf]=\"hasCustomContent\">\n <ng-content select=\"euiTreeListItemCustomContent\"></ng-content>\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"!hasCustomContent\">\n <div class=\"eui-u-flex\">\n <span euiLabel *ngIf=\"linkUrl && isNavigateOnlyOnLabelClick; else noLink\">\n {{ label }}\n </span>\n <ng-template #noLink>\n <a euiLabel (click)=\"navigateToLink($event)\">{{label}}</a>\n </ng-template>\n <span euiSublabel *ngIf=\"customSubLabel; else customSubLabel\">\n <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n </span>\n <ng-template #customSubLabel>\n <span euiSublabel>\n {{ subLabel }}\n </span>\n </ng-template>\n </div>\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"hasCustomDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"euiTreeListItemDetailsContent\"></ng-content>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"hasCustomSubContainerContent\">\n <ng-content select=\"euiTreeListItemSubContainerContent\"></ng-content>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n </ng-template>\n</div>\n\n<ng-template #rightContent><ng-content select=\"euiTreeListItemRightContent\"></ng-content></ng-template>\n", styles: [".eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.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-base-color-grey-80);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-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.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-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-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-base-color-grey-80)}.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:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);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--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
222
210
|
}
|
|
223
211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListItemComponent, decorators: [{
|
|
224
212
|
type: Component,
|
|
225
|
-
args: [{ selector: 'eui-tree-list-item', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"eui-tree-list-item {{ styleClass }}\"\n [class.eui-tree-list-item--active]=\"active\"\n [hidden]=\"!isVisible\"\n attr.data-e2e=\"{{ e2eAttr }}\"\n tabindex=\"0\">\n <div class=\"eui-tree-list-item-header eui-tree-list-item-header--{{ typeClass }} {{ headerStyleClass }}\" (click)=\"navigateToLink($event)\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\">\n <ng-template [ngIf]=\"hasCustomContent\">\n <ng-content select=\"euiTreeListItemCustomContent\"></ng-content>\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"!hasCustomContent\">\n <span euiLabel>\n {{ label }}\n </span>\n <span euiSublabel *ngIf=\"customSubLabel\">\n <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n </span>\n <span euiSublabel *ngIf=\"!customSubLabel\">\n {{ subLabel }}\n </span>\n\n <!-- <eui-label\n label=\"{{ label }}\"\n subLabel=\"{{ subLabel }}\"\n iconClass=\"{{ iconClass }}\"\n [isIconRounded]=\"isIconRounded\"\n iconTypeClass=\"{{ iconTypeClass }}\"\n [hasMarker]=\"hasMarker\"\n markerTypeClass=\"{{ markerTypeClass }}\"\n [isClickable]=\"linkUrl && isNavigateOnlyOnLabelClick\"\n (click)=\"navigateToLink($event)\"\n (labelClicked)=\"onLabelClicked($event)\"\n [isBoldLabel]=\"true\"\n tabindex=\"-1\">\n <uxLabelSubLabel *ngIf=\"customSubLabel\">\n <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n </uxLabelSubLabel>\n </eui-label> -->\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"hasCustomDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"euiTreeListItemDetailsContent\"></ng-content>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"hasCustomSubContainerContent\">\n <ng-content select=\"euiTreeListItemSubContainerContent\"></ng-content>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n </ng-template>\n</div>\n\n<ng-template #rightContent><ng-content select=\"euiTreeListItemRightContent\"></ng-content></ng-template>\n", styles: ["eui-tree-list .ux-a-toolbar-filter{padding:var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-s)}.eui-tree-list{margin-bottom:-2px}.eui-tree-list--no-bullets .eui-tree-list-item-header__content:before{content:\"\";padding-left:0;width:0}.eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content-icon{font-size:var(--eui-base-font-size-l)}.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-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.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-base-color-grey-80);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-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.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-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-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-base-color-grey-80)}.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--with-items-url .eui-tree-list-item-header__content .ux-a-label__label{color:var(--eui-base-color-primary-100)!important;cursor:pointer}.eui-tree-list--with-items-url .eui-tree-list-item-header__content .ux-a-label__label:hover{text-decoration:underline}uxtreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}uxtreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);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--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}.eui-tree-list--advanced ux-a-label,.eui-tree-list--advanced .ux-a-label{display:flex;width:100%}.eui-tree-list--advanced ux-a-label .ux-a-label__content,.eui-tree-list--advanced .ux-a-label .ux-a-label__content{align-items:center;display:flex;width:100%}.eui-tree-list--advanced ux-a-label .ux-a-label__sub-label,.eui-tree-list--advanced .ux-a-label .ux-a-label__sub-label{display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-tree-list--advanced ux-a-label .ux-a-label__sub-label uxlabelsublabel,.eui-tree-list--advanced ux-a-label .ux-a-label__sub-label uxtreelistitemsublabel,.eui-tree-list--advanced .ux-a-label .ux-a-label__sub-label uxlabelsublabel,.eui-tree-list--advanced .ux-a-label .ux-a-label__sub-label uxtreelistitemsublabel{display:flex;width:100%}\n"] }]
|
|
213
|
+
args: [{ selector: 'eui-tree-list-item', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"eui-tree-list-item\"\n [class.eui-tree-list-item--active]=\"active\"\n [hidden]=\"!isVisible\"\n attr.data-e2e=\"{{ e2eAttr }}\"\n tabindex=\"0\">\n <div class=\"eui-tree-list-item-header eui-tree-list-item-header\" (click)=\"navigateToLink($event)\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\">\n <ng-template [ngIf]=\"hasCustomContent\">\n <ng-content select=\"euiTreeListItemCustomContent\"></ng-content>\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"!hasCustomContent\">\n <div class=\"eui-u-flex\">\n <span euiLabel *ngIf=\"linkUrl && isNavigateOnlyOnLabelClick; else noLink\">\n {{ label }}\n </span>\n <ng-template #noLink>\n <a euiLabel (click)=\"navigateToLink($event)\">{{label}}</a>\n </ng-template>\n <span euiSublabel *ngIf=\"customSubLabel; else customSubLabel\">\n <ng-content select=\"euiTreeListItemSubLabel\"></ng-content>\n </span>\n <ng-template #customSubLabel>\n <span euiSublabel>\n {{ subLabel }}\n </span>\n </ng-template>\n </div>\n\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-right-content-sub\">\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </div>\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" set=\"eui\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"hasCustomDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"euiTreeListItemDetailsContent\"></ng-content>\n </div>\n </ng-template>\n\n <ng-template [ngIf]=\"hasCustomSubContainerContent\">\n <ng-content select=\"euiTreeListItemSubContainerContent\"></ng-content>\n </ng-template>\n </div>\n\n <ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n </ng-template>\n</div>\n\n<ng-template #rightContent><ng-content select=\"euiTreeListItemRightContent\"></ng-content></ng-template>\n", styles: [".eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.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-base-color-grey-80);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-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.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-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-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-base-color-grey-80)}.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:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);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--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"] }]
|
|
226
214
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
227
215
|
type: Host
|
|
228
216
|
}, {
|
|
229
217
|
type: Inject,
|
|
230
218
|
args: [forwardRef(() => EuiTreeListComponent)]
|
|
231
|
-
}] }, { type: i1.Router }, { type: i0.ElementRef }], propDecorators: {
|
|
232
|
-
type: Input
|
|
233
|
-
}], headerStyleClass: [{
|
|
234
|
-
type: Input
|
|
235
|
-
}], id: [{
|
|
219
|
+
}] }, { type: i1.Router }, { type: i0.ElementRef }], propDecorators: { id: [{
|
|
236
220
|
type: Input
|
|
237
221
|
}], label: [{
|
|
238
222
|
type: Input
|
|
@@ -240,8 +224,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
|
|
|
240
224
|
type: Input
|
|
241
225
|
}], subLabel: [{
|
|
242
226
|
type: Input
|
|
243
|
-
}], iconClass: [{
|
|
244
|
-
type: Input
|
|
245
227
|
}], active: [{
|
|
246
228
|
type: Input
|
|
247
229
|
}], expanded: [{
|
|
@@ -254,18 +236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
|
|
|
254
236
|
type: Input
|
|
255
237
|
}], subLinks: [{
|
|
256
238
|
type: Input
|
|
257
|
-
}], typeClass: [{
|
|
258
|
-
type: Input
|
|
259
|
-
}], hasMarker: [{
|
|
260
|
-
type: Input
|
|
261
|
-
}], markerTypeClass: [{
|
|
262
|
-
type: Input
|
|
263
239
|
}], isNavigateOnlyOnLabelClick: [{
|
|
264
240
|
type: Input
|
|
265
|
-
}], isIconRounded: [{
|
|
266
|
-
type: Input
|
|
267
|
-
}], iconTypeClass: [{
|
|
268
|
-
type: Input
|
|
269
241
|
}], e2eAttr: [{
|
|
270
242
|
type: Input
|
|
271
243
|
}], toggled: [{
|
|
@@ -334,6 +306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
|
|
|
334
306
|
|
|
335
307
|
/* eslint-disable */
|
|
336
308
|
class EuiTreeListComponent {
|
|
309
|
+
// @Input() styleClass: string;
|
|
337
310
|
get isShowToolbar() {
|
|
338
311
|
return this._isShowToolbar;
|
|
339
312
|
}
|
|
@@ -358,20 +331,24 @@ class EuiTreeListComponent {
|
|
|
358
331
|
set hasItemsUrl(value) {
|
|
359
332
|
this._hasItemsUrl = coerceBooleanProperty(value);
|
|
360
333
|
}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
}
|
|
364
|
-
set hasItemsBullet(value) {
|
|
365
|
-
this._hasItemsBullet = coerceBooleanProperty(value);
|
|
366
|
-
}
|
|
367
|
-
get hasLeftIndent() {
|
|
368
|
-
return this._hasLeftIndent;
|
|
369
|
-
}
|
|
370
|
-
set hasLeftIndent(value) {
|
|
371
|
-
this._hasLeftIndent = coerceBooleanProperty(value);
|
|
372
|
-
}
|
|
334
|
+
// private _hasItemsBullet = true;
|
|
335
|
+
// private _hasLeftIndent = true;
|
|
373
336
|
constructor(elementRef) {
|
|
374
337
|
this.elementRef = elementRef;
|
|
338
|
+
// @Input()
|
|
339
|
+
// get hasItemsBullet(): boolean {
|
|
340
|
+
// return this._hasItemsBullet;
|
|
341
|
+
// }
|
|
342
|
+
// set hasItemsBullet(value: BooleanInput) {
|
|
343
|
+
// this._hasItemsBullet = coerceBooleanProperty(value);
|
|
344
|
+
// }
|
|
345
|
+
// @Input()
|
|
346
|
+
// get hasLeftIndent(): boolean {
|
|
347
|
+
// return this._hasLeftIndent;
|
|
348
|
+
// }
|
|
349
|
+
// set hasLeftIndent(value: BooleanInput) {
|
|
350
|
+
// this._hasLeftIndent = coerceBooleanProperty(value);
|
|
351
|
+
// }
|
|
375
352
|
this.tabindex = '0';
|
|
376
353
|
this.ariaRole = 'tree';
|
|
377
354
|
this.ariaLabel = '';
|
|
@@ -388,20 +365,18 @@ class EuiTreeListComponent {
|
|
|
388
365
|
this._isShowToolbarToggle = true;
|
|
389
366
|
this._isExpanded = false;
|
|
390
367
|
this._hasItemsUrl = false;
|
|
391
|
-
this._hasItemsBullet = true;
|
|
392
|
-
this._hasLeftIndent = true;
|
|
393
368
|
}
|
|
394
369
|
ngAfterContentInit() {
|
|
395
370
|
this.classes = '';
|
|
396
|
-
if (!this.hasItemsBullet) {
|
|
397
|
-
|
|
398
|
-
}
|
|
399
|
-
if (this.hasLeftIndent) {
|
|
400
|
-
|
|
401
|
-
}
|
|
402
|
-
if (this.hasItemsUrl) {
|
|
403
|
-
|
|
404
|
-
}
|
|
371
|
+
// if (!this.hasItemsBullet) {
|
|
372
|
+
// this.classes += ' eui-tree-list--no-bullets';
|
|
373
|
+
// }
|
|
374
|
+
// if (this.hasLeftIndent) {
|
|
375
|
+
// this.classes += ' eui-tree-list--with-left-indent';
|
|
376
|
+
// }
|
|
377
|
+
// if (this.hasItemsUrl) {
|
|
378
|
+
// this.classes += ' eui-tree-list--with-items-url';
|
|
379
|
+
// }
|
|
405
380
|
}
|
|
406
381
|
ngAfterViewInit() {
|
|
407
382
|
const treeItemIds = [];
|
|
@@ -583,14 +558,12 @@ class EuiTreeListComponent {
|
|
|
583
558
|
}
|
|
584
559
|
}
|
|
585
560
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
586
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeListComponent, selector: "eui-tree-list", inputs: {
|
|
561
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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: "<!-- <ux-a-toolbar-filter\n #uxToolbarFilter\n [filterValue]=\"toolbarFilterValue\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n [isToggleExpanded]=\"isExpanded\"\n (filter)=\"onFilter($event)\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n filterLabel=\"{{ filterLabel }}\"\n expandAllLabel=\"{{ expandAllLabel }}\"\n collapseAllLabel=\"{{ collapseAllLabel }}\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n <ng-content select=\"uxTreeListToolbarContent\"></ng-content>\n</ux-a-toolbar-filter> -->\n\n<div\n class=\"eui-tree-list\"\n [attr.role]=\"ariaRole\"\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-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.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-base-color-grey-80);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-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.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-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-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-base-color-grey-80)}.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:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);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--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
587
562
|
}
|
|
588
563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeListComponent, decorators: [{
|
|
589
564
|
type: Component,
|
|
590
|
-
args: [{ selector: 'eui-tree-list', encapsulation: ViewEncapsulation.None, template: "<!-- <ux-a-toolbar-filter\n #uxToolbarFilter\n [filterValue]=\"toolbarFilterValue\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n [isToggleExpanded]=\"isExpanded\"\n (filter)=\"onFilter($event)\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n filterLabel=\"{{ filterLabel }}\"\n expandAllLabel=\"{{ expandAllLabel }}\"\n collapseAllLabel=\"{{ collapseAllLabel }}\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n <ng-content select=\"uxTreeListToolbarContent\"></ng-content>\n</ux-a-toolbar-filter> -->\n\n<div\n class=\"eui-tree-list
|
|
591
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: {
|
|
592
|
-
type: Input
|
|
593
|
-
}], isShowToolbar: [{
|
|
565
|
+
args: [{ selector: 'eui-tree-list', encapsulation: ViewEncapsulation.None, template: "<!-- <ux-a-toolbar-filter\n #uxToolbarFilter\n [filterValue]=\"toolbarFilterValue\"\n [isVisible]=\"isShowToolbar\"\n [isToggleVisible]=\"isShowToolbarToggle\"\n [isToggleExpanded]=\"isExpanded\"\n (filter)=\"onFilter($event)\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n filterLabel=\"{{ filterLabel }}\"\n expandAllLabel=\"{{ expandAllLabel }}\"\n collapseAllLabel=\"{{ collapseAllLabel }}\"\n attr.data-e2e=\"{{ e2eAttr }}-a-toolbar-filter\">\n <ng-content select=\"uxTreeListToolbarContent\"></ng-content>\n</ux-a-toolbar-filter> -->\n\n<div\n class=\"eui-tree-list\"\n [attr.role]=\"ariaRole\"\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-item{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tree-list-item-header{border-left:3px solid transparent;text-decoration:none}.eui-tree-list-item-header:hover,.eui-tree-list-item-header:focus{text-decoration:none}.eui-tree-list-item-header--primary{border-left:5px solid var(--eui-base-color-primary-100)}.eui-tree-list-item-header--info{border-left:5px solid var(--eui-base-color-info-100)}.eui-tree-list-item-header--success{border-left:5px solid var(--eui-base-color-success-100)}.eui-tree-list-item-header--warning{border-left:5px solid var(--eui-base-color-warning-100)}.eui-tree-list-item-header--danger{border-left:5px solid var(--eui-base-color-danger-100)}.eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-s);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-tree-list-item-header__content:active:not([readonly]),.eui-tree-list-item-header__content:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content [tabindex=\"0\"]:active:not([readonly]),.eui-tree-list-item-header__content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tree-list-item-header__content-right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto;margin-right:var(--eui-base-spacing-xs)}.eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-primary-100);margin-right:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.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-base-color-grey-80);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-base-color-grey-10);padding:var(--eui-base-spacing-xs)}.eui-tree-list .eui-tree-list{border-top:1px solid var(--eui-base-color-grey-10)}.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-base-color-grey-90)}.eui-tree-list .eui-tree-list .eui-tree-list-item-header__content-right-content-sub{color:var(--eui-base-color-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-base-color-grey-80)}.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:\"\"}euitreelistitemcustomcontent{align-items:center;display:flex;width:100%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}euitreelistitemsublabel{align-items:center;display:flex}.eui-tree-list-item__hover-content{background-color:var(--eui-base-color-primary-110);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--advanced{background-color:var(--eui-base-color-white);display:flex;flex-direction:column;position:relative;width:100%}.eui-tree-list--advanced eui-tree-list-item,.eui-tree-list--advanced .eui-tree-list-item{border-top:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;width:100%}.eui-tree-list--advanced .eui-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eui-base-spacing-2xs)}\n"] }]
|
|
566
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isShowToolbar: [{
|
|
594
567
|
type: Input
|
|
595
568
|
}], isShowToolbarToggle: [{
|
|
596
569
|
type: Input
|
|
@@ -606,10 +579,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
|
|
|
606
579
|
type: Input
|
|
607
580
|
}], hasItemsUrl: [{
|
|
608
581
|
type: Input
|
|
609
|
-
}], hasItemsBullet: [{
|
|
610
|
-
type: Input
|
|
611
|
-
}], hasLeftIndent: [{
|
|
612
|
-
type: Input
|
|
613
582
|
}], tabindex: [{
|
|
614
583
|
type: Input
|
|
615
584
|
}], ariaRole: [{
|