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