@eui/components 15.3.4-snapshot-1684915632478 → 15.3.4
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/UxTreeComponent.html +5 -5
- package/docs/components/UxTreeNodeComponent.html +1 -1
- package/docs/dependencies.html +2 -2
- 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/docs/modules/UxTreeComponentModule.html +0 -9
- package/esm2020/eui-timepicker/eui-timepicker.component.mjs +4 -1
- package/esm2020/legacy/ux-dropdown-tree/ux-dropdown-tree.component.mjs +2 -2
- package/esm2020/legacy/ux-tree/ux-tree.component.mjs +18 -23
- package/eui-timepicker/eui-timepicker.component.d.ts.map +1 -1
- package/fesm2015/eui-components-eui-timepicker.mjs +3 -0
- package/fesm2015/eui-components-eui-timepicker.mjs.map +1 -1
- package/fesm2015/eui-components-legacy-ux-dropdown-tree.mjs +2 -2
- package/fesm2015/eui-components-legacy-ux-dropdown-tree.mjs.map +1 -1
- package/fesm2015/eui-components-legacy-ux-tree.mjs +17 -22
- package/fesm2015/eui-components-legacy-ux-tree.mjs.map +1 -1
- package/fesm2020/eui-components-eui-timepicker.mjs +3 -0
- package/fesm2020/eui-components-eui-timepicker.mjs.map +1 -1
- package/fesm2020/eui-components-legacy-ux-dropdown-tree.mjs +2 -2
- package/fesm2020/eui-components-legacy-ux-dropdown-tree.mjs.map +1 -1
- package/fesm2020/eui-components-legacy-ux-tree.mjs +17 -22
- package/fesm2020/eui-components-legacy-ux-tree.mjs.map +1 -1
- package/legacy/ux-tree/ux-tree.component.d.ts +1 -2
- package/legacy/ux-tree/ux-tree.component.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, TemplateRef, ViewEncapsulation, ContentChild, ContentChildren, ViewChildren, ViewChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i3 from '@angular/forms';
|
|
5
6
|
import { FormsModule } from '@angular/forms';
|
|
6
7
|
import * as i6 from '@ngx-translate/core';
|
|
7
8
|
import { TranslateModule } from '@ngx-translate/core';
|
|
@@ -12,12 +13,10 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
|
12
13
|
import { UxTemplateDirective } from '@eui/components/legacy/common/ux-directives';
|
|
13
14
|
import * as i7 from '@eui/deprecated/ux-a-toolbar-filter';
|
|
14
15
|
import { UxToolbarFilterComponentModule } from '@eui/deprecated/ux-a-toolbar-filter';
|
|
15
|
-
import * as
|
|
16
|
+
import * as i4 from '@eui/components/legacy/ux-button';
|
|
16
17
|
import { UxButtonComponentModule } from '@eui/components/legacy/ux-button';
|
|
17
|
-
import * as
|
|
18
|
+
import * as i5 from '@eui/components/legacy/ux-badge';
|
|
18
19
|
import { UxBadgeComponentModule } from '@eui/components/legacy/ux-badge';
|
|
19
|
-
import * as i5 from '@eui/components/eui-icon';
|
|
20
|
-
import { EuiIconModule } from '@eui/components/eui-icon';
|
|
21
20
|
import * as i1 from '@angular/router';
|
|
22
21
|
|
|
23
22
|
class UxTreeNodeComponent {
|
|
@@ -182,7 +181,6 @@ class UxTreeNodeComponent {
|
|
|
182
181
|
}
|
|
183
182
|
}
|
|
184
183
|
onCheckboxChange(uxLink, evt) {
|
|
185
|
-
uxLink.selected = !evt.target.checked;
|
|
186
184
|
if (this.isRecursiveSelection) {
|
|
187
185
|
if (!uxLink.selected) {
|
|
188
186
|
uxLink.indeterminate = false;
|
|
@@ -306,10 +304,10 @@ class UxTreeNodeComponent {
|
|
|
306
304
|
}
|
|
307
305
|
}
|
|
308
306
|
/** @nocollapse */ UxTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UxTreeNodeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
309
|
-
/** @nocollapse */ UxTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UxTreeNodeComponent, selector: "ux-tree-node", inputs: { expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", templateVariable: "templateVariable", node: "node", nodeContentTemplate: "nodeContentTemplate", e2eAttr: "e2eAttr", isFirst: "isFirst", isLast: "isLast", isRootNode: "isRootNode", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", isShowActiveNode: "isShowActiveNode", isHideToggles: "isHideToggles", isClickSelectingNode: "isClickSelectingNode", highlightPath: "highlightPath", autoTranslate: "autoTranslate", hasSelectAll: "hasSelectAll" }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", selectionChange: "selectionChange" }, ngImport: i0, template: "<li\n *ngIf=\"node.visible\"\n class=\"ux-tree__node\"\n [class.first-child]=\"isFirst\"\n [class.last-child]=\"isLast\"\n [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__node--disabled]=\"node.disabled\"\n title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n <ux-button\n (click)=\"onNodeToggle($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\"\n styleClass=\"ux-tree__node-toggle-icon\"\n *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n [isSmall]=\"true\"\n [isFlat]=\"true\"\n [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\"\n [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></ux-button>\n\n <span\n *ngIf=\"isMultiselect\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <eui-icon-svg\n *ngIf=\"node.selected && !node.indeterminate\"\n euiPrimary\n icon=\"eui-checkbox\"\n fillColor=\"primary\"\n (click)=\"onCheckboxChange(node, { target: { checked: true } })\"\n aria-label=\"Check\">\n </eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"!node.selected\"\n icon=\"eui-checkbox-outline\"\n fillColor=\"grey-25\"\n (click)=\"onCheckboxChange(node, { target: { checked: false } })\"\n aria-label=\"Uncheck\">\n </eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"node.indeterminate && node.selected\"\n euiPrimary\n icon=\"eui-checkbox-intermediate\"\n fillColor=\"primary\"\n (click)=\"onCheckboxChange(node, { target: { checked: true } })\"\n aria-label=\"Uncheck\">\n </eui-icon-svg>\n </span>\n\n <div\n *ngIf=\"nodeContentTemplate\"\n class=\"ux-tree__custom-content\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <ng-template [ngTemplateOutlet]=\"nodeContentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-template>\n </div>\n\n <ng-container *ngIf=\"!nodeContentTemplate\">\n <ng-container *ngIf=\"node.typeLabel || node.iconClass\">\n <span\n *ngIf=\"node.typeLabel\"\n class=\"ux-tree__node-type ux-tree__node-type--{{ node.typeClass }}\"\n [class.ux-tree__node-type-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n {{ node.typeLabel }}\n </span>\n\n <span *ngIf=\"node.iconClass\" class=\"ux-tree__node-icon ux-tree__node-type--{{ node.iconTypeClass }}\">\n <span class=\"{{ node.iconClass }}\"></span>\n </span>\n\n <div class=\"ux-tree__node-label-wrapped\">\n <span\n [class.text-muted]=\"node.disabled\"\n [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n <span *ngIf=\"autoTranslate; else manualTranslation\">\n {{ node.label | translate }}\n </span>\n <ng-template #manualTranslation>{{ node.label }}</ng-template>\n <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!(node.typeLabel || node.iconClass)\">\n <span\n class=\"ux-tree__node-label\"\n [class.ux-tree__node-label-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n [class.text-muted]=\"node.disabled\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n <span *ngIf=\"autoTranslate; else manualTranslation\">\n {{ node.label | translate }}\n </span>\n <ng-template #manualTranslation>{{ node.label }}</ng-template>\n <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n </span>\n </ng-container>\n\n <div *ngIf=\"node.badges\" class=\"eui-u-ml-auto\">\n <ux-badge\n *ngFor=\"let badge of node.badges\"\n styleClass=\"ux-tree__node-badge\"\n isTiny=\"true\"\n isOutline=\"true\"\n isPill=\"true\"\n typeClass=\"{{ badge.typeClass }}\">\n {{ badge.label }}\n </ux-badge>\n </div>\n\n <span\n *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\"\n class=\"ux-tree__node-metacontent-toggle ux-tree__node-clickable\"\n (click)=\"onMetadataNodeToggle($event, node)\">\n <eui-icon-svg *ngIf=\"node.expanded\" icon=\"eui-chevron-down\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"!node.expanded\" icon=\"eui-chevron-forward\"></eui-icon-svg>\n </span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"node.expanded\">\n <ul *ngIf=\"hasNodeChildren(node)\" class=\"ux-tree__nodes\">\n <ux-tree-node\n *ngFor=\"let subNode of node.children; let isFirst = first; let isLast = last; trackBy: trackByFn\"\n [node]=\"subNode\"\n [isMultiselect]=\"isMultiselect\"\n [isRecursiveSelection]=\"isRecursiveSelection\"\n (nodeClick)=\"onSubNodeClick($event)\"\n (nodeToggle)=\"onSubNodeToggle($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n [isFirst]=\"isFirst\"\n [isLast]=\"isLast\"\n [isClickTogglingNode]=\"isClickTogglingNode\"\n expandedIconClass=\"{{ expandedIconClass }}\"\n collapsedIconClass=\"{{ collapsedIconClass }}\"\n [templateVariable]=\"templateVariable\"\n [nodeContentTemplate]=\"nodeContentTemplate\"\n [isShowActiveNode]=\"isShowActiveNode\"\n [isHideToggles]=\"isHideToggles\"\n [isClickSelectingNode]=\"isClickSelectingNode\"\n [highlightPath]=\"highlightPath\"\n [isRecursiveParentSelection]=\"isRecursiveParentSelection\"\n [autoTranslate]=\"autoTranslate\">\n </ux-tree-node>\n </ul>\n <div *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\" class=\"ux-tree__node-metacontent\">\n <ng-template [ngTemplateOutlet]=\"templateVariable\" [ngTemplateOutletContext]=\"{ metadata: node.metadata }\"></ng-template>\n </div>\n </ng-container>\n</li>\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: "component", type: i3.UxButtonComponent, selector: "ux-button", inputs: ["type", "styleClass", "typeClass", "iconClass", "isOutline", "isSecondary", "isSmall", "isLarge", "isBlock", "isFlat", "isLineWrap", "tabindex", "ariaLabel", "isDisabled", "e2eAttr"] }, { kind: "component", type: i4.UxBadgeComponent, selector: "ux-badge", inputs: ["styleClass", "typeClass", "isSmall", "isLarge", "isTiny", "isTinier", "isPill", "isOutline", "e2eAttr"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: UxTreeNodeComponent, selector: "ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
|
|
307
|
+
/** @nocollapse */ UxTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UxTreeNodeComponent, selector: "ux-tree-node", inputs: { expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", templateVariable: "templateVariable", node: "node", nodeContentTemplate: "nodeContentTemplate", e2eAttr: "e2eAttr", isFirst: "isFirst", isLast: "isLast", isRootNode: "isRootNode", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", isShowActiveNode: "isShowActiveNode", isHideToggles: "isHideToggles", isClickSelectingNode: "isClickSelectingNode", highlightPath: "highlightPath", autoTranslate: "autoTranslate", hasSelectAll: "hasSelectAll" }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", selectionChange: "selectionChange" }, ngImport: i0, template: "<li\n *ngIf=\"node.visible\"\n class=\"ux-tree__node\"\n [class.first-child]=\"isFirst\"\n [class.last-child]=\"isLast\"\n [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__node--disabled]=\"node.disabled\"\n title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n <ux-button\n (click)=\"onNodeToggle($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\"\n styleClass=\"ux-tree__node-toggle-icon\"\n *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n [isSmall]=\"true\"\n [isFlat]=\"true\"\n [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\"\n [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></ux-button>\n\n <span\n *ngIf=\"isMultiselect\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <input\n type=\"checkbox\"\n class=\"ux-input__checkbox\"\n [class.checkbox-label-indeterminate]=\"node.indeterminate\"\n [class.ux-input__checkbox--selected]=\"node.selected && !node.indeterminate\"\n [id]=\"nodeId\"\n [value]=\"node.label\"\n [disabled]=\"node.disabled\"\n [(ngModel)]=\"node.selected\"\n [attr.aria-label]=\"checkInputLabel()\"\n (change)=\"onCheckboxChange(node, $event)\" />\n <label class=\"ux-tree__node-checkbox-label\" [class.checkbox-label-indeterminate]=\"node.indeterminate\" [for]=\"nodeId\"> </label>\n </span>\n\n <div\n *ngIf=\"nodeContentTemplate\"\n class=\"ux-tree__custom-content\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <ng-template [ngTemplateOutlet]=\"nodeContentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-template>\n </div>\n\n <ng-container *ngIf=\"!nodeContentTemplate\">\n <ng-container *ngIf=\"node.typeLabel || node.iconClass\">\n <span\n *ngIf=\"node.typeLabel\"\n class=\"ux-tree__node-type ux-tree__node-type--{{ node.typeClass }}\"\n [class.ux-tree__node-type-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n {{ node.typeLabel }}\n </span>\n\n <span *ngIf=\"node.iconClass\" class=\"ux-tree__node-icon ux-tree__node-type--{{ node.iconTypeClass }}\">\n <span class=\"{{ node.iconClass }}\"></span>\n </span>\n\n <div class=\"ux-tree__node-label-wrapped\">\n <span\n [class.text-muted]=\"node.disabled\"\n [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n <span *ngIf=\"autoTranslate; else manualTranslation\">\n {{ node.label | translate }}\n </span>\n <ng-template #manualTranslation>{{ node.label }}</ng-template>\n <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!(node.typeLabel || node.iconClass)\">\n <span\n class=\"ux-tree__node-label\"\n [class.ux-tree__node-label-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n [class.text-muted]=\"node.disabled\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n <span *ngIf=\"autoTranslate; else manualTranslation\">\n {{ node.label | translate }}\n </span>\n <ng-template #manualTranslation>{{ node.label }}</ng-template>\n <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n </span>\n </ng-container>\n\n <div *ngIf=\"node.badges\" class=\"eui-u-ml-auto\">\n <ux-badge\n *ngFor=\"let badge of node.badges\"\n styleClass=\"ux-tree__node-badge\"\n isTiny=\"true\"\n isOutline=\"true\"\n isPill=\"true\"\n typeClass=\"{{ badge.typeClass }}\">\n {{ badge.label }}\n </ux-badge>\n </div>\n\n <span\n *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\"\n class=\"ux-tree__node-metacontent-toggle ux-tree__node-clickable\"\n (click)=\"onMetadataNodeToggle($event, node)\">\n <span class=\"eui-icon\" [ngClass]=\"node.expanded ? 'eui-icon eui-icon-angle-down' : 'eui-icon eui-icon-angle-right'\"></span>\n </span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"node.expanded\">\n <ul *ngIf=\"hasNodeChildren(node)\" class=\"ux-tree__nodes\">\n <ux-tree-node\n *ngFor=\"let subNode of node.children; let isFirst = first; let isLast = last; trackBy: trackByFn\"\n [node]=\"subNode\"\n [isMultiselect]=\"isMultiselect\"\n [isRecursiveSelection]=\"isRecursiveSelection\"\n (nodeClick)=\"onSubNodeClick($event)\"\n (nodeToggle)=\"onSubNodeToggle($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n [isFirst]=\"isFirst\"\n [isLast]=\"isLast\"\n [isClickTogglingNode]=\"isClickTogglingNode\"\n expandedIconClass=\"{{ expandedIconClass }}\"\n collapsedIconClass=\"{{ collapsedIconClass }}\"\n [templateVariable]=\"templateVariable\"\n [nodeContentTemplate]=\"nodeContentTemplate\"\n [isShowActiveNode]=\"isShowActiveNode\"\n [isHideToggles]=\"isHideToggles\"\n [isClickSelectingNode]=\"isClickSelectingNode\"\n [highlightPath]=\"highlightPath\"\n [isRecursiveParentSelection]=\"isRecursiveParentSelection\"\n [autoTranslate]=\"autoTranslate\">\n </ux-tree-node>\n </ul>\n <div *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\" class=\"ux-tree__node-metacontent\">\n <ng-template [ngTemplateOutlet]=\"templateVariable\" [ngTemplateOutletContext]=\"{ metadata: node.metadata }\"></ng-template>\n </div>\n </ng-container>\n</li>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.UxButtonComponent, selector: "ux-button", inputs: ["type", "styleClass", "typeClass", "iconClass", "isOutline", "isSecondary", "isSmall", "isLarge", "isBlock", "isFlat", "isLineWrap", "tabindex", "ariaLabel", "isDisabled", "e2eAttr"] }, { kind: "component", type: i5.UxBadgeComponent, selector: "ux-badge", inputs: ["styleClass", "typeClass", "isSmall", "isLarge", "isTiny", "isTinier", "isPill", "isOutline", "e2eAttr"] }, { kind: "component", type: UxTreeNodeComponent, selector: "ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
|
|
310
308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UxTreeNodeComponent, decorators: [{
|
|
311
309
|
type: Component,
|
|
312
|
-
args: [{ selector: 'ux-tree-node', template: "<li\n *ngIf=\"node.visible\"\n class=\"ux-tree__node\"\n [class.first-child]=\"isFirst\"\n [class.last-child]=\"isLast\"\n [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__node--disabled]=\"node.disabled\"\n title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n <ux-button\n (click)=\"onNodeToggle($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\"\n styleClass=\"ux-tree__node-toggle-icon\"\n *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n [isSmall]=\"true\"\n [isFlat]=\"true\"\n [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\"\n [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></ux-button>\n\n <span\n *ngIf=\"isMultiselect\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <
|
|
310
|
+
args: [{ selector: 'ux-tree-node', template: "<li\n *ngIf=\"node.visible\"\n class=\"ux-tree__node\"\n [class.first-child]=\"isFirst\"\n [class.last-child]=\"isLast\"\n [class.ux-tree__node--expandable]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__node--disabled]=\"node.disabled\"\n title=\"{{ node.tooltipLabel ? node.tooltipLabel : node.label }}\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"ux-tree__node-wrapper\" [class.ux-tree__node--selected]=\"node.selected\">\n <ux-button\n (click)=\"onNodeToggle($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\"\n styleClass=\"ux-tree__node-toggle-icon\"\n *ngIf=\"hasNodeChildren(node) && !isHideToggles\"\n [isSmall]=\"true\"\n [isFlat]=\"true\"\n [ariaLabel]=\"node.expanded ? 'Collapse' : 'Expand'\"\n [iconClass]=\"node.expanded ? expandedIconClass : collapsedIconClass\"></ux-button>\n\n <span\n *ngIf=\"isMultiselect\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <input\n type=\"checkbox\"\n class=\"ux-input__checkbox\"\n [class.checkbox-label-indeterminate]=\"node.indeterminate\"\n [class.ux-input__checkbox--selected]=\"node.selected && !node.indeterminate\"\n [id]=\"nodeId\"\n [value]=\"node.label\"\n [disabled]=\"node.disabled\"\n [(ngModel)]=\"node.selected\"\n [attr.aria-label]=\"checkInputLabel()\"\n (change)=\"onCheckboxChange(node, $event)\" />\n <label class=\"ux-tree__node-checkbox-label\" [class.checkbox-label-indeterminate]=\"node.indeterminate\" [for]=\"nodeId\"> </label>\n </span>\n\n <div\n *ngIf=\"nodeContentTemplate\"\n class=\"ux-tree__custom-content\"\n [class.ux-tree__parent]=\"hasNodeChildren(node) && !isHideToggles\"\n [class.ux-tree__leaf]=\"!hasNodeChildren(node) && !isHideToggles\">\n <ng-template [ngTemplateOutlet]=\"nodeContentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-template>\n </div>\n\n <ng-container *ngIf=\"!nodeContentTemplate\">\n <ng-container *ngIf=\"node.typeLabel || node.iconClass\">\n <span\n *ngIf=\"node.typeLabel\"\n class=\"ux-tree__node-type ux-tree__node-type--{{ node.typeClass }}\"\n [class.ux-tree__node-type-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n {{ node.typeLabel }}\n </span>\n\n <span *ngIf=\"node.iconClass\" class=\"ux-tree__node-icon ux-tree__node-type--{{ node.iconTypeClass }}\">\n <span class=\"{{ node.iconClass }}\"></span>\n </span>\n\n <div class=\"ux-tree__node-label-wrapped\">\n <span\n [class.text-muted]=\"node.disabled\"\n [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n <span *ngIf=\"autoTranslate; else manualTranslation\">\n {{ node.label | translate }}\n </span>\n <ng-template #manualTranslation>{{ node.label }}</ng-template>\n <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!(node.typeLabel || node.iconClass)\">\n <span\n class=\"ux-tree__node-label\"\n [class.ux-tree__node-label-parent]=\"hasNodeChildren(node) && !isHideToggles && !isMultiselect\"\n [class.ux-tree__node-label--highlighted]=\"node['highlighted']\"\n [class.text-muted]=\"node.disabled\"\n (click)=\"onNodeClick($event, node)\"\n (keydown)=\"onNodeKeydown($event, node)\">\n <span *ngIf=\"autoTranslate; else manualTranslation\">\n {{ node.label | translate }}\n </span>\n <ng-template #manualTranslation>{{ node.label }}</ng-template>\n <span [class.eui-u-text-link-external]=\"node && node.urlExternal\"></span>\n </span>\n </ng-container>\n\n <div *ngIf=\"node.badges\" class=\"eui-u-ml-auto\">\n <ux-badge\n *ngFor=\"let badge of node.badges\"\n styleClass=\"ux-tree__node-badge\"\n isTiny=\"true\"\n isOutline=\"true\"\n isPill=\"true\"\n typeClass=\"{{ badge.typeClass }}\">\n {{ badge.label }}\n </ux-badge>\n </div>\n\n <span\n *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\"\n class=\"ux-tree__node-metacontent-toggle ux-tree__node-clickable\"\n (click)=\"onMetadataNodeToggle($event, node)\">\n <span class=\"eui-icon\" [ngClass]=\"node.expanded ? 'eui-icon eui-icon-angle-down' : 'eui-icon eui-icon-angle-right'\"></span>\n </span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"node.expanded\">\n <ul *ngIf=\"hasNodeChildren(node)\" class=\"ux-tree__nodes\">\n <ux-tree-node\n *ngFor=\"let subNode of node.children; let isFirst = first; let isLast = last; trackBy: trackByFn\"\n [node]=\"subNode\"\n [isMultiselect]=\"isMultiselect\"\n [isRecursiveSelection]=\"isRecursiveSelection\"\n (nodeClick)=\"onSubNodeClick($event)\"\n (nodeToggle)=\"onSubNodeToggle($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n [isFirst]=\"isFirst\"\n [isLast]=\"isLast\"\n [isClickTogglingNode]=\"isClickTogglingNode\"\n expandedIconClass=\"{{ expandedIconClass }}\"\n collapsedIconClass=\"{{ collapsedIconClass }}\"\n [templateVariable]=\"templateVariable\"\n [nodeContentTemplate]=\"nodeContentTemplate\"\n [isShowActiveNode]=\"isShowActiveNode\"\n [isHideToggles]=\"isHideToggles\"\n [isClickSelectingNode]=\"isClickSelectingNode\"\n [highlightPath]=\"highlightPath\"\n [isRecursiveParentSelection]=\"isRecursiveParentSelection\"\n [autoTranslate]=\"autoTranslate\">\n </ux-tree-node>\n </ul>\n <div *ngIf=\"node.metadata && node.metadata.title && node.metadata.title.length > 0\" class=\"ux-tree__node-metacontent\">\n <ng-template [ngTemplateOutlet]=\"templateVariable\" [ngTemplateOutletContext]=\"{ metadata: node.metadata }\"></ng-template>\n </div>\n </ng-container>\n</li>\n" }]
|
|
313
311
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { expandedIconClass: [{
|
|
314
312
|
type: Input
|
|
315
313
|
}], collapsedIconClass: [{
|
|
@@ -780,7 +778,7 @@ class UxTreeComponent {
|
|
|
780
778
|
attr.data-e2e="{{ e2eAttr }}-a-toolbar-filter">
|
|
781
779
|
</ux-a-toolbar-filter>
|
|
782
780
|
|
|
783
|
-
<
|
|
781
|
+
<div class="flex-container" *ngIf="hasSelectAll || hasSelectAllFiltered">
|
|
784
782
|
<input
|
|
785
783
|
type="checkbox"
|
|
786
784
|
class="ux-input__checkbox"
|
|
@@ -793,13 +791,13 @@ class UxTreeComponent {
|
|
|
793
791
|
for="selectAll"
|
|
794
792
|
[class.ux-tree__node-checkbox-label--onelevel]="checkForChildren()">
|
|
795
793
|
<ng-container *ngIf="!allSelected && !isMinimumOneSelected && !isAllSelected">
|
|
796
|
-
|
|
794
|
+
{{ 'eui.uxtree.SELECT-ALL' | translate }}
|
|
797
795
|
</ng-container>
|
|
798
796
|
<ng-container *ngIf="allSelected || isMinimumOneSelected || isAllSelected">
|
|
799
|
-
|
|
797
|
+
{{ 'eui.uxtree.UNSELECT-ALL' | translate }}
|
|
800
798
|
</ng-container>
|
|
801
799
|
</label>
|
|
802
|
-
</
|
|
800
|
+
</div>
|
|
803
801
|
<ng-container *ngIf="nodes.length > 500 && !hasSelectAll && !hasSelectAllFiltered; else noVirtualScroll">
|
|
804
802
|
<cdk-virtual-scroll-viewport
|
|
805
803
|
#virtualScrolling
|
|
@@ -869,7 +867,7 @@ class UxTreeComponent {
|
|
|
869
867
|
</ux-tree-node>
|
|
870
868
|
</ul>
|
|
871
869
|
</ng-template>
|
|
872
|
-
`, isInline: true, styles: ["@charset \"UTF-8\";.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{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)}.ux-tree li.ux-tree__node--expandable:before{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-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree{font-size:95%}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;left:6px;top:-6px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0 var(--eui-base-spacing-2xs)!important;padding:10px!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox:after{top:0!important}\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: "component", type: i7.UxToolbarFilterComponent, selector: "ux-a-toolbar-filter", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: UxTreeNodeComponent, selector: "ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
870
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden){-webkit-appearance:inherit;appearance:inherit;align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-s);position:relative;transition:all .25s ease;vertical-align:top;width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));accent-color:var(--eui-base-color-white);background:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-20)}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)+label{display:inline-flex;cursor:pointer;margin-bottom:inherit;margin-right:var(--eui-base-spacing-m);vertical-align:middle;white-space:inherit}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):checked{background:var(--eui-base-color-primary-100);opacity:1}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):checked[id=selectAll]:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):checked:before:not(.checkbox-label-indeterminate){height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):disabled:not([readonly]){background:var(--eui-base-color-grey-15);opacity:.25;pointer-events:none;-webkit-user-select:none;user-select:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):disabled:not([readonly]):checked:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23004494' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):disabled:not([readonly])+label{pointer-events:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)[readonly]{background:var(--eui-base-color-grey-35);opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)[readonly]:checked:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23004494' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)[readonly]+label{pointer-events:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):active,input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):focus{box-shadow:var(--eui-base-shadow-3);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{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)}.ux-tree li.ux-tree__node--expandable:before{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-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree{font-size:95%}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;position:relative;left:4px;bottom:2px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0!important;padding:0!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto;margin-right:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}\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: "component", type: i7.UxToolbarFilterComponent, selector: "ux-a-toolbar-filter", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: UxTreeNodeComponent, selector: "ux-tree-node", inputs: ["expandedIconClass", "collapsedIconClass", "templateVariable", "node", "nodeContentTemplate", "e2eAttr", "isFirst", "isLast", "isRootNode", "isClickTogglingNode", "isMultiselect", "isRecursiveSelection", "isRecursiveParentSelection", "isShowActiveNode", "isHideToggles", "isClickSelectingNode", "highlightPath", "autoTranslate", "hasSelectAll"], outputs: ["nodeClick", "nodeToggle", "selectionChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
873
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UxTreeComponent, decorators: [{
|
|
874
872
|
type: Component,
|
|
875
873
|
args: [{ selector: 'ux-tree', template: `
|
|
@@ -889,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
889
887
|
attr.data-e2e="{{ e2eAttr }}-a-toolbar-filter">
|
|
890
888
|
</ux-a-toolbar-filter>
|
|
891
889
|
|
|
892
|
-
<
|
|
890
|
+
<div class="flex-container" *ngIf="hasSelectAll || hasSelectAllFiltered">
|
|
893
891
|
<input
|
|
894
892
|
type="checkbox"
|
|
895
893
|
class="ux-input__checkbox"
|
|
@@ -902,13 +900,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
902
900
|
for="selectAll"
|
|
903
901
|
[class.ux-tree__node-checkbox-label--onelevel]="checkForChildren()">
|
|
904
902
|
<ng-container *ngIf="!allSelected && !isMinimumOneSelected && !isAllSelected">
|
|
905
|
-
|
|
903
|
+
{{ 'eui.uxtree.SELECT-ALL' | translate }}
|
|
906
904
|
</ng-container>
|
|
907
905
|
<ng-container *ngIf="allSelected || isMinimumOneSelected || isAllSelected">
|
|
908
|
-
|
|
906
|
+
{{ 'eui.uxtree.UNSELECT-ALL' | translate }}
|
|
909
907
|
</ng-container>
|
|
910
908
|
</label>
|
|
911
|
-
</
|
|
909
|
+
</div>
|
|
912
910
|
<ng-container *ngIf="nodes.length > 500 && !hasSelectAll && !hasSelectAllFiltered; else noVirtualScroll">
|
|
913
911
|
<cdk-virtual-scroll-viewport
|
|
914
912
|
#virtualScrolling
|
|
@@ -978,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
978
976
|
</ux-tree-node>
|
|
979
977
|
</ul>
|
|
980
978
|
</ng-template>
|
|
981
|
-
`, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{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)}.ux-tree li.ux-tree__node--expandable:before{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-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree{font-size:95%}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;left:6px;top:-6px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0 var(--eui-base-spacing-2xs)!important;padding:10px!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox:after{top:0!important}\n"] }]
|
|
979
|
+
`, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden){-webkit-appearance:inherit;appearance:inherit;align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-s);position:relative;transition:all .25s ease;vertical-align:top;width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));accent-color:var(--eui-base-color-white);background:var(--eui-base-color-white);border:2px solid var(--eui-base-color-grey-20)}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)+label{display:inline-flex;cursor:pointer;margin-bottom:inherit;margin-right:var(--eui-base-spacing-m);vertical-align:middle;white-space:inherit}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):checked{background:var(--eui-base-color-primary-100);opacity:1}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):checked[id=selectAll]:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):checked:before:not(.checkbox-label-indeterminate){height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):disabled:not([readonly]){background:var(--eui-base-color-grey-15);opacity:.25;pointer-events:none;-webkit-user-select:none;user-select:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):disabled:not([readonly]):checked:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23004494' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):disabled:not([readonly])+label{pointer-events:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)[readonly]{background:var(--eui-base-color-grey-35);opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)[readonly]:checked:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23004494' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden)[readonly]+label{pointer-events:none}input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):active,input[type=checkbox]:not(.eui-input-checkbox):not(.cdk-visually-hidden):focus{box-shadow:var(--eui-base-shadow-3);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.ux-tree,.ux-tree ul{list-style:none;margin:0 0 0 var(--eui-base-spacing-xs);padding:0;position:relative}.ux-tree ul{margin-left:var(--eui-base-spacing-m)}ul.ux-tree:before{content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute}.ux-tree:before,.ux-tree ul:before{border-left:1px solid var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;height:calc(100% - 12px);left:0;position:absolute;top:0;width:0}.ux-tree li{cursor:pointer;line-height:calc(1.75 * var(--eui-base-spacing-m));margin:0;padding:0 0 0 var(--eui-base-spacing-s);position:relative}.ux-tree li:before{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)}.ux-tree li.ux-tree__node--expandable:before{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-s)}.ux-tree li.ux-tree__node--disabled{pointer-events:none;cursor:none}.ux-tree li.last-child:before{bottom:0;height:auto;top:var(--eui-base-spacing-m)}.ux-tree{font-size:95%}.ux-tree--onelevel .ux-tree__node{padding:0}.ux-tree__node-wrapper{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-wrapper .ux-tree__parent{margin-left:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree--onelevel .ux-tree__node-wrapper .ux-tree__leaf{margin-left:var(--eui-base-spacing-xs)!important;margin-right:var(--eui-base-spacing-xs)}.ux-tree__node-wrapper .ux-tree__custom-content{align-items:center;display:inline-flex}.ux-tree__node-wrapper .ux-tree__custom-content.ux-tree__leaf{margin-left:var(--eui-base-spacing-l)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox--selected:after{background:transparent;color:var(--eui-color-white);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\");position:absolute!important}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox.checkbox-label-indeterminate:after{background:transparent;color:var(--eui-base-color-white);content:\"\\2013\"!important;position:relative;left:4px;bottom:2px}.ux-tree__node-label{margin-left:var(--eui-base-spacing-xl);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label.ux-tree__node-label-parent{margin-left:0}.ux-tree__node-label:focus,.ux-tree__node-label:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node--selected .ux-tree__node-label{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-label-wrapped{margin-left:var(--eui-base-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-tree__node-label-wrapped:focus,.ux-tree__node-label-wrapped:hover{color:var(--eui-base-color-primary-100);text-decoration:underline}.ux-tree__node-label-wrapped .ux-tree__node-label--highlighted{font-weight:700}.ux-tree__node--selected .ux-tree__node-label-wrapped{background-color:var(--eui-base-color-primary-5)}.ux-tree__node-toggle-icon{color:var(--eui-base-color-primary-100)}.ux-tree__node-toggle-icon .ux-button__icon{font-size:var(--eui-base-font-size-xl)!important}.ux-tree__node-type{align-items:center;background-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-white);display:inline-flex;font-size:var(--eui-base-font-size-s);height:var(--eui-base-spacing-m);margin:var(--eui-base-spacing-2xs) 0 0 var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-2xs);text-decoration:none}.ux-tree__node-type.ux-tree__node-type-parent{margin-left:var(--eui-base-spacing-xs)}.ux-tree__node-icon{color:var(--eui-base-color-grey-90);display:inline-flex}.ux-tree__node-type--primary{background-color:var(--eui-base-color-primary-100)}.ux-tree__node-type--info{background-color:var(--eui-base-color-info-100)}.ux-tree__node-type--success{background-color:var(--eui-base-color-success-100)}.ux-tree__node-type--warning{background-color:var(--eui-base-color-warning-100)}.ux-tree__node-type--danger{background-color:var(--eui-base-color-danger-100)}.ux-tree__node-badge{margin-left:var(--eui-base-spacing-xs);min-width:var(--eui-base-spacing-xl)}.ux-tree__node-metacontent-toggle{display:flex;font-size:var(--eui-base-font-size);margin-left:var(--eui-base-spacing-s);padding:0 var(--eui-base-spacing-3xs);box-shadow:var(--eui-base-shadow-1)}.ux-tree__node-metacontent{background-color:var(--eui-base-color-grey-5);margin-left:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-m)}.ux-tree__node-checkbox-label{margin:0!important;padding:0!important}.ux-tree__node-checkbox-label:after{left:12px!important}.ux-tree__node-checkbox-label--onelevel{margin:0 auto!important}.ux-tree--multiselect .ux-tree__node-wrapper{margin:3px 0}.ux-tree--multiselect .ux-tree__node-wrapper.ux-tree__node--selected .ux-tree__node-label{font-weight:700}.ux-tree--multiselect .ux-tree__node-label{margin-left:0;padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.ux-tree--multiselect .ux-tree__node .ux-tree__parent{line-height:normal;margin-left:0}.ux-tree--multiselect .ux-tree__node .ux-tree__leaf{line-height:normal;margin-left:var(--eui-base-spacing-xl)}.ux-tree--onelevel{margin:0}.ux-tree--onelevel:before{border-left:none}.ux-tree--onelevel .ux-tree__node:before{border-top:none}.ux-tree--hidelines{margin:0}.ux-tree--hidelines .ux-tree__nodes:before{border-left:none}.ux-tree--hidelines .ux-tree__node:before{display:none}.ux-tree--hidelines:before{border-left:none}.ux-tree__virtual-scrolling__container{height:200px}.ux-tree__virtual-scrolling__item{height:30px}.ux-tree__toolbar{margin-bottom:var(--eui-base-spacing-m)}.ux-tree__toolbar-trigger{float:left;margin-right:var(--eui-base-spacing-xs)}.ux-tree__toolbar-filter{float:left;position:relative}.ux-tree__toolbar-filter-input{min-width:100px}.ux-tree__toolbar-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox{clip:auto;margin-right:var(--eui-base-spacing-2xs)}.ux-tree__node-wrapper input[type=checkbox].ux-input__checkbox+label:after{content:none!important}\n"] }]
|
|
982
980
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { nodes: [{
|
|
983
981
|
type: Input
|
|
984
982
|
}], collapseAllLabel: [{
|
|
@@ -1059,16 +1057,14 @@ class UxTreeComponentModule {
|
|
|
1059
1057
|
UxButtonComponentModule,
|
|
1060
1058
|
UxBadgeComponentModule,
|
|
1061
1059
|
TranslateModule,
|
|
1062
|
-
ScrollingModule,
|
|
1063
|
-
EuiIconModule], exports: [UxTreeComponent, UxTreeNodeComponent] });
|
|
1060
|
+
ScrollingModule], exports: [UxTreeComponent, UxTreeNodeComponent] });
|
|
1064
1061
|
/** @nocollapse */ UxTreeComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UxTreeComponentModule, imports: [CommonModule,
|
|
1065
1062
|
FormsModule,
|
|
1066
1063
|
UxToolbarFilterComponentModule,
|
|
1067
1064
|
UxButtonComponentModule,
|
|
1068
1065
|
UxBadgeComponentModule,
|
|
1069
1066
|
TranslateModule,
|
|
1070
|
-
ScrollingModule
|
|
1071
|
-
EuiIconModule] });
|
|
1067
|
+
ScrollingModule] });
|
|
1072
1068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UxTreeComponentModule, decorators: [{
|
|
1073
1069
|
type: NgModule,
|
|
1074
1070
|
args: [{
|
|
@@ -1080,7 +1076,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
1080
1076
|
UxBadgeComponentModule,
|
|
1081
1077
|
TranslateModule,
|
|
1082
1078
|
ScrollingModule,
|
|
1083
|
-
EuiIconModule,
|
|
1084
1079
|
],
|
|
1085
1080
|
exports: [UxTreeComponent, UxTreeNodeComponent],
|
|
1086
1081
|
declarations: [UxTreeComponent, UxTreeNodeComponent],
|