@fundamental-ngx/core 0.41.0 → 0.41.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/esm2020/multi-combobox/base-multi-combobox.class.mjs +1 -1
  2. package/esm2020/multi-combobox/multi-combobox.component.mjs +3 -9
  3. package/esm2020/radio/radio-button/radio-button.component.mjs +22 -5
  4. package/esm2020/tree/components/tree-item/tree-item.component.mjs +296 -0
  5. package/esm2020/tree/data-source/tree-data-source-parser.mjs +22 -0
  6. package/esm2020/tree/data-source/tree-data-source.mjs +23 -0
  7. package/esm2020/tree/directives/tree-item-button.directive.mjs +16 -0
  8. package/esm2020/tree/directives/tree-item-def.directive.mjs +23 -0
  9. package/esm2020/tree/directives/tree-item-icon.directive.mjs +41 -0
  10. package/esm2020/tree/directives/tree-item.directive.mjs +26 -0
  11. package/esm2020/tree/models/base-tree-item.class.mjs +25 -0
  12. package/esm2020/tree/models/selection-type.mjs +2 -0
  13. package/esm2020/tree/models/tree-item-def-context.mjs +2 -0
  14. package/esm2020/tree/models/tree-item.mjs +2 -0
  15. package/esm2020/tree/public_api.mjs +14 -3
  16. package/esm2020/tree/tokens.mjs +3 -0
  17. package/esm2020/tree/tree.component.mjs +399 -57
  18. package/esm2020/tree/tree.module.mjs +83 -7
  19. package/esm2020/tree/tree.service.mjs +101 -0
  20. package/fesm2015/fundamental-ngx-core-multi-combobox.mjs +2 -8
  21. package/fesm2015/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
  22. package/fesm2015/fundamental-ngx-core-radio.mjs +21 -4
  23. package/fesm2015/fundamental-ngx-core-radio.mjs.map +1 -1
  24. package/fesm2015/fundamental-ngx-core-tree.mjs +997 -106
  25. package/fesm2015/fundamental-ngx-core-tree.mjs.map +1 -1
  26. package/fesm2020/fundamental-ngx-core-multi-combobox.mjs +2 -8
  27. package/fesm2020/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
  28. package/fesm2020/fundamental-ngx-core-radio.mjs +21 -4
  29. package/fesm2020/fundamental-ngx-core-radio.mjs.map +1 -1
  30. package/fesm2020/fundamental-ngx-core-tree.mjs +995 -106
  31. package/fesm2020/fundamental-ngx-core-tree.mjs.map +1 -1
  32. package/fundamental-ngx-core-v0.41.1-rc.0.tgz +0 -0
  33. package/multi-combobox/base-multi-combobox.class.d.ts +2 -2
  34. package/multi-combobox/multi-combobox.component.d.ts +2 -2
  35. package/package.json +3 -3
  36. package/radio/radio-button/radio-button.component.d.ts +9 -3
  37. package/schematics/add-dependencies/index.js +4 -4
  38. package/tree/components/tree-item/tree-item.component.d.ts +145 -0
  39. package/tree/data-source/tree-data-source-parser.d.ts +9 -0
  40. package/tree/data-source/tree-data-source.d.ts +22 -0
  41. package/tree/directives/tree-item-button.directive.d.ts +5 -0
  42. package/tree/directives/tree-item-def.directive.d.ts +18 -0
  43. package/tree/directives/tree-item-icon.directive.d.ts +13 -0
  44. package/tree/directives/tree-item.directive.d.ts +19 -0
  45. package/tree/models/base-tree-item.class.d.ts +91 -0
  46. package/tree/models/selection-type.d.ts +10 -0
  47. package/tree/models/tree-item-def-context.d.ts +3 -0
  48. package/tree/models/tree-item.d.ts +17 -0
  49. package/tree/public_api.d.ts +13 -2
  50. package/tree/tokens.d.ts +2 -0
  51. package/tree/tree.component.d.ts +137 -19
  52. package/tree/tree.module.d.ts +17 -7
  53. package/tree/tree.service.d.ts +62 -0
  54. package/esm2020/tree/tree-child.component.mjs +0 -66
  55. package/esm2020/tree/tree-row-object.model.mjs +0 -2
  56. package/fundamental-ngx-core-v0.41.0.tgz +0 -0
  57. package/tree/tree-child.component.d.ts +0 -27
  58. package/tree/tree-row-object.model.d.ts +0 -5
@@ -1,187 +1,1078 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChildren, NgModule } from '@angular/core';
3
- import * as i1 from '@angular/common';
2
+ import { Directive, Input, Injector, inject, ElementRef, Injectable, EventEmitter, ChangeDetectorRef, Component, ViewEncapsulation, Output, ContentChild, ViewChildren, ContentChildren, HostListener, ChangeDetectionStrategy, HostBinding, ViewChild, NgModule, InjectionToken } from '@angular/core';
3
+ import * as i3 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i2 from '@fundamental-ngx/core/button';
5
+ import * as i6 from '@angular/forms';
6
+ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7
+ import * as i4 from '@fundamental-ngx/cdk/utils';
8
+ import { uuidv4, DestroyedService, SelectionService, RtlService, KeyUtil, applyCssClass, FDK_SELECTABLE_ITEM_PROVIDER, SelectableItemDirective, RepeatDirective, ClickedBehaviorModule } from '@fundamental-ngx/cdk/utils';
9
+ import * as i4$1 from '@fundamental-ngx/core/checkbox';
10
+ import { CheckboxModule } from '@fundamental-ngx/core/checkbox';
11
+ import * as i7$1 from '@fundamental-ngx/core/radio';
12
+ import { RadioModule } from '@fundamental-ngx/core/radio';
13
+ import * as i5 from '@fundamental-ngx/core/skeleton';
14
+ import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
15
+ import * as i7 from '@fundamental-ngx/i18n';
16
+ import { I18nModule } from '@fundamental-ngx/i18n';
17
+ import { __decorate, __metadata } from 'tslib';
18
+ import { FocusKeyManager } from '@angular/cdk/a11y';
19
+ import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
20
+ import * as i1 from '@fundamental-ngx/cdk/data-source';
21
+ import { BaseDataSource, DataProvider, isDataSource, DataSourceDirective, FD_DATA_SOURCE_TRANSFORMER } from '@fundamental-ngx/cdk/data-source';
22
+ import * as i2 from '@fundamental-ngx/cdk/forms';
23
+ import { CvaDirective } from '@fundamental-ngx/cdk/forms';
24
+ import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
25
+ import { isObservable, BehaviorSubject, Subject, distinctUntilChanged, takeUntil, startWith, filter, Subscription, fromEvent, switchMap } from 'rxjs';
6
26
  import { ButtonModule } from '@fundamental-ngx/core/button';
7
- import * as i3 from '@fundamental-ngx/core/menu';
8
- import { MenuModule } from '@fundamental-ngx/core/menu';
27
+ import * as i3$1 from '@fundamental-ngx/core/icon';
9
28
  import { IconModule } from '@fundamental-ngx/core/icon';
10
29
  import { PopoverModule } from '@fundamental-ngx/core/popover';
30
+ import { MenuModule } from '@fundamental-ngx/core/menu';
11
31
 
12
- class TreeChildComponent {
13
- constructor() {
14
- /** @hidden */
15
- this.editClicked = new EventEmitter();
32
+ class FdTreeDataSource extends BaseDataSource {
33
+ /** @hidden */
34
+ constructor(dataProvider) {
35
+ super(dataProvider);
36
+ this.dataProvider = dataProvider;
16
37
  /** @hidden */
17
- this.deleteClicked = new EventEmitter();
38
+ this.limitless = true;
18
39
  }
40
+ }
41
+ class ArrayTreeDataSource extends FdTreeDataSource {
19
42
  /** @hidden */
20
- ngOnInit() {
21
- this.hideChildren = false;
43
+ constructor(data) {
44
+ super(new DataProvider(data));
22
45
  }
46
+ }
47
+ class ObservableTreeDataSource extends FdTreeDataSource {
23
48
  /** @hidden */
24
- toggleDisplayChildren(hideAll) {
25
- if (hideAll !== undefined) {
26
- this.hideChildren = hideAll;
49
+ constructor(data) {
50
+ super(new DataProvider(data));
51
+ }
52
+ }
53
+
54
+ class TreeDataSourceParser {
55
+ /**
56
+ * Transforms plain array or observable into DataSource class.
57
+ * @param source
58
+ */
59
+ parse(source) {
60
+ if (isDataSource(source)) {
61
+ return source;
27
62
  }
28
- else {
29
- this.hideChildren = !this.hideChildren;
63
+ if (Array.isArray(source)) {
64
+ return new ArrayTreeDataSource(source);
65
+ }
66
+ if (isObservable(source)) {
67
+ return new ObservableTreeDataSource(source);
30
68
  }
69
+ return undefined;
70
+ }
71
+ }
72
+
73
+ class TreeItemDefDirective {
74
+ /** @hidden */
75
+ static ngTemplateContextGuard(dir, ctx) {
76
+ return true;
31
77
  }
32
78
  /** @hidden */
33
- typeOf(variable) {
34
- let retVal;
35
- if (typeof variable === 'string') {
36
- retVal = 'string';
37
- }
38
- else if (typeof variable === 'object') {
39
- retVal = 'object';
40
- }
41
- return retVal;
79
+ constructor(templateRef) {
80
+ this.templateRef = templateRef;
81
+ }
82
+ }
83
+ TreeItemDefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemDefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
84
+ TreeItemDefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: TreeItemDefDirective, selector: "[fdTreeItemDef]", inputs: { fdTreeItemDefAs: "fdTreeItemDefAs" }, ngImport: i0 });
85
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemDefDirective, decorators: [{
86
+ type: Directive,
87
+ args: [{
88
+ selector: '[fdTreeItemDef]'
89
+ }]
90
+ }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { fdTreeItemDefAs: [{
91
+ type: Input
92
+ }] } });
93
+
94
+ class TreeItemDirective {
95
+ /** @hidden */
96
+ constructor(injector) {
97
+ this.injector = Injector.create({ providers: [], parent: injector });
98
+ }
99
+ /** Sets tree item. */
100
+ setTreeItem(item) {
101
+ this.treeItem = item;
42
102
  }
43
103
  /** @hidden */
44
- editTreeItem(row) {
45
- if (row) {
46
- this.editClicked.emit(row);
104
+ ngOnDestroy() {
105
+ this.treeItem = null;
106
+ }
107
+ }
108
+ TreeItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemDirective, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
109
+ TreeItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: TreeItemDirective, selector: "[fdTreeItem]", exportAs: ["fdTreeItem"], ngImport: i0 });
110
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemDirective, decorators: [{
111
+ type: Directive,
112
+ args: [{
113
+ selector: '[fdTreeItem]',
114
+ exportAs: 'fdTreeItem'
115
+ }]
116
+ }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
117
+
118
+ class BaseTreeItem {
119
+ /** @hidden */
120
+ constructor() {
121
+ var _a;
122
+ /** @hidden */
123
+ this._elementRef = inject(ElementRef);
124
+ /** @hidden */
125
+ this._treeItemDir = inject(TreeItemDirective, {
126
+ optional: true
127
+ });
128
+ (_a = this._treeItemDir) === null || _a === void 0 ? void 0 : _a.setTreeItem(this);
129
+ }
130
+ /** @hidden */
131
+ elementRef() {
132
+ return this._elementRef;
133
+ }
134
+ }
135
+ BaseTreeItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BaseTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
136
+ BaseTreeItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: BaseTreeItem, ngImport: i0 });
137
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BaseTreeItem, decorators: [{
138
+ type: Directive
139
+ }], ctorParameters: function () { return []; } });
140
+
141
+ class TreeService {
142
+ constructor() {
143
+ /** @hidden */
144
+ this._expandableItems = new Map();
145
+ /** @hidden */
146
+ this._selectionMode$ = new BehaviorSubject({ mode: 'none', placement: 'none' });
147
+ /** @hidden */
148
+ this._expandedLevel = new BehaviorSubject(undefined);
149
+ /** @hidden */
150
+ this._navigationIndicator$ = new BehaviorSubject(false);
151
+ /**
152
+ * @hidden
153
+ */
154
+ this.detectChanges = new Subject();
155
+ }
156
+ /** Current expanded level. */
157
+ get expandedLevel() {
158
+ return this._expandedLevel.asObservable();
159
+ }
160
+ /** Tree selection mode. */
161
+ get selectionMode() {
162
+ return this._selectionMode$.asObservable();
163
+ }
164
+ /** Whether to show navigation indicator. */
165
+ get navigationIndicator() {
166
+ return this._navigationIndicator$.asObservable();
167
+ }
168
+ /** Sets whether the navigation indicator should be visible. */
169
+ setNavigationIndicator(value) {
170
+ this._navigationIndicator$.next(value);
171
+ }
172
+ /** @hidden */
173
+ normalizeTreeItems(items, parentId = null, level = 1) {
174
+ if (!items) {
175
+ return [];
47
176
  }
177
+ return [...items].map((item) => (Object.assign(Object.assign({}, item), {
178
+ level,
179
+ parentId,
180
+ renderer: this.treeItemTemplateRef,
181
+ id: item.id || uuidv4()
182
+ })));
183
+ }
184
+ /**
185
+ * Adds expandable item to the object of expandable items.
186
+ * @param id
187
+ * @param level
188
+ */
189
+ addExpandableItem(id, level, expanded) {
190
+ const levelCollection = this._expandableItems.get(level) || {};
191
+ levelCollection[id] = expanded;
192
+ this._expandableItems.set(level, levelCollection);
193
+ this._emitNewExpandedLevel();
194
+ }
195
+ /**
196
+ * Removes expandable item from the object of expandable items.
197
+ * @param id
198
+ * @param level
199
+ */
200
+ removeExpandableItem(id, level) {
201
+ const levelCollection = this._expandableItems.get(level) || {};
202
+ delete levelCollection[id];
203
+ this._expandableItems.set(level, levelCollection);
204
+ this._emitNewExpandedLevel();
205
+ }
206
+ /**
207
+ * Sets selection mode and it's placement.
208
+ * @param mode Selection mode.
209
+ * @param placement Selection control placement.
210
+ */
211
+ setSelectionMode(mode, placement) {
212
+ this._selectionMode$.next({ mode, placement });
48
213
  }
49
214
  /** @hidden */
50
- deleteTreeItem(row) {
51
- if (row) {
52
- this.deleteClicked.emit(row);
215
+ _emitNewExpandedLevel() {
216
+ // We need to go from level 1 to deeper level since level 4 may be expanded, yet level 2 not.
217
+ const levels = Array.from(this._expandableItems.keys()).sort();
218
+ let lastLevel;
219
+ for (const level of levels) {
220
+ const levelExpandableItems = this._expandableItems.get(level);
221
+ if (Object.values(levelExpandableItems).every((v) => !v)) {
222
+ break;
223
+ }
224
+ lastLevel = level;
53
225
  }
226
+ this._expandedLevel.next(lastLevel);
54
227
  }
55
228
  }
56
- TreeChildComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
57
- TreeChildComponentcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TreeChildComponent, selector: "fd-tree-child", inputs: { row: "row", hideChildren: "hideChildren", displayTreeActions: "displayTreeActions" }, outputs: { editClicked: "editClicked", deleteClicked: "deleteClicked" }, ngImport: i0, template: "<li #treeChild class=\"fd-tree__item\" role=\"treeitem\">\n <div class=\"fd-tree__row\">\n <div\n *ngFor=\"let cell of row.rowData; let i = index\"\n [attr.data-index]=\"i\"\n class=\"fd-tree__col\"\n [class.fd-tree__col--control]=\"i === 0\"\n >\n <button\n (click)=\"toggleDisplayChildren()\"\n *ngIf=\"row.children && i === 0\"\n class=\"fd-tree__control\"\n aria-label=\"Expand\"\n [class.is-pressed]=\"!hideChildren\"\n [attr.aria-pressed]=\"!hideChildren\"\n ></button>\n <ng-container *ngIf=\"typeOf(cell) === 'string'\">\n {{ cell }}\n </ng-container>\n <ng-container *ngIf=\"typeOf(cell) === 'object'\">\n <ng-container *ngIf=\"cell.linkUrl\">\n <ng-container *ngIf=\"cell.displayText\">\n <!-- link with display text -->\n <a [attr.href]=\"cell.linkUrl\" class=\"fd-has-font-weight-semi\">{{ cell.displayText }}</a>\n </ng-container>\n <ng-container *ngIf=\"!cell.displayText\">\n <!-- link without display text -->\n <a [attr.href]=\"cell.linkUrl\" class=\"fd-has-font-weight-semi\">{{ cell.linkUrl }}</a>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!cell.linkUrl\">\n {{ cell.displayText }}\n </ng-container>\n </ng-container>\n </div>\n <div class=\"fd-tree__col fd-tree__col--actions\">\n <ng-container *ngIf=\"displayTreeActions\">\n <button fd-button fdType=\"transparent\" glyph=\"vertical-grip\" [fdMenuTrigger]=\"menu\"></button>\n\n <fd-menu #menu>\n <li fd-menu-item (click)=\"editTreeItem(row)\">\n <div fd-menu-interactive>\n <span fd-menu-title>Edit</span>\n </div>\n </li>\n <li fd-menu-item (click)=\"deleteTreeItem(row)\">\n <div fd-menu-interactive>\n <span fd-menu-title>Delete</span>\n </div>\n </li>\n </fd-menu>\n </ng-container>\n </div>\n </div>\n <ul\n *ngIf=\"row.children && row.children.length > 0\"\n [class.is-hidden]=\"hideChildren\"\n class=\"fd-tree__group\"\n role=\"group\"\n >\n <fd-tree-child\n *ngFor=\"let child of row.children\"\n [displayTreeActions]=\"displayTreeActions\"\n [row]=\"child\"\n [class]=\"child.sublevelClass\"\n >\n </fd-tree-child>\n </ul>\n</li>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: TreeChildComponent, selector: "fd-tree-child", inputs: ["row", "hideChildren", "displayTreeActions"], outputs: ["editClicked", "deleteClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
58
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeChildComponent, decorators: [{
59
- type: Component,
60
- args: [{ selector: 'fd-tree-child', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li #treeChild class=\"fd-tree__item\" role=\"treeitem\">\n <div class=\"fd-tree__row\">\n <div\n *ngFor=\"let cell of row.rowData; let i = index\"\n [attr.data-index]=\"i\"\n class=\"fd-tree__col\"\n [class.fd-tree__col--control]=\"i === 0\"\n >\n <button\n (click)=\"toggleDisplayChildren()\"\n *ngIf=\"row.children && i === 0\"\n class=\"fd-tree__control\"\n aria-label=\"Expand\"\n [class.is-pressed]=\"!hideChildren\"\n [attr.aria-pressed]=\"!hideChildren\"\n ></button>\n <ng-container *ngIf=\"typeOf(cell) === 'string'\">\n {{ cell }}\n </ng-container>\n <ng-container *ngIf=\"typeOf(cell) === 'object'\">\n <ng-container *ngIf=\"cell.linkUrl\">\n <ng-container *ngIf=\"cell.displayText\">\n <!-- link with display text -->\n <a [attr.href]=\"cell.linkUrl\" class=\"fd-has-font-weight-semi\">{{ cell.displayText }}</a>\n </ng-container>\n <ng-container *ngIf=\"!cell.displayText\">\n <!-- link without display text -->\n <a [attr.href]=\"cell.linkUrl\" class=\"fd-has-font-weight-semi\">{{ cell.linkUrl }}</a>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!cell.linkUrl\">\n {{ cell.displayText }}\n </ng-container>\n </ng-container>\n </div>\n <div class=\"fd-tree__col fd-tree__col--actions\">\n <ng-container *ngIf=\"displayTreeActions\">\n <button fd-button fdType=\"transparent\" glyph=\"vertical-grip\" [fdMenuTrigger]=\"menu\"></button>\n\n <fd-menu #menu>\n <li fd-menu-item (click)=\"editTreeItem(row)\">\n <div fd-menu-interactive>\n <span fd-menu-title>Edit</span>\n </div>\n </li>\n <li fd-menu-item (click)=\"deleteTreeItem(row)\">\n <div fd-menu-interactive>\n <span fd-menu-title>Delete</span>\n </div>\n </li>\n </fd-menu>\n </ng-container>\n </div>\n </div>\n <ul\n *ngIf=\"row.children && row.children.length > 0\"\n [class.is-hidden]=\"hideChildren\"\n class=\"fd-tree__group\"\n role=\"group\"\n >\n <fd-tree-child\n *ngFor=\"let child of row.children\"\n [displayTreeActions]=\"displayTreeActions\"\n [row]=\"child\"\n [class]=\"child.sublevelClass\"\n >\n </fd-tree-child>\n </ul>\n</li>\n" }]
61
- }], propDecorators: { row: [{
62
- type: Input
63
- }], hideChildren: [{
64
- type: Input
65
- }], displayTreeActions: [{
66
- type: Input
67
- }], editClicked: [{
68
- type: Output
69
- }], deleteClicked: [{
70
- type: Output
71
- }] } });
229
+ TreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
230
+ TreeServiceprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeService });
231
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeService, decorators: [{
232
+ type: Injectable
233
+ }] });
72
234
 
73
235
  class TreeComponent {
236
+ /**
237
+ * Whether the Tree component has navigation indicators.
238
+ */
239
+ set navigationIndicator(value) {
240
+ if (value === this._navigationIndicator) {
241
+ return;
242
+ }
243
+ this._navigationIndicator = value;
244
+ this._treeService.setNavigationIndicator(value);
245
+ }
246
+ get navigationIndicator() {
247
+ return this._navigationIndicator;
248
+ }
249
+ /** Tree item template definition. */
250
+ set treeItemDef(value) {
251
+ this._treeItemDef = value;
252
+ // Set new renderer
253
+ this._treeService.treeItemTemplateRef = value === null || value === void 0 ? void 0 : value.templateRef;
254
+ this._items = this._treeService.normalizeTreeItems(this._items);
255
+ }
256
+ get treeItemDef() {
257
+ return this._treeItemDef;
258
+ }
259
+ /** @hidden */
260
+ get multiple() {
261
+ return this.selection === 'multiple';
262
+ }
263
+ /** @hidden */
264
+ get toggle() {
265
+ return true;
266
+ }
267
+ /** @hidden */
74
268
  constructor() {
269
+ /**
270
+ * Whether the tree should be borderless.
271
+ */
272
+ this.noBorder = false;
273
+ /** Type of tree items selection. */
274
+ this.selection = 'none';
275
+ /** Placement of the selection control. */
276
+ this.selectionPlacement = 'none';
277
+ /**
278
+ * Whether the sections should be dependent for selection mode.
279
+ * If true, selection control will shift, according to the level.
280
+ * If false, selection control will stay on the same place ignoring the item level.
281
+ */
282
+ this.independentSections = false;
283
+ /** @hidden */
284
+ this._navigationIndicator = false;
285
+ /** Event emitted when data loading is started. */
286
+ this.dataRequested = new EventEmitter();
287
+ /** Event emitted when data loading is finished. */
288
+ this.dataReceived = new EventEmitter();
289
+ /** Event emitted when selected state changed. */
290
+ this.selectedChange = new EventEmitter();
291
+ /** @hidden */
292
+ this._items = [];
293
+ /**
294
+ * @hidden
295
+ * Used for skeleton to appear before first meaningful data being loaded.
296
+ */
297
+ this._initialDataLoaded = false;
298
+ /** @hidden */
299
+ this._contentDensityObserver = inject(ContentDensityObserver);
300
+ /** @hidden */
301
+ this._dataSourceDirective = inject(DataSourceDirective);
302
+ /** @hidden */
303
+ this._destroy$ = inject(DestroyedService);
304
+ /** @hidden */
305
+ this._elementRef = inject(ElementRef);
306
+ /** @hidden */
307
+ this._treeService = inject(TreeService);
308
+ /** @hidden */
309
+ this._selectionService = inject(SelectionService);
75
310
  /** @hidden */
76
- this.editRowClicked = new EventEmitter();
311
+ this._rtl = inject(RtlService, {
312
+ optional: true
313
+ });
314
+ /** @hidden */
315
+ this._cvaDirective = inject(CvaDirective);
77
316
  /** @hidden */
78
- this.deleteRowClicked = new EventEmitter();
317
+ this._cdr = inject(ChangeDetectorRef);
318
+ /** @hidden */
319
+ this._dsSubscription = null;
320
+ /**
321
+ * @hidden
322
+ * Sorted tree item components.
323
+ */
324
+ this._sortedTreeItems = [];
325
+ /**
326
+ * @hidden
327
+ * All tree item components.
328
+ */
329
+ this._allItems = [];
330
+ this._selectionService.registerRootComponent(this);
331
+ this._contentDensityObserver.subscribe();
79
332
  }
80
333
  /** @hidden */
81
334
  ngOnInit() {
82
- this.hideAll = false;
335
+ var _a, _b;
336
+ this._openDataStream();
337
+ this.buildComponentCssClass();
338
+ this._treeService.expandedLevel.pipe(distinctUntilChanged(), takeUntil(this._destroy$)).subscribe((level) => {
339
+ this._expandedLevel = level;
340
+ this.buildComponentCssClass();
341
+ this._cdr.detectChanges();
342
+ });
343
+ this._treeService.detectChanges.pipe(takeUntil(this._destroy$)).subscribe(() => {
344
+ this._cdr.detectChanges();
345
+ });
346
+ if (this.selection !== 'none') {
347
+ this._selectionService.setValue(this._cvaDirective.value);
348
+ (_b = (_a = this._cvaDirective.ngControl) === null || _a === void 0 ? void 0 : _a.valueChanges) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this._destroy$)).subscribe(() => {
349
+ this._selectionService.setValue(this._cvaDirective.value);
350
+ });
351
+ }
352
+ }
353
+ /** @hidden */
354
+ ngOnChanges(changes) {
355
+ this.buildComponentCssClass();
356
+ if ('selection' in changes || 'selectionPlacement' in changes) {
357
+ this._treeService.setSelectionMode(this.selection, this.selectionPlacement);
358
+ this._setSelectionListener();
359
+ }
360
+ }
361
+ /** @hidden */
362
+ ngAfterViewInit() {
363
+ this._listenToTreeItemsChanges();
364
+ this._listenToTreeItemDirectiveChanges();
365
+ }
366
+ /** @hidden */
367
+ ngOnDestroy() {
368
+ var _a, _b, _c;
369
+ (_a = this._dsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
370
+ (_b = this._eventSub) === null || _b === void 0 ? void 0 : _b.unsubscribe();
371
+ (_c = this._selectionSub) === null || _c === void 0 ? void 0 : _c.unsubscribe();
83
372
  }
84
373
  /** @hidden */
85
- ngAfterContentInit() {
86
- if (this.treeData && this.treeData.length) {
87
- this.treeData.forEach((row) => {
88
- this.getChildDepth(row, 0);
89
- this.handleEmptyTrailingCells(row); // handle empty cells for parents
374
+ _setSelectionListener() {
375
+ var _a, _b, _c;
376
+ (_a = this._selectionSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
377
+ if (this.selection !== 'none') {
378
+ this._selectionService.setValue(this._cvaDirective.value);
379
+ this._selectionSub = (_c = (_b = this._cvaDirective.ngControl) === null || _b === void 0 ? void 0 : _b.valueChanges) === null || _c === void 0 ? void 0 : _c.pipe(takeUntil(this._destroy$)).subscribe(() => {
380
+ this._selectionService.setValue(this._cvaDirective.value);
90
381
  });
91
382
  }
92
383
  }
93
384
  /** @hidden */
94
- toggleDisplayAll() {
95
- this.hideAll = !this.hideAll;
96
- this.treeChildren.forEach((child) => {
97
- child.toggleDisplayChildren(this.hideAll);
385
+ _listenToTreeItemDirectiveChanges() {
386
+ this._treeItemDirectives.changes
387
+ .pipe(startWith(null), filter(() => this.treeItemDef !== undefined), takeUntil(this._destroy$))
388
+ .subscribe(() => {
389
+ this._allItems = this._treeItemDirectives.toArray().map((item) => item.treeItem);
390
+ const flattenedItems = this._sortTreeItems(this._allItems);
391
+ this._setFlattenedItems(flattenedItems);
98
392
  });
99
393
  }
100
394
  /** @hidden */
101
- getChildDepth(row, depth) {
102
- if (depth > 0) {
103
- row.sublevelClass = 'fd-tree__group--sublevel-' + depth;
395
+ _listenToTreeItemsChanges() {
396
+ this._projectedTreeItems.changes
397
+ .pipe(startWith(null), filter(() => !this.treeItemDef), takeUntil(this._destroy$))
398
+ .subscribe(() => {
399
+ this._allItems = this._projectedTreeItems.toArray();
400
+ const flattenedItems = this._sortTreeItems(this._allItems);
401
+ this._setFlattenedItems(flattenedItems);
402
+ });
403
+ }
404
+ /** @hidden */
405
+ _setFlattenedItems(items) {
406
+ var _a, _b;
407
+ this._sortedTreeItems = items;
408
+ const activeItem = (_a = this._focusKeyManager) === null || _a === void 0 ? void 0 : _a.activeItem;
409
+ const newActiveItemIndex = items.findIndex((item) => item === activeItem);
410
+ (_b = this._focusKeyManager) === null || _b === void 0 ? void 0 : _b.destroy();
411
+ this._focusKeyManager = new FocusKeyManager(items)
412
+ .withVerticalOrientation(true)
413
+ .skipPredicate((item) => !item.keyboardAccessible);
414
+ if (newActiveItemIndex > -1) {
415
+ this._focusKeyManager.setActiveItem(newActiveItemIndex);
416
+ }
417
+ this._selectionService.initialize(this._sortedTreeItems.map((item) => item.selectableListItem));
418
+ this._setupEventListeners();
419
+ }
420
+ /** @hidden */
421
+ _onItemFocused(treeItem) {
422
+ let focusedIndex = -1;
423
+ this._sortedTreeItems.forEach((item, index) => {
424
+ const isFocused = treeItem === item;
425
+ item.setContainerTabIndex(isFocused ? 0 : -1);
426
+ if (isFocused) {
427
+ focusedIndex = index;
428
+ }
429
+ });
430
+ if (focusedIndex === -1) {
431
+ return;
104
432
  }
105
- if (row.children) {
106
- row.children.forEach((child) => {
107
- this.getChildDepth(child, depth + 1);
108
- this.handleEmptyTrailingCells(child); // handle empty cells for children
433
+ this._focusKeyManager.setActiveItem(focusedIndex);
434
+ }
435
+ /** @hidden */
436
+ _setupEventListeners() {
437
+ var _a;
438
+ (_a = this._eventSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
439
+ this._eventSub = new Subscription();
440
+ this._sortedTreeItems.forEach((item) => {
441
+ var _a;
442
+ this._eventSub.add(fromEvent(item.elementRef().nativeElement, 'keydown').subscribe((event) => {
443
+ this._onItemKeyDown(event, item);
444
+ }));
445
+ this._eventSub.add(fromEvent((_a = item.itemContainer) === null || _a === void 0 ? void 0 : _a.nativeElement, 'focus').subscribe(() => {
446
+ this._onItemFocused(item);
447
+ }));
448
+ });
449
+ }
450
+ /** @hidden */
451
+ _sortTreeItems(items) {
452
+ const components = [];
453
+ const rootItems = items.filter((item) => item.level === 1);
454
+ rootItems.forEach((treeItem, index) => {
455
+ treeItem.setPosition(rootItems.length, index + 1);
456
+ });
457
+ items.forEach((item) => {
458
+ if (!item || components.includes(item)) {
459
+ return;
460
+ }
461
+ components.push(item);
462
+ if (item.children.length === 0) {
463
+ return;
464
+ }
465
+ const childItems = this._sortTreeItems(this._allItems.filter((i) => i.parentId === item.id));
466
+ childItems.forEach((treeItem, index) => {
467
+ treeItem.setPosition(childItems.length, index + 1);
109
468
  });
469
+ components.push(...childItems);
470
+ });
471
+ return components;
472
+ }
473
+ /** @hidden */
474
+ elementRef() {
475
+ return this._elementRef;
476
+ }
477
+ /** @hidden */
478
+ buildComponentCssClass() {
479
+ return [
480
+ this.class,
481
+ this._expandedLevel ? `expanded-level-${this._expandedLevel}` : '',
482
+ this.noBorder ? 'fd-tree--no-border' : '',
483
+ this._items.length === 0 && this._initialDataLoaded ? 'fd-tree--no-data' : '',
484
+ this.independentSections ? 'fd-tree--independent-multi-selection' : '',
485
+ 'fd-tree'
486
+ ];
487
+ }
488
+ /**
489
+ * @hidden
490
+ * Keyboard navigation
491
+ * @param event Keyboard event.
492
+ */
493
+ _onKeyUp(event) {
494
+ var _a;
495
+ if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW])) {
496
+ if (event.defaultPrevented) {
497
+ return;
498
+ }
499
+ event.preventDefault();
500
+ (_a = this._focusKeyManager) === null || _a === void 0 ? void 0 : _a.onKeydown(event);
110
501
  }
111
502
  }
112
503
  /** @hidden */
113
- handleEmptyTrailingCells(row) {
114
- if (row &&
115
- row.rowData &&
116
- row.rowData.length &&
117
- typeof row.rowData[0] !== 'object' &&
118
- this.headers &&
119
- this.headers.length) {
120
- while (row.rowData.length < this.headers.length) {
121
- row.rowData.push('');
504
+ _onItemKeyDown(event, treeItem) {
505
+ var _a;
506
+ if (!treeItem) {
507
+ return;
508
+ }
509
+ const isRtl = !!((_a = this._rtl) === null || _a === void 0 ? void 0 : _a.rtl.value);
510
+ const expandKey = isRtl ? LEFT_ARROW : RIGHT_ARROW;
511
+ const collapseKey = isRtl ? RIGHT_ARROW : LEFT_ARROW;
512
+ if (KeyUtil.isKeyCode(event, expandKey) && (treeItem.hasDsChildren || treeItem.hasProjectedChildren)) {
513
+ if (event.defaultPrevented) {
514
+ return;
122
515
  }
516
+ event.preventDefault();
517
+ this._expandTreeSection(treeItem);
518
+ return;
123
519
  }
124
- else if (row &&
125
- row.rowData &&
126
- row.rowData.length &&
127
- typeof row.rowData[0] === 'object' &&
128
- this.headers &&
129
- this.headers.length) {
130
- while (row.rowData.length < this.headers.length) {
131
- row.rowData.push({
132
- displayText: ''
133
- });
520
+ if (KeyUtil.isKeyCode(event, collapseKey)) {
521
+ if (event.defaultPrevented) {
522
+ return;
523
+ }
524
+ event.preventDefault();
525
+ this._collapseTreeSection(treeItem);
526
+ return;
527
+ }
528
+ }
529
+ /** @hidden */
530
+ _trackFn(index, item) {
531
+ return item.id;
532
+ }
533
+ /** @hidden */
534
+ _expandTreeSection(treeItem) {
535
+ if (treeItem.expanded) {
536
+ // Shift focus on the first child item
537
+ const itemIndex = this._sortedTreeItems.findIndex((item) => item.id === treeItem.id);
538
+ const nextItem = this._sortedTreeItems[itemIndex + 1];
539
+ if ((nextItem === null || nextItem === void 0 ? void 0 : nextItem.parentId) === treeItem.id) {
540
+ this._focusKeyManager.setActiveItem(itemIndex + 1);
134
541
  }
542
+ return;
135
543
  }
544
+ treeItem.expanded = true;
545
+ this._cdr.detectChanges();
136
546
  }
137
547
  /** @hidden */
138
- editClicked(row) {
139
- this.editRowClicked.emit(row);
548
+ _collapseTreeSection(treeItem) {
549
+ if (!treeItem.expanded && treeItem.parentId) {
550
+ const parentItemIndex = this._sortedTreeItems.findIndex((item) => item.id === treeItem.parentId);
551
+ if (parentItemIndex > -1) {
552
+ this._focusKeyManager.setActiveItem(parentItemIndex);
553
+ return;
554
+ }
555
+ }
556
+ treeItem.expanded = false;
557
+ this._cdr.detectChanges();
140
558
  }
141
559
  /** @hidden */
142
- deleteClicked(row) {
143
- this.deleteRowClicked.emit(row);
560
+ _openDataStream() {
561
+ var _a, _b, _c, _d, _e;
562
+ (_a = this._dsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
563
+ this._dsSubscription = new Subscription();
564
+ this._dsSubscription.add((_b = this._dataSourceDirective.dataSourceProvider) === null || _b === void 0 ? void 0 : _b.dataRequested.subscribe(this.dataRequested));
565
+ this._dsSubscription.add((_c = this._dataSourceDirective.dataSourceProvider) === null || _c === void 0 ? void 0 : _c.dataReceived.subscribe(this.dataReceived));
566
+ this._dsSubscription.add((_d = this._dataSourceDirective.dataSourceProvider) === null || _d === void 0 ? void 0 : _d.dataReceived.pipe(filter((received) => received), switchMap(() => this._dataSourceDirective.dataChanged$)).subscribe((data) => {
567
+ this._initialDataLoaded = true;
568
+ this._items = this._treeService.normalizeTreeItems(data);
569
+ this.buildComponentCssClass();
570
+ this._cdr.markForCheck();
571
+ }));
572
+ (_e = this._dataSourceDirective.dataSourceProvider) === null || _e === void 0 ? void 0 : _e.match();
573
+ }
574
+ /**
575
+ * @hidden
576
+ * Select list interface method implementation.
577
+ * Sets value for control value accessor and emits it.
578
+ * @param value value of the selection.
579
+ */
580
+ onChange(value) {
581
+ this._cvaDirective.setValue(value, true);
144
582
  }
145
583
  }
146
584
  TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
147
- TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TreeComponent, selector: "fd-tree", inputs: { headers: "headers", treeData: "treeData", hideAll: "hideAll", displayTreeActions: "displayTreeActions" }, outputs: { editRowClicked: "editRowClicked", deleteRowClicked: "deleteRowClicked" }, viewQueries: [{ propertyName: "treeChildren", predicate: TreeChildComponent, descendants: true }], ngImport: i0, template: "<div class=\"fd-tree fd-tree--header\" *ngIf=\"headers.length > 0\">\n <div class=\"fd-tree__row fd-tree__row--header\">\n <div class=\"fd-tree__col fd-tree__col--control\">\n <button\n (click)=\"toggleDisplayAll()\"\n class=\"fd-tree__control\"\n aria-label=\"Expand all\"\n [class.is-pressed]=\"!hideAll\"\n [attr.aria-pressed]=\"!hideAll\"\n ></button>\n {{ headers[0] }}\n </div>\n <div class=\"fd-tree__col\" *ngFor=\"let header of headers | slice: 1\">\n {{ header }}\n </div>\n <div class=\"fd-tree__col fd-tree__col--actions\"></div>\n </div>\n</div>\n<ul class=\"fd-tree\" id=\"ENusD653\" role=\"tree\">\n <fd-tree-child\n (editClicked)=\"editClicked($event)\"\n (deleteClicked)=\"deleteClicked($event)\"\n [displayTreeActions]=\"displayTreeActions\"\n *ngFor=\"let row of treeData\"\n [row]=\"row\"\n ></fd-tree-child>\n</ul>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tree{--fdTree_Button_Spacing:var(--fdList_Button_Spacing);--fdTree_Expander_Size:2.75rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Height:2.75rem;--fdTree_Item_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Wrap_Text_Line_Height:1.4;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style-type:none;margin:0;padding:0;width:100%}.fd-tree[class*=-compact],.fd-tree[class*=-condensed],[class*=-compact] .fd-tree:not([class*=-cozy]),[class*=-condensed] .fd-tree:not([class*=-cozy]){--fdTree_Expander_Size:2rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontSmallSize);--fdTree_Item_Height:2rem;--fdTree_Item_Font_Size:var(--sapFontSize);--fdTree_Item_Wrap_Text_Line_Height:1.4}.fd-tree .has-highlight-indicator{--fdTree_Item_Highlight_Color:var(--sapInformationBorderColor);box-shadow:inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator--error{--fdTree_Item_Highlight_Color:var(--sapErrorBorderColor)}.fd-tree .has-highlight-indicator--warning{--fdTree_Item_Highlight_Color:var(--sapWarningBorderColor)}.fd-tree .has-highlight-indicator--success{--fdTree_Item_Highlight_Color:var(--sapSuccessBorderColor)}.fd-tree .has-highlight-indicator[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator{box-shadow:inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor),inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor),inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:0;margin-right:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.expanded-level-1 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree .fd-tree__item-container .fd-form-item:first-child label,.fd-tree .fd-tree__item-container .fd-tree__expander+.fd-form-item label{margin:0}.fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree:after,.fd-tree:before{box-sizing:inherit;font-size:inherit}.fd-tree[aria-hidden=true]{display:none}.fd-tree__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__item:after,.fd-tree__item:before{box-sizing:inherit;font-size:inherit}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{background:var(--sapList_Background);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__item-container{-webkit-box-sizing:border-box;align-items:center;background:var(--sapList_AlternatingBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid transparent;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);padding:0 1rem 0 0;position:relative;width:100%}.fd-tree__item-container:after,.fd-tree__item-container:before{box-sizing:inherit;font-size:inherit}.fd-tree__item-container[dir=rtl],[dir=rtl] .fd-tree__item-container{padding-left:1rem;padding-right:0}.fd-tree__item-container.is-selected,.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-navigated[dir=rtl],[dir=rtl] .fd-tree__item-container.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-focus,.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree__item-container.is-focus:before,.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .0625rem;pointer-events:none;position:absolute}.fd-tree__item-container.is-focus.is-active:before,.fd-tree__item-container.is-focus:active:before,.fd-tree__item-container:focus.is-active:before,.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item-container--active.is-hover,.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item-container--active.is-selected,.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container--active.is-active,.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item-container--active.is-active:hover,.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item-container--active:active,.fd-tree__item-container--active:active.is-hover,.fd-tree__item-container--active:active.is-selected,.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item-container--active:active:hover,.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item-container--active.is-focus,.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item-container--active.is-focus:before,.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item-container--active:active .fd-button,.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__button{margin-left:var(--fdTree_Button_Spacing)}.fd-tree__button[dir=rtl],[dir=rtl] .fd-tree__button{margin-left:0;margin-right:var(--fdTree_Button_Spacing)}.fd-tree__expander{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background:transparent;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapButton_IconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size);outline:0;padding:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap}.fd-tree__expander:after,.fd-tree__expander:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander::-moz-focus-inner{border:0}.fd-tree__expander.is-focus,.fd-tree__expander:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdButton_Outline_Offset);z-index:5}.fd-tree__expander .fd-tree__icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__expander .fd-tree__icon:after,.fd-tree__expander .fd-tree__icon:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander .fd-tree__icon [class*=sap-icon],.fd-tree__expander .fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:var(--sapButton_IconColor);display:flex;font-size:var(--fdTree_Expander_Icon_Font_Size);justify-content:center}.fd-tree__expander.is-expanded,.fd-tree__expander[aria-expanded=true]{border-bottom:none}.fd-tree__content{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);overflow:hidden;padding:0;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__content:after,.fd-tree__content:before{box-sizing:inherit;font-size:inherit}.fd-tree__content--wrap,.fd-tree__content--wrap .fd-tree__text{overflow:visible;text-overflow:clip;white-space:normal}.fd-tree__content--wrap .fd-tree__text{line-height:var(--fdTree_Item_Wrap_Text_Line_Height)}.fd-tree__icon{line-height:var(--fdTree_Expander_Size);min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size)}.fd-tree__icon,.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;justify-content:center}.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{color:var(--sapContent_NonInteractiveIconColor);font-size:1.125rem}.fd-tree__icon--navigation [class*=sap-icon],.fd-tree__icon--navigation[class*=sap-icon]{font-size:.75rem;min-width:2.5rem}.fd-tree__icon--navigation:last-child{margin-right:-1rem}.fd-tree__icon--navigation[dir=rtl]:last-child,[dir=rtl] .fd-tree__icon--navigation:last-child{margin-left:-1rem;margin-right:0}.fd-tree__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdTree_Item_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:var(--fdTree_Item_Height);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__text:after,.fd-tree__text:before{box-sizing:inherit;font-size:inherit}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{border-bottom:var(--sapList_BorderWidth) solid transparent}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--active .fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item-container:active,.fd-tree--active .fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--no-data .fd-tree__text{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeChildComponent, selector: "fd-tree-child", inputs: ["row", "hideChildren", "displayTreeActions"], outputs: ["editClicked", "deleteClicked"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], encapsulation: i0.ViewEncapsulation.None });
585
+ TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TreeComponent, selector: "fd-tree", inputs: { class: "class", noBorder: "noBorder", selection: "selection", selectionPlacement: "selectionPlacement", independentSections: "independentSections", navigationIndicator: "navigationIndicator" }, outputs: { dataRequested: "dataRequested", dataReceived: "dataReceived", selectedChange: "selectedChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "_onKeyUp($event)" } }, providers: [
586
+ contentDensityObserverProviders(),
587
+ TreeService,
588
+ SelectionService,
589
+ DestroyedService,
590
+ {
591
+ provide: FD_DATA_SOURCE_TRANSFORMER,
592
+ useClass: TreeDataSourceParser
593
+ }
594
+ ], queries: [{ propertyName: "treeItemDef", first: true, predicate: TreeItemDefDirective, descendants: true }, { propertyName: "_projectedTreeItems", predicate: BaseTreeItem, descendants: true }], viewQueries: [{ propertyName: "_treeItemDirectives", predicate: TreeItemDirective, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }, { directive: i2.CvaDirective, inputs: ["name", "name", "id", "id", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly"] }], ngImport: i0, template: "<ng-template #dataSourceRenderer>\n <ng-template\n [ngTemplateOutlet]=\"!_initialDataLoaded ? loadingRenderer : dataLoadedTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: 1 }\"\n ></ng-template>\n\n <ng-template #loadingRenderer let-level>\n <div *fdkRepeat=\"5\" role=\"treeitem\" [attr.aria-level]=\"level\" class=\"fd-tree__item\">\n <div class=\"fd-tree__item-container\">\n <div class=\"fd-tree__content\">\n <span class=\"fd-tree__text\">\n <fd-skeleton type=\"text\" width=\"100px\" textLines=\"1\"></fd-skeleton>\n </span>\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #dataLoadedTpl>\n <ng-container *ngIf=\"_items.length > 0 && treeItemDef; else noDataTpl\">\n <ng-container *ngFor=\"let item of _items; trackBy: _trackFn\">\n <ng-template\n [ngTemplateOutlet]=\"renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #renderer let-item>\n <ng-container fdTreeItem fdkSelectableItem #treeItemDirective=\"fdTreeItem\">\n <ng-template\n [ngTemplateOutlet]=\"item.renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n [ngTemplateOutletInjector]=\"treeItemDirective.injector\"\n ></ng-template>\n </ng-container>\n <ng-container\n *ngIf=\"\n treeItemDirective.treeItem?.hasDsChildren &&\n !!treeItemDirective.treeItem?.expanded &&\n !treeItemDirective.treeItem?.childrenLoaded\n \"\n >\n <ng-template\n [ngTemplateOutlet]=\"loadingRenderer\"\n [ngTemplateOutletContext]=\"{ $implicit: item.level + 1 }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"treeItemDirective.treeItem?.children as childItems\">\n <div class=\"fd-tree\" *ngIf=\"childItems && childItems.length > 0 && !!treeItemDirective?.treeItem?.expanded\">\n <ng-container *ngFor=\"let child of childItems; trackBy: _trackFn\">\n <ng-template\n [ngTemplateOutlet]=\"renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n ></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template #noDataTpl>\n <div role=\"treeitem\" aria-level=\"1\" class=\"fd-tree__item\">\n <div class=\"fd-tree__item-container\">\n <div class=\"fd-tree__content\">\n <span class=\"fd-tree__text\">{{ 'coreTree.noData' | fdTranslate }}</span>\n </div>\n </div>\n </div>\n </ng-template>\n</ng-template>\n<ng-template #projectedContentRenderer>\n <ng-content select=\"fd-tree-item\"></ng-content>\n</ng-template>\n\n<ng-template [ngTemplateOutlet]=\"treeItemDef ? dataSourceRenderer : projectedContentRenderer\"></ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tree{--fdTree_Button_Spacing:var(--fdList_Button_Spacing);--fdTree_Expander_Size:2.75rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Height:2.75rem;--fdTree_Item_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Wrap_Text_Line_Height:1.4;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style-type:none;margin:0;padding:0;width:100%}.fd-tree[class*=-compact],.fd-tree[class*=-condensed],[class*=-compact] .fd-tree:not([class*=-cozy]),[class*=-condensed] .fd-tree:not([class*=-cozy]){--fdTree_Expander_Size:2rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontSmallSize);--fdTree_Item_Height:2rem;--fdTree_Item_Font_Size:var(--sapFontSize);--fdTree_Item_Wrap_Text_Line_Height:1.4}.fd-tree .has-highlight-indicator{--fdTree_Item_Highlight_Color:var(--sapInformationBorderColor);box-shadow:inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator--error{--fdTree_Item_Highlight_Color:var(--sapErrorBorderColor)}.fd-tree .has-highlight-indicator--warning{--fdTree_Item_Highlight_Color:var(--sapWarningBorderColor)}.fd-tree .has-highlight-indicator--success{--fdTree_Item_Highlight_Color:var(--sapSuccessBorderColor)}.fd-tree .has-highlight-indicator[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator{box-shadow:inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor),inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor),inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:0;margin-right:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.expanded-level-1 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree .fd-tree__item-container .fd-form-item:first-child label,.fd-tree .fd-tree__item-container .fd-tree__expander+.fd-form-item label{margin:0}.fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree:after,.fd-tree:before{box-sizing:inherit;font-size:inherit}.fd-tree[aria-hidden=true]{display:none}.fd-tree__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__item:after,.fd-tree__item:before{box-sizing:inherit;font-size:inherit}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{background:var(--sapList_Background);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__item-container{-webkit-box-sizing:border-box;align-items:center;background:var(--sapList_AlternatingBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid transparent;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);padding:0 1rem 0 0;position:relative;width:100%}.fd-tree__item-container:after,.fd-tree__item-container:before{box-sizing:inherit;font-size:inherit}.fd-tree__item-container[dir=rtl],[dir=rtl] .fd-tree__item-container{padding-left:1rem;padding-right:0}.fd-tree__item-container.is-selected,.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-navigated[dir=rtl],[dir=rtl] .fd-tree__item-container.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-focus,.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree__item-container.is-focus:before,.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .0625rem;pointer-events:none;position:absolute}.fd-tree__item-container.is-focus.is-active:before,.fd-tree__item-container.is-focus:active:before,.fd-tree__item-container:focus.is-active:before,.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item-container--active.is-hover,.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item-container--active.is-selected,.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container--active.is-active,.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item-container--active.is-active:hover,.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item-container--active:active,.fd-tree__item-container--active:active.is-hover,.fd-tree__item-container--active:active.is-selected,.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item-container--active:active:hover,.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item-container--active.is-focus,.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item-container--active.is-focus:before,.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item-container--active:active .fd-button,.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__button{margin-left:var(--fdTree_Button_Spacing)}.fd-tree__button[dir=rtl],[dir=rtl] .fd-tree__button{margin-left:0;margin-right:var(--fdTree_Button_Spacing)}.fd-tree__expander{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background:transparent;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapButton_IconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size);outline:0;padding:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap}.fd-tree__expander:after,.fd-tree__expander:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander::-moz-focus-inner{border:0}.fd-tree__expander.is-focus,.fd-tree__expander:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdButton_Outline_Offset);z-index:5}.fd-tree__expander .fd-tree__icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__expander .fd-tree__icon:after,.fd-tree__expander .fd-tree__icon:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander .fd-tree__icon [class*=sap-icon],.fd-tree__expander .fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:var(--sapButton_IconColor);display:flex;font-size:var(--fdTree_Expander_Icon_Font_Size);justify-content:center}.fd-tree__expander.is-expanded,.fd-tree__expander[aria-expanded=true]{border-bottom:none}.fd-tree__content{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);overflow:hidden;padding:0;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__content:after,.fd-tree__content:before{box-sizing:inherit;font-size:inherit}.fd-tree__content--wrap,.fd-tree__content--wrap .fd-tree__text{overflow:visible;text-overflow:clip;white-space:normal}.fd-tree__content--wrap .fd-tree__text{line-height:var(--fdTree_Item_Wrap_Text_Line_Height)}.fd-tree__icon{line-height:var(--fdTree_Expander_Size);min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size)}.fd-tree__icon,.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;justify-content:center}.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{color:var(--sapContent_NonInteractiveIconColor);font-size:1.125rem}.fd-tree__icon--navigation [class*=sap-icon],.fd-tree__icon--navigation[class*=sap-icon]{font-size:.75rem;min-width:2.5rem}.fd-tree__icon--navigation:last-child{margin-right:-1rem}.fd-tree__icon--navigation[dir=rtl]:last-child,[dir=rtl] .fd-tree__icon--navigation:last-child{margin-left:-1rem;margin-right:0}.fd-tree__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdTree_Item_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:var(--fdTree_Item_Height);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__text:after,.fd-tree__text:before{box-sizing:inherit;font-size:inherit}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{border-bottom:var(--sapList_BorderWidth) solid transparent}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--active .fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item-container:active,.fd-tree--active .fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--no-data .fd-tree__text{text-align:center}.fd-tree{display:block}.fd-tree__expander--loading{display:flex;align-items:center;justify-content:center}[dir=rtl] .fd-tree__expander:not(.is-expanded),.fd-tree__expander:not(.is-expanded)[dir=rtl]{transform:rotate(180deg)}[dir=rtl] .fd-tree__icon--navigation,.fd-tree__icon--navigation[dir=rtl]{transform:rotate(180deg)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:before,.fd-tree__item-container--active:focus:before{bottom:.0625rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.SelectableItemDirective, selector: "[fdkSelectableItem]", inputs: ["value", "fdkSelectableItem"], outputs: ["clicked", "selected"], exportAs: ["fdkSelectableItem"] }, { kind: "component", type: i5.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "directive", type: i4.RepeatDirective, selector: "[fdkRepeat], [fdRepeat]", inputs: ["fdkRepeat", "fdRepeat"] }, { kind: "directive", type: TreeItemDirective, selector: "[fdTreeItem]", exportAs: ["fdTreeItem"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }], encapsulation: i0.ViewEncapsulation.None });
595
+ __decorate([
596
+ applyCssClass,
597
+ __metadata("design:type", Function),
598
+ __metadata("design:paramtypes", []),
599
+ __metadata("design:returntype", Array)
600
+ ], TreeComponent.prototype, "buildComponentCssClass", null);
148
601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeComponent, decorators: [{
149
602
  type: Component,
150
- args: [{ selector: 'fd-tree', encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-tree fd-tree--header\" *ngIf=\"headers.length > 0\">\n <div class=\"fd-tree__row fd-tree__row--header\">\n <div class=\"fd-tree__col fd-tree__col--control\">\n <button\n (click)=\"toggleDisplayAll()\"\n class=\"fd-tree__control\"\n aria-label=\"Expand all\"\n [class.is-pressed]=\"!hideAll\"\n [attr.aria-pressed]=\"!hideAll\"\n ></button>\n {{ headers[0] }}\n </div>\n <div class=\"fd-tree__col\" *ngFor=\"let header of headers | slice: 1\">\n {{ header }}\n </div>\n <div class=\"fd-tree__col fd-tree__col--actions\"></div>\n </div>\n</div>\n<ul class=\"fd-tree\" id=\"ENusD653\" role=\"tree\">\n <fd-tree-child\n (editClicked)=\"editClicked($event)\"\n (deleteClicked)=\"deleteClicked($event)\"\n [displayTreeActions]=\"displayTreeActions\"\n *ngFor=\"let row of treeData\"\n [row]=\"row\"\n ></fd-tree-child>\n</ul>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tree{--fdTree_Button_Spacing:var(--fdList_Button_Spacing);--fdTree_Expander_Size:2.75rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Height:2.75rem;--fdTree_Item_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Wrap_Text_Line_Height:1.4;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style-type:none;margin:0;padding:0;width:100%}.fd-tree[class*=-compact],.fd-tree[class*=-condensed],[class*=-compact] .fd-tree:not([class*=-cozy]),[class*=-condensed] .fd-tree:not([class*=-cozy]){--fdTree_Expander_Size:2rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontSmallSize);--fdTree_Item_Height:2rem;--fdTree_Item_Font_Size:var(--sapFontSize);--fdTree_Item_Wrap_Text_Line_Height:1.4}.fd-tree .has-highlight-indicator{--fdTree_Item_Highlight_Color:var(--sapInformationBorderColor);box-shadow:inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator--error{--fdTree_Item_Highlight_Color:var(--sapErrorBorderColor)}.fd-tree .has-highlight-indicator--warning{--fdTree_Item_Highlight_Color:var(--sapWarningBorderColor)}.fd-tree .has-highlight-indicator--success{--fdTree_Item_Highlight_Color:var(--sapSuccessBorderColor)}.fd-tree .has-highlight-indicator[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator{box-shadow:inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor),inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor),inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:0;margin-right:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.expanded-level-1 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree .fd-tree__item-container .fd-form-item:first-child label,.fd-tree .fd-tree__item-container .fd-tree__expander+.fd-form-item label{margin:0}.fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree:after,.fd-tree:before{box-sizing:inherit;font-size:inherit}.fd-tree[aria-hidden=true]{display:none}.fd-tree__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__item:after,.fd-tree__item:before{box-sizing:inherit;font-size:inherit}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{background:var(--sapList_Background);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__item-container{-webkit-box-sizing:border-box;align-items:center;background:var(--sapList_AlternatingBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid transparent;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);padding:0 1rem 0 0;position:relative;width:100%}.fd-tree__item-container:after,.fd-tree__item-container:before{box-sizing:inherit;font-size:inherit}.fd-tree__item-container[dir=rtl],[dir=rtl] .fd-tree__item-container{padding-left:1rem;padding-right:0}.fd-tree__item-container.is-selected,.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-navigated[dir=rtl],[dir=rtl] .fd-tree__item-container.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-focus,.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree__item-container.is-focus:before,.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .0625rem;pointer-events:none;position:absolute}.fd-tree__item-container.is-focus.is-active:before,.fd-tree__item-container.is-focus:active:before,.fd-tree__item-container:focus.is-active:before,.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item-container--active.is-hover,.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item-container--active.is-selected,.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container--active.is-active,.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item-container--active.is-active:hover,.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item-container--active:active,.fd-tree__item-container--active:active.is-hover,.fd-tree__item-container--active:active.is-selected,.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item-container--active:active:hover,.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item-container--active.is-focus,.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item-container--active.is-focus:before,.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item-container--active:active .fd-button,.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__button{margin-left:var(--fdTree_Button_Spacing)}.fd-tree__button[dir=rtl],[dir=rtl] .fd-tree__button{margin-left:0;margin-right:var(--fdTree_Button_Spacing)}.fd-tree__expander{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background:transparent;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapButton_IconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size);outline:0;padding:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap}.fd-tree__expander:after,.fd-tree__expander:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander::-moz-focus-inner{border:0}.fd-tree__expander.is-focus,.fd-tree__expander:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdButton_Outline_Offset);z-index:5}.fd-tree__expander .fd-tree__icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__expander .fd-tree__icon:after,.fd-tree__expander .fd-tree__icon:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander .fd-tree__icon [class*=sap-icon],.fd-tree__expander .fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:var(--sapButton_IconColor);display:flex;font-size:var(--fdTree_Expander_Icon_Font_Size);justify-content:center}.fd-tree__expander.is-expanded,.fd-tree__expander[aria-expanded=true]{border-bottom:none}.fd-tree__content{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);overflow:hidden;padding:0;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__content:after,.fd-tree__content:before{box-sizing:inherit;font-size:inherit}.fd-tree__content--wrap,.fd-tree__content--wrap .fd-tree__text{overflow:visible;text-overflow:clip;white-space:normal}.fd-tree__content--wrap .fd-tree__text{line-height:var(--fdTree_Item_Wrap_Text_Line_Height)}.fd-tree__icon{line-height:var(--fdTree_Expander_Size);min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size)}.fd-tree__icon,.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;justify-content:center}.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{color:var(--sapContent_NonInteractiveIconColor);font-size:1.125rem}.fd-tree__icon--navigation [class*=sap-icon],.fd-tree__icon--navigation[class*=sap-icon]{font-size:.75rem;min-width:2.5rem}.fd-tree__icon--navigation:last-child{margin-right:-1rem}.fd-tree__icon--navigation[dir=rtl]:last-child,[dir=rtl] .fd-tree__icon--navigation:last-child{margin-left:-1rem;margin-right:0}.fd-tree__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdTree_Item_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:var(--fdTree_Item_Height);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__text:after,.fd-tree__text:before{box-sizing:inherit;font-size:inherit}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{border-bottom:var(--sapList_BorderWidth) solid transparent}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--active .fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item-container:active,.fd-tree--active .fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--no-data .fd-tree__text{text-align:center}\n"] }]
151
- }], propDecorators: { headers: [{
603
+ args: [{ selector: 'fd-tree', encapsulation: ViewEncapsulation.None, hostDirectives: [
604
+ {
605
+ directive: DataSourceDirective,
606
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
607
+ inputs: ['dataSource'],
608
+ // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
609
+ outputs: ['dataChanged']
610
+ },
611
+ {
612
+ directive: CvaDirective,
613
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
614
+ inputs: ['name', 'id', 'state', 'stateMessage', 'disabled', 'readonly']
615
+ }
616
+ ], host: {
617
+ role: 'tree'
618
+ }, providers: [
619
+ contentDensityObserverProviders(),
620
+ TreeService,
621
+ SelectionService,
622
+ DestroyedService,
623
+ {
624
+ provide: FD_DATA_SOURCE_TRANSFORMER,
625
+ useClass: TreeDataSourceParser
626
+ }
627
+ ], template: "<ng-template #dataSourceRenderer>\n <ng-template\n [ngTemplateOutlet]=\"!_initialDataLoaded ? loadingRenderer : dataLoadedTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: 1 }\"\n ></ng-template>\n\n <ng-template #loadingRenderer let-level>\n <div *fdkRepeat=\"5\" role=\"treeitem\" [attr.aria-level]=\"level\" class=\"fd-tree__item\">\n <div class=\"fd-tree__item-container\">\n <div class=\"fd-tree__content\">\n <span class=\"fd-tree__text\">\n <fd-skeleton type=\"text\" width=\"100px\" textLines=\"1\"></fd-skeleton>\n </span>\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #dataLoadedTpl>\n <ng-container *ngIf=\"_items.length > 0 && treeItemDef; else noDataTpl\">\n <ng-container *ngFor=\"let item of _items; trackBy: _trackFn\">\n <ng-template\n [ngTemplateOutlet]=\"renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #renderer let-item>\n <ng-container fdTreeItem fdkSelectableItem #treeItemDirective=\"fdTreeItem\">\n <ng-template\n [ngTemplateOutlet]=\"item.renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n [ngTemplateOutletInjector]=\"treeItemDirective.injector\"\n ></ng-template>\n </ng-container>\n <ng-container\n *ngIf=\"\n treeItemDirective.treeItem?.hasDsChildren &&\n !!treeItemDirective.treeItem?.expanded &&\n !treeItemDirective.treeItem?.childrenLoaded\n \"\n >\n <ng-template\n [ngTemplateOutlet]=\"loadingRenderer\"\n [ngTemplateOutletContext]=\"{ $implicit: item.level + 1 }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"treeItemDirective.treeItem?.children as childItems\">\n <div class=\"fd-tree\" *ngIf=\"childItems && childItems.length > 0 && !!treeItemDirective?.treeItem?.expanded\">\n <ng-container *ngFor=\"let child of childItems; trackBy: _trackFn\">\n <ng-template\n [ngTemplateOutlet]=\"renderer\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n ></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template #noDataTpl>\n <div role=\"treeitem\" aria-level=\"1\" class=\"fd-tree__item\">\n <div class=\"fd-tree__item-container\">\n <div class=\"fd-tree__content\">\n <span class=\"fd-tree__text\">{{ 'coreTree.noData' | fdTranslate }}</span>\n </div>\n </div>\n </div>\n </ng-template>\n</ng-template>\n<ng-template #projectedContentRenderer>\n <ng-content select=\"fd-tree-item\"></ng-content>\n</ng-template>\n\n<ng-template [ngTemplateOutlet]=\"treeItemDef ? dataSourceRenderer : projectedContentRenderer\"></ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tree{--fdTree_Button_Spacing:var(--fdList_Button_Spacing);--fdTree_Expander_Size:2.75rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Height:2.75rem;--fdTree_Item_Font_Size:var(--sapFontLargeSize);--fdTree_Item_Wrap_Text_Line_Height:1.4;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style-type:none;margin:0;padding:0;width:100%}.fd-tree[class*=-compact],.fd-tree[class*=-condensed],[class*=-compact] .fd-tree:not([class*=-cozy]),[class*=-condensed] .fd-tree:not([class*=-cozy]){--fdTree_Expander_Size:2rem;--fdTree_Expander_Icon_Font_Size:var(--sapFontSmallSize);--fdTree_Item_Height:2rem;--fdTree_Item_Font_Size:var(--sapFontSize);--fdTree_Item_Wrap_Text_Line_Height:1.4}.fd-tree .has-highlight-indicator{--fdTree_Item_Highlight_Color:var(--sapInformationBorderColor);box-shadow:inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator--error{--fdTree_Item_Highlight_Color:var(--sapErrorBorderColor)}.fd-tree .has-highlight-indicator--warning{--fdTree_Item_Highlight_Color:var(--sapWarningBorderColor)}.fd-tree .has-highlight-indicator--success{--fdTree_Item_Highlight_Color:var(--sapSuccessBorderColor)}.fd-tree .has-highlight-indicator[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator{box-shadow:inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor),inset .375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .has-highlight-indicator.is-navigated[dir=rtl],[dir=rtl] .fd-tree .has-highlight-indicator.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor),inset -.375rem 0 0 0 var(--fdTree_Item_Highlight_Color)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander{margin-left:0;margin-right:var(--fdTree_Item_Level_Spacing)}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item:first-child,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content[dir=rtl],.fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-form-item+.fd-tree__content,[dir=rtl] .fd-tree .fd-tree__item .fd-tree__item-container .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child{margin-left:0;margin-right:0}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree.fd-tree--independent-multi-selection .fd-tree__item .fd-tree__item-container .fd-form-item:first-child+.fd-tree__content{margin-left:0;margin-right:calc(var(--fdTree_Item_Level_Spacing, 0rem) + var(--fdTree_Expander_Size))}.fd-tree.expanded-level-1 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-2 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"2\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"3\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"4\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"5\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-3 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-4 .fd-tree__item[aria-level=\"6\"],.fd-tree.expanded-level-5 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-6 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-7 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-8 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-9 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-10 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-11 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"1\"]{--fdTree_Item_Level_Spacing:0rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"2\"]{--fdTree_Item_Level_Spacing:.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"3\"]{--fdTree_Item_Level_Spacing:.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"4\"]{--fdTree_Item_Level_Spacing:.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"5\"]{--fdTree_Item_Level_Spacing:1rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"6\"]{--fdTree_Item_Level_Spacing:1.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"7\"]{--fdTree_Item_Level_Spacing:1.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"8\"]{--fdTree_Item_Level_Spacing:1.75rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"9\"]{--fdTree_Item_Level_Spacing:2rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"10\"]{--fdTree_Item_Level_Spacing:2.25rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"11\"]{--fdTree_Item_Level_Spacing:2.5rem}.fd-tree.expanded-level-12 .fd-tree__item[aria-level=\"12\"]{--fdTree_Item_Level_Spacing:2.75rem}.fd-tree .fd-tree__item-container .fd-form-item:first-child label,.fd-tree .fd-tree__item-container .fd-tree__expander+.fd-form-item label{margin:0}.fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0}.fd-tree .fd-tree__expander+.fd-tree__content[dir=rtl],[dir=rtl] .fd-tree .fd-tree__expander+.fd-tree__content{margin-left:0;margin-right:0}.fd-tree:after,.fd-tree:before{box-sizing:inherit;font-size:inherit}.fd-tree[aria-hidden=true]{display:none}.fd-tree__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__item:after,.fd-tree__item:before{box-sizing:inherit;font-size:inherit}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{background:var(--sapList_Background);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active:hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-button,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__item-container{-webkit-box-sizing:border-box;align-items:center;background:var(--sapList_AlternatingBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid transparent;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);padding:0 1rem 0 0;position:relative;width:100%}.fd-tree__item-container:after,.fd-tree__item-container:before{box-sizing:inherit;font-size:inherit}.fd-tree__item-container[dir=rtl],[dir=rtl] .fd-tree__item-container{padding-left:1rem;padding-right:0}.fd-tree__item-container.is-selected,.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container.is-navigated{box-shadow:inset -.1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-navigated[dir=rtl],[dir=rtl] .fd-tree__item-container.is-navigated{box-shadow:inset .1875rem 0 0 0 var(--sapSelectedColor)}.fd-tree__item-container.is-focus,.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree__item-container.is-focus:before,.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .0625rem;pointer-events:none;position:absolute}.fd-tree__item-container.is-focus.is-active:before,.fd-tree__item-container.is-focus:active:before,.fd-tree__item-container:focus.is-active:before,.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active{cursor:pointer;position:relative}.fd-tree__item-container--active.is-hover,.fd-tree__item-container--active:hover{background:var(--sapList_Hover_Background)}.fd-tree__item-container--active.is-selected,.fd-tree__item-container--active[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree__item-container--active.is-active,.fd-tree__item-container--active.is-active.is-hover,.fd-tree__item-container--active.is-active.is-selected,.fd-tree__item-container--active.is-active.is-selected.is-hover,.fd-tree__item-container--active.is-active.is-selected:hover,.fd-tree__item-container--active.is-active:hover,.fd-tree__item-container--active.is-active[aria-selected=true],.fd-tree__item-container--active.is-active[aria-selected=true].is-hover,.fd-tree__item-container--active.is-active[aria-selected=true]:hover,.fd-tree__item-container--active:active,.fd-tree__item-container--active:active.is-hover,.fd-tree__item-container--active:active.is-selected,.fd-tree__item-container--active:active.is-selected.is-hover,.fd-tree__item-container--active:active.is-selected:hover,.fd-tree__item-container--active:active:hover,.fd-tree__item-container--active:active[aria-selected=true],.fd-tree__item-container--active:active[aria-selected=true].is-hover,.fd-tree__item-container--active:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree__item-container--active.is-focus,.fd-tree__item-container--active:focus{outline:none;pointer-events:all}.fd-tree__item-container--active.is-focus:before,.fd-tree__item-container--active:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree__item-container--active.is-focus.is-active:before,.fd-tree__item-container--active.is-focus:active:before,.fd-tree__item-container--active:focus.is-active:before,.fd-tree__item-container--active:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree__item-container--active.is-active .fd-button,.fd-tree__item-container--active.is-active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active.is-active .fd-tree__text,.fd-tree__item-container--active:active .fd-button,.fd-tree__item-container--active:active .fd-tree__icon [class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__icon[class*=sap-icon],.fd-tree__item-container--active:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree__button{margin-left:var(--fdTree_Button_Spacing)}.fd-tree__button[dir=rtl],[dir=rtl] .fd-tree__button{margin-left:0;margin-right:var(--fdTree_Button_Spacing)}.fd-tree__expander{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background:transparent;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapButton_IconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size);outline:0;padding:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap}.fd-tree__expander:after,.fd-tree__expander:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander::-moz-focus-inner{border:0}.fd-tree__expander.is-focus,.fd-tree__expander:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdButton_Outline_Offset);z-index:5}.fd-tree__expander .fd-tree__icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tree__expander .fd-tree__icon:after,.fd-tree__expander .fd-tree__icon:before{box-sizing:inherit;font-size:inherit}.fd-tree__expander .fd-tree__icon [class*=sap-icon],.fd-tree__expander .fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:var(--sapButton_IconColor);display:flex;font-size:var(--fdTree_Expander_Icon_Font_Size);justify-content:center}.fd-tree__expander.is-expanded,.fd-tree__expander[aria-expanded=true]{border-bottom:none}.fd-tree__content{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdTree_Item_Height);overflow:hidden;padding:0;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__content:after,.fd-tree__content:before{box-sizing:inherit;font-size:inherit}.fd-tree__content--wrap,.fd-tree__content--wrap .fd-tree__text{overflow:visible;text-overflow:clip;white-space:normal}.fd-tree__content--wrap .fd-tree__text{line-height:var(--fdTree_Item_Wrap_Text_Line_Height)}.fd-tree__icon{line-height:var(--fdTree_Expander_Size);min-height:var(--fdTree_Expander_Size);min-width:var(--fdTree_Expander_Size)}.fd-tree__icon,.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;justify-content:center}.fd-tree__icon [class*=sap-icon],.fd-tree__icon[class*=sap-icon]{color:var(--sapContent_NonInteractiveIconColor);font-size:1.125rem}.fd-tree__icon--navigation [class*=sap-icon],.fd-tree__icon--navigation[class*=sap-icon]{font-size:.75rem;min-width:2.5rem}.fd-tree__icon--navigation:last-child{margin-right:-1rem}.fd-tree__icon--navigation[dir=rtl]:last-child,[dir=rtl] .fd-tree__icon--navigation:last-child{margin-left:-1rem;margin-right:0}.fd-tree__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdTree_Item_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:var(--fdTree_Item_Height);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-tree__text:after,.fd-tree__text:before{box-sizing:inherit;font-size:inherit}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{border-bottom:var(--sapList_BorderWidth) solid transparent}.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--no-border .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--active .fd-tree__item-container{cursor:pointer;position:relative}.fd-tree--active .fd-tree__item-container.is-hover,.fd-tree--active .fd-tree__item-container:hover{background:var(--sapList_Hover_Background)}.fd-tree--active .fd-tree__item-container.is-selected,.fd-tree--active .fd-tree__item-container[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-tree--active .fd-tree__item-container.is-active,.fd-tree--active .fd-tree__item-container.is-active.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected,.fd-tree--active .fd-tree__item-container.is-active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container.is-active.is-selected:hover,.fd-tree--active .fd-tree__item-container.is-active:hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true],.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container.is-active[aria-selected=true]:hover,.fd-tree--active .fd-tree__item-container:active,.fd-tree--active .fd-tree__item-container:active.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected,.fd-tree--active .fd-tree__item-container:active.is-selected.is-hover,.fd-tree--active .fd-tree__item-container:active.is-selected:hover,.fd-tree--active .fd-tree__item-container:active:hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true],.fd-tree--active .fd-tree__item-container:active[aria-selected=true].is-hover,.fd-tree--active .fd-tree__item-container:active[aria-selected=true]:hover{background:var(--sapList_Active_Background)}.fd-tree--active .fd-tree__item-container.is-focus,.fd-tree--active .fd-tree__item-container:focus{outline:none;pointer-events:all}.fd-tree--active .fd-tree__item-container.is-focus:before,.fd-tree--active .fd-tree__item-container:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);bottom:.125rem;content:\"\";display:block;inset:.125rem .125rem .625rem;pointer-events:none;position:absolute}.fd-tree--active .fd-tree__item-container.is-focus.is-active:before,.fd-tree--active .fd-tree__item-container.is-focus:active:before,.fd-tree--active .fd-tree__item-container:focus.is-active:before,.fd-tree--active .fd-tree__item-container:focus:active:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color)}.fd-tree--active .fd-tree__item-container.is-active .fd-button,.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container.is-active .fd-tree__text,.fd-tree--active .fd-tree__item-container:active .fd-button,.fd-tree--active .fd-tree__item-container:active .fd-tree__icon [class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__icon[class*=sap-icon],.fd-tree--active .fd-tree__item-container:active .fd-tree__text{color:var(--sapList_Active_TextColor)}.fd-tree--no-data .fd-tree__text{text-align:center}.fd-tree{display:block}.fd-tree__expander--loading{display:flex;align-items:center;justify-content:center}[dir=rtl] .fd-tree__expander:not(.is-expanded),.fd-tree__expander:not(.is-expanded)[dir=rtl]{transform:rotate(180deg)}[dir=rtl] .fd-tree__icon--navigation,.fd-tree__icon--navigation[dir=rtl]{transform:rotate(180deg)}.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active.is-focus:before,.fd-tree__item[aria-level=\"1\"]>.fd-tree__item-container--active:focus:before,.fd-tree__item-container--active:focus:before{bottom:.0625rem}\n"] }]
628
+ }], ctorParameters: function () { return []; }, propDecorators: { class: [{
629
+ type: Input
630
+ }], noBorder: [{
152
631
  type: Input
153
- }], treeData: [{
632
+ }], selection: [{
154
633
  type: Input
155
- }], hideAll: [{
634
+ }], selectionPlacement: [{
156
635
  type: Input
157
- }], displayTreeActions: [{
636
+ }], independentSections: [{
158
637
  type: Input
159
- }], editRowClicked: [{
638
+ }], navigationIndicator: [{
639
+ type: Input
640
+ }], dataRequested: [{
641
+ type: Output
642
+ }], dataReceived: [{
160
643
  type: Output
161
- }], deleteRowClicked: [{
644
+ }], selectedChange: [{
162
645
  type: Output
163
- }], treeChildren: [{
646
+ }], treeItemDef: [{
647
+ type: ContentChild,
648
+ args: [TreeItemDefDirective]
649
+ }], _treeItemDirectives: [{
164
650
  type: ViewChildren,
165
- args: [TreeChildComponent]
651
+ args: [TreeItemDirective]
652
+ }], _projectedTreeItems: [{
653
+ type: ContentChildren,
654
+ args: [BaseTreeItem, { descendants: true }]
655
+ }], buildComponentCssClass: [], _onKeyUp: [{
656
+ type: HostListener,
657
+ args: ['keydown', ['$event']]
166
658
  }] } });
167
659
 
660
+ class TreeItemComponent extends BaseTreeItem {
661
+ constructor() {
662
+ super(...arguments);
663
+ /**
664
+ * Tree item ID.
665
+ */
666
+ this.id = uuidv4();
667
+ /**
668
+ * Whether the tree item is navigatable.
669
+ */
670
+ this.navigatable = false;
671
+ /**
672
+ * Tree item child nodes data source.
673
+ */
674
+ this.childNodes = [];
675
+ /**
676
+ * Whether to wrap content.
677
+ */
678
+ this.wrapContent = false;
679
+ /** @hidden */
680
+ this._expanded = false;
681
+ /**
682
+ * @hidden
683
+ * Whether the tree item should have a navigation indicator.
684
+ */
685
+ this._navigationIndicator = false;
686
+ /**
687
+ * Event emitted when user clicks on tree item.
688
+ */
689
+ this.treeItemClick = new EventEmitter();
690
+ /**
691
+ * Event emitted when `expanded` state changes.
692
+ */
693
+ this.expandedChange = new EventEmitter();
694
+ /**
695
+ * @hidden
696
+ * Selection state.
697
+ */
698
+ this._selectionState = false;
699
+ /** @hidden */
700
+ this.children = [];
701
+ /** @hidden */
702
+ this.childrenLoaded = false;
703
+ /** @Hidden */
704
+ this._containerTabIndex = 0;
705
+ /** @hidden */
706
+ this._totalChildrenLoaded = false;
707
+ /** @hidden */
708
+ this._dsChildrenNumber = 0;
709
+ /** @hidden */
710
+ this._clicked$ = new Subject();
711
+ /** Clicked behavior implementation. */
712
+ this.clicked = this._clicked$.asObservable();
713
+ /** @hidden */
714
+ this._treeService = inject(TreeService);
715
+ /** @hidden */
716
+ this._dataSourceDirective = inject(DataSourceDirective);
717
+ /** @hidden */
718
+ this._cdr = inject(ChangeDetectorRef);
719
+ /** @hidden */
720
+ this._destroy$ = inject(DestroyedService);
721
+ /** @hidden */
722
+ this._parentTreeItem = inject(TreeItemComponent, {
723
+ optional: true,
724
+ skipSelf: true
725
+ });
726
+ }
727
+ /**
728
+ * Tree item parent ID.
729
+ */
730
+ set parentId(value) {
731
+ this._parentId = value;
732
+ }
733
+ get parentId() {
734
+ var _a;
735
+ return this._parentId || ((_a = this._parentTreeItem) === null || _a === void 0 ? void 0 : _a.id);
736
+ }
737
+ /**
738
+ * Tree item level.
739
+ */
740
+ set level(value) {
741
+ this._level = value;
742
+ }
743
+ get level() {
744
+ return this._level || (this._parentTreeItem !== null ? this._parentTreeItem.level + 1 : 1);
745
+ }
746
+ /**
747
+ * Whether the tree item is expanded.
748
+ */
749
+ set expanded(value) {
750
+ if (value === this._expanded) {
751
+ return;
752
+ }
753
+ this._treeService.addExpandableItem(this.id, this.level, value);
754
+ this._expanded = value;
755
+ if (value) {
756
+ setTimeout(() => {
757
+ var _a;
758
+ this._treeService.detectChanges.next();
759
+ (_a = this._dataSourceDirective.dataSourceProvider) === null || _a === void 0 ? void 0 : _a.match();
760
+ });
761
+ }
762
+ else {
763
+ this.children = [];
764
+ this.childrenLoaded = false;
765
+ this._treeService.detectChanges.next();
766
+ }
767
+ this._cdr.detectChanges();
768
+ }
769
+ get expanded() {
770
+ return this._expanded;
771
+ }
772
+ /** Whether the tree item has any type of child nodes. */
773
+ get hasChildren() {
774
+ return !!this.childNodes || this.hasProjectedChildren;
775
+ }
776
+ /** Whether the tree item has content-projected child nodes. */
777
+ get hasProjectedChildren() {
778
+ return this._projectedTreeItems && this._projectedTreeItems.length > 0;
779
+ }
780
+ /** Whether the tree item has data source children. */
781
+ get hasDsChildren() {
782
+ return this._dsChildrenNumber > 0;
783
+ }
784
+ /** Whether the item is accessible via keyboard. */
785
+ get keyboardAccessible() {
786
+ return this._parentTreeItem === null
787
+ ? true
788
+ : this._parentTreeItem.keyboardAccessible && this._parentTreeItem.expanded;
789
+ }
790
+ /** @hidden */
791
+ ngOnInit() {
792
+ var _a, _b;
793
+ this._treeService.selectionMode.pipe(takeUntil(this._destroy$)).subscribe((model) => {
794
+ this._selectionModel = model;
795
+ this._cdr.detectChanges();
796
+ });
797
+ this._treeService.navigationIndicator.pipe(takeUntil(this._destroy$)).subscribe((value) => {
798
+ this._navigationIndicator = value;
799
+ this._cdr.detectChanges();
800
+ });
801
+ this._dataSourceDirective.dataSource = this.childNodes;
802
+ this._treeService.addExpandableItem(this.id, this.level, this.expanded);
803
+ (_a = this._dataSourceDirective.dataSourceProvider) === null || _a === void 0 ? void 0 : _a.getTotalItems().pipe(takeUntil(this._destroy$)).subscribe((totalItems) => {
804
+ this._dsChildrenNumber = totalItems;
805
+ this._totalChildrenLoaded = true;
806
+ this._cdr.detectChanges();
807
+ });
808
+ (_b = this._dataSourceDirective.dataSourceProvider) === null || _b === void 0 ? void 0 : _b.dataReceived.pipe(filter((received) => received), switchMap(() => this._dataSourceDirective.dataChanged$), takeUntil(this._destroy$)).subscribe((data) => {
809
+ this.children = this._treeService.normalizeTreeItems(data, this.id, this.level + 1);
810
+ this.childrenLoaded = true;
811
+ setTimeout(() => {
812
+ this._treeService.detectChanges.next();
813
+ this._cdr.detectChanges();
814
+ });
815
+ });
816
+ }
817
+ /** @hidden */
818
+ ngAfterViewInit() {
819
+ this._projectedTreeItems.changes
820
+ .pipe(startWith(null), distinctUntilChanged(), takeUntil(this._destroy$))
821
+ .subscribe(() => {
822
+ this._cdr.detectChanges();
823
+ this._projectedTreeItems.forEach((treeItem, index) => {
824
+ treeItem.setPosition(this._projectedTreeItems.length, index + 1);
825
+ });
826
+ });
827
+ }
828
+ /** @hidden */
829
+ ngOnDestroy() {
830
+ this._treeService.removeExpandableItem(this.id, this.level);
831
+ }
832
+ /**
833
+ * Sets position of the current item in the set.
834
+ * @param totalItems Total items amount in the set.
835
+ * @param currentIndex Current item position in the set.
836
+ */
837
+ setPosition(totalItems, currentIndex) {
838
+ this._setSize = totalItems;
839
+ this._currentPosition = currentIndex;
840
+ }
841
+ /** Method to focus on the tree item. */
842
+ focus() {
843
+ var _a;
844
+ (_a = this.itemContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
845
+ }
846
+ /** Method for setting the focusable tabindex. */
847
+ setContainerTabIndex(value) {
848
+ this._containerTabIndex = value;
849
+ this._cdr.markForCheck();
850
+ }
851
+ /** @hidden */
852
+ _toggleExpandState(event) {
853
+ // Do not bubble up to selection change event.
854
+ event.stopImmediatePropagation();
855
+ this.expanded = !this.expanded;
856
+ this.expandedChange.emit(this.expanded);
857
+ this.focus();
858
+ }
859
+ /** @hidden */
860
+ _onClick(event) {
861
+ event.stopImmediatePropagation();
862
+ this._clicked$.next(event);
863
+ this.treeItemClick.emit(event);
864
+ }
865
+ /** @hidden */
866
+ _setSelected(selected) {
867
+ this._selectionState = selected;
868
+ }
869
+ }
870
+ TreeItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
871
+ TreeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TreeItemComponent, selector: "fd-tree-item", inputs: { value: "value", id: "id", ariaLabel: "ariaLabel", parentId: "parentId", navigatable: "navigatable", state: "state", childNodes: "childNodes", wrapContent: "wrapContent", level: "level", expanded: "expanded" }, outputs: { treeItemClick: "treeItemClick", expandedChange: "expandedChange" }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-level": "this.level" }, classAttribute: "fd-tree__item" }, providers: [
872
+ DestroyedService,
873
+ {
874
+ provide: FDK_SELECTABLE_ITEM_PROVIDER,
875
+ useExisting: TreeItemComponent
876
+ },
877
+ {
878
+ provide: BaseTreeItem,
879
+ useExisting: TreeItemComponent
880
+ }
881
+ ], queries: [{ propertyName: "_projectedTreeItems", predicate: BaseTreeItem }], viewQueries: [{ propertyName: "itemContainer", first: true, predicate: ["itemContainer"], descendants: true, read: ElementRef }, { propertyName: "selectableListItem", first: true, predicate: SelectableItemDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.DataSourceDirective }], ngImport: i0, template: "<div\n class=\"fd-tree__item-container\"\n [attr.tabindex]=\"_containerTabIndex\"\n (fdkClicked)=\"_onClick($event)\"\n fdkSelectableItem\n (selected)=\"_setSelected($event)\"\n [value]=\"value\"\n [attr.aria-haspopup]=\"children.length > 0 || hasProjectedChildren\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-setsize]=\"_setSize\"\n [attr.aria-posinset]=\"_currentPosition\"\n role=\"treeitem\"\n [attr.aria-level]=\"level\"\n #itemContainer\n [ngClass]=\"[\n state ? 'has-highlight-indicator has-highlight-indicator--' + state : '',\n navigatable ? 'fd-tree__item-container--active' : '',\n wrapContent ? 'fd-tree__content--wrap' : ''\n ]\"\n>\n <ng-container *ngIf=\"_selectionModel?.placement === 'left'\">\n <ng-template [ngTemplateOutlet]=\"selection\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"hasChildren\">\n <span\n *ngIf=\"hasDsChildren || hasProjectedChildren\"\n (click)=\"_toggleExpandState($event)\"\n class=\"fd-tree__expander\"\n aria-hidden=\"true\"\n role=\"presentation\"\n [attr.aria-label]=\"(expanded ? 'coreTree.collapse' : 'coreTree.expand') | fdTranslate\"\n [class.is-expanded]=\"expanded\"\n >\n <fd-icon\n class=\"fd-tree__icon\"\n [glyph]=\"expanded ? 'navigation-down-arrow' : 'navigation-right-arrow'\"\n ></fd-icon>\n </span>\n <div class=\"fd-tree__expander fd-tree__expander--loading\" *ngIf=\"!_totalChildrenLoaded\">\n <fd-skeleton type=\"rectangle\" width=\"1rem\" height=\"1rem\"></fd-skeleton>\n </div>\n <ng-container *ngIf=\"_selectionModel?.placement === 'afterExpand'\">\n <ng-template [ngTemplateOutlet]=\"selection\"></ng-template>\n </ng-container>\n </ng-container>\n <div class=\"fd-tree__content\">\n <ng-content select=\"[fdTreeItemIcon]\"></ng-content>\n <ng-content select=\"[fdTreeItemText]\"></ng-content>\n </div>\n <ng-content select=\"[fdTreeItemButton]\"></ng-content>\n <ng-container *ngIf=\"_selectionModel?.placement === 'right'\">\n <ng-template [ngTemplateOutlet]=\"selection\"></ng-template>\n </ng-container>\n <fd-icon\n glyph=\"slim-arrow-right\"\n class=\"fd-tree__icon fd-tree__icon--navigation\"\n *ngIf=\"navigatable && _navigationIndicator\"\n ></fd-icon>\n</div>\n\n<ng-container *ngIf=\"hasProjectedChildren && expanded\">\n <div class=\"fd-tree\">\n <ng-content select=\"fd-tree-item\"></ng-content>\n </div>\n</ng-container>\n\n<ng-template #selection>\n <div class=\"fd-form-item\">\n <fd-checkbox\n [(ngModel)]=\"_selectionState\"\n [ngModelOptions]=\"{ standalone: true }\"\n [standalone]=\"true\"\n tabIndexValue=\"-1\"\n *ngIf=\"_selectionModel?.mode === 'multiple'\"\n ></fd-checkbox>\n <fd-radio-button\n [(ngModel)]=\"_selectionState\"\n [ngModelOptions]=\"{ standalone: true }\"\n [selectedValue]=\"_selectionState\"\n [value]=\"true\"\n tabIndex=\"-1\"\n [standalone]=\"true\"\n tabIndexValue=\"-1\"\n *ngIf=\"_selectionModel?.mode === 'single'\"\n ></fd-radio-button>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i4.ClickedDirective, selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.SelectableItemDirective, selector: "[fdkSelectableItem]", inputs: ["value", "fdkSelectableItem"], outputs: ["clicked", "selected"], exportAs: ["fdkSelectableItem"] }, { kind: "component", type: i7$1.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "component", type: i5.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
882
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemComponent, decorators: [{
883
+ type: Component,
884
+ args: [{ selector: 'fd-tree-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [DataSourceDirective], host: {
885
+ class: 'fd-tree__item',
886
+ role: 'presentation'
887
+ }, providers: [
888
+ DestroyedService,
889
+ {
890
+ provide: FDK_SELECTABLE_ITEM_PROVIDER,
891
+ useExisting: TreeItemComponent
892
+ },
893
+ {
894
+ provide: BaseTreeItem,
895
+ useExisting: TreeItemComponent
896
+ }
897
+ ], template: "<div\n class=\"fd-tree__item-container\"\n [attr.tabindex]=\"_containerTabIndex\"\n (fdkClicked)=\"_onClick($event)\"\n fdkSelectableItem\n (selected)=\"_setSelected($event)\"\n [value]=\"value\"\n [attr.aria-haspopup]=\"children.length > 0 || hasProjectedChildren\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-setsize]=\"_setSize\"\n [attr.aria-posinset]=\"_currentPosition\"\n role=\"treeitem\"\n [attr.aria-level]=\"level\"\n #itemContainer\n [ngClass]=\"[\n state ? 'has-highlight-indicator has-highlight-indicator--' + state : '',\n navigatable ? 'fd-tree__item-container--active' : '',\n wrapContent ? 'fd-tree__content--wrap' : ''\n ]\"\n>\n <ng-container *ngIf=\"_selectionModel?.placement === 'left'\">\n <ng-template [ngTemplateOutlet]=\"selection\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"hasChildren\">\n <span\n *ngIf=\"hasDsChildren || hasProjectedChildren\"\n (click)=\"_toggleExpandState($event)\"\n class=\"fd-tree__expander\"\n aria-hidden=\"true\"\n role=\"presentation\"\n [attr.aria-label]=\"(expanded ? 'coreTree.collapse' : 'coreTree.expand') | fdTranslate\"\n [class.is-expanded]=\"expanded\"\n >\n <fd-icon\n class=\"fd-tree__icon\"\n [glyph]=\"expanded ? 'navigation-down-arrow' : 'navigation-right-arrow'\"\n ></fd-icon>\n </span>\n <div class=\"fd-tree__expander fd-tree__expander--loading\" *ngIf=\"!_totalChildrenLoaded\">\n <fd-skeleton type=\"rectangle\" width=\"1rem\" height=\"1rem\"></fd-skeleton>\n </div>\n <ng-container *ngIf=\"_selectionModel?.placement === 'afterExpand'\">\n <ng-template [ngTemplateOutlet]=\"selection\"></ng-template>\n </ng-container>\n </ng-container>\n <div class=\"fd-tree__content\">\n <ng-content select=\"[fdTreeItemIcon]\"></ng-content>\n <ng-content select=\"[fdTreeItemText]\"></ng-content>\n </div>\n <ng-content select=\"[fdTreeItemButton]\"></ng-content>\n <ng-container *ngIf=\"_selectionModel?.placement === 'right'\">\n <ng-template [ngTemplateOutlet]=\"selection\"></ng-template>\n </ng-container>\n <fd-icon\n glyph=\"slim-arrow-right\"\n class=\"fd-tree__icon fd-tree__icon--navigation\"\n *ngIf=\"navigatable && _navigationIndicator\"\n ></fd-icon>\n</div>\n\n<ng-container *ngIf=\"hasProjectedChildren && expanded\">\n <div class=\"fd-tree\">\n <ng-content select=\"fd-tree-item\"></ng-content>\n </div>\n</ng-container>\n\n<ng-template #selection>\n <div class=\"fd-form-item\">\n <fd-checkbox\n [(ngModel)]=\"_selectionState\"\n [ngModelOptions]=\"{ standalone: true }\"\n [standalone]=\"true\"\n tabIndexValue=\"-1\"\n *ngIf=\"_selectionModel?.mode === 'multiple'\"\n ></fd-checkbox>\n <fd-radio-button\n [(ngModel)]=\"_selectionState\"\n [ngModelOptions]=\"{ standalone: true }\"\n [selectedValue]=\"_selectionState\"\n [value]=\"true\"\n tabIndex=\"-1\"\n [standalone]=\"true\"\n tabIndexValue=\"-1\"\n *ngIf=\"_selectionModel?.mode === 'single'\"\n ></fd-radio-button>\n </div>\n</ng-template>\n" }]
898
+ }], propDecorators: { value: [{
899
+ type: Input
900
+ }], id: [{
901
+ type: Input
902
+ }], ariaLabel: [{
903
+ type: HostBinding,
904
+ args: ['attr.aria-label']
905
+ }, {
906
+ type: Input
907
+ }], parentId: [{
908
+ type: Input
909
+ }], navigatable: [{
910
+ type: Input
911
+ }], state: [{
912
+ type: Input
913
+ }], childNodes: [{
914
+ type: Input
915
+ }], wrapContent: [{
916
+ type: Input
917
+ }], level: [{
918
+ type: Input
919
+ }, {
920
+ type: HostBinding,
921
+ args: ['attr.aria-level']
922
+ }], expanded: [{
923
+ type: Input
924
+ }], treeItemClick: [{
925
+ type: Output
926
+ }], expandedChange: [{
927
+ type: Output
928
+ }], itemContainer: [{
929
+ type: ViewChild,
930
+ args: ['itemContainer', { read: ElementRef }]
931
+ }], selectableListItem: [{
932
+ type: ViewChild,
933
+ args: [SelectableItemDirective]
934
+ }], _projectedTreeItems: [{
935
+ type: ContentChildren,
936
+ args: [BaseTreeItem]
937
+ }] } });
938
+
939
+ class TreeItemIconDirective {
940
+ constructor() {
941
+ /** @hidden */
942
+ this._role = 'presentation';
943
+ /** @hidden */
944
+ this._ariaHidden = true;
945
+ }
946
+ }
947
+ TreeItemIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
948
+ TreeItemIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: TreeItemIconDirective, selector: "[fdTreeItemIcon]", host: { properties: { "attr.role": "this._role", "attr.aria-hidden": "this._ariaHidden" }, classAttribute: "fd-tree__icon" }, ngImport: i0 });
949
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemIconDirective, decorators: [{
950
+ type: Directive,
951
+ args: [{
952
+ selector: '[fdTreeItemIcon]',
953
+ host: {
954
+ class: 'fd-tree__icon'
955
+ }
956
+ }]
957
+ }], propDecorators: { _role: [{
958
+ type: HostBinding,
959
+ args: ['attr.role']
960
+ }], _ariaHidden: [{
961
+ type: HostBinding,
962
+ args: ['attr.aria-hidden']
963
+ }] } });
964
+ class TreeItemTextDirective {
965
+ }
966
+ TreeItemTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
967
+ TreeItemTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: TreeItemTextDirective, selector: "[fdTreeItemText]", host: { classAttribute: "fd-tree__text" }, ngImport: i0 });
968
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemTextDirective, decorators: [{
969
+ type: Directive,
970
+ args: [{
971
+ selector: '[fdTreeItemText]',
972
+ host: {
973
+ class: 'fd-tree__text'
974
+ }
975
+ }]
976
+ }] });
977
+
978
+ class TreeItemButtonDirective {
979
+ }
980
+ TreeItemButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
981
+ TreeItemButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: TreeItemButtonDirective, selector: "[fdTreeItemButton]", host: { classAttribute: "fd-tree__button" }, ngImport: i0 });
982
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeItemButtonDirective, decorators: [{
983
+ type: Directive,
984
+ args: [{
985
+ selector: '[fdTreeItemButton]',
986
+ host: {
987
+ class: 'fd-tree__button'
988
+ }
989
+ }]
990
+ }] });
991
+
168
992
  class TreeModule {
169
993
  }
170
994
  TreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
171
- TreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: TreeModule, declarations: [TreeComponent, TreeChildComponent], imports: [CommonModule, ButtonModule, IconModule, PopoverModule, MenuModule], exports: [TreeComponent, TreeChildComponent] });
172
- TreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeModule, imports: [CommonModule, ButtonModule, IconModule, PopoverModule, MenuModule] });
995
+ TreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: TreeModule, declarations: [TreeComponent,
996
+ TreeItemComponent,
997
+ TreeItemDefDirective,
998
+ TreeItemDirective,
999
+ TreeItemIconDirective,
1000
+ TreeItemTextDirective,
1001
+ TreeItemButtonDirective], imports: [CommonModule,
1002
+ ButtonModule,
1003
+ IconModule,
1004
+ PopoverModule,
1005
+ MenuModule,
1006
+ CheckboxModule, i4.ClickedBehaviorModule, FormsModule,
1007
+ SelectableItemDirective,
1008
+ RadioModule,
1009
+ SkeletonModule,
1010
+ RepeatDirective,
1011
+ ReactiveFormsModule,
1012
+ I18nModule], exports: [TreeComponent,
1013
+ TreeItemComponent,
1014
+ TreeItemDefDirective,
1015
+ TreeItemDirective,
1016
+ TreeItemIconDirective,
1017
+ TreeItemTextDirective,
1018
+ TreeItemButtonDirective] });
1019
+ TreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeModule, imports: [CommonModule,
1020
+ ButtonModule,
1021
+ IconModule,
1022
+ PopoverModule,
1023
+ MenuModule,
1024
+ CheckboxModule,
1025
+ ClickedBehaviorModule.forRoot(),
1026
+ FormsModule,
1027
+ RadioModule,
1028
+ SkeletonModule,
1029
+ ReactiveFormsModule,
1030
+ I18nModule] });
173
1031
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TreeModule, decorators: [{
174
1032
  type: NgModule,
175
1033
  args: [{
176
- declarations: [TreeComponent, TreeChildComponent],
177
- imports: [CommonModule, ButtonModule, IconModule, PopoverModule, MenuModule],
178
- exports: [TreeComponent, TreeChildComponent]
1034
+ declarations: [
1035
+ TreeComponent,
1036
+ TreeItemComponent,
1037
+ TreeItemDefDirective,
1038
+ TreeItemDirective,
1039
+ TreeItemIconDirective,
1040
+ TreeItemTextDirective,
1041
+ TreeItemButtonDirective
1042
+ ],
1043
+ imports: [
1044
+ CommonModule,
1045
+ ButtonModule,
1046
+ IconModule,
1047
+ PopoverModule,
1048
+ MenuModule,
1049
+ CheckboxModule,
1050
+ ClickedBehaviorModule.forRoot(),
1051
+ FormsModule,
1052
+ SelectableItemDirective,
1053
+ RadioModule,
1054
+ SkeletonModule,
1055
+ RepeatDirective,
1056
+ ReactiveFormsModule,
1057
+ I18nModule
1058
+ ],
1059
+ exports: [
1060
+ TreeComponent,
1061
+ TreeItemComponent,
1062
+ TreeItemDefDirective,
1063
+ TreeItemDirective,
1064
+ TreeItemIconDirective,
1065
+ TreeItemTextDirective,
1066
+ TreeItemButtonDirective
1067
+ ]
179
1068
  }]
180
1069
  }] });
181
1070
 
1071
+ const FD_TREE_ITEM = new InjectionToken('FdTreeItem');
1072
+
182
1073
  /**
183
1074
  * Generated bundle index. Do not edit.
184
1075
  */
185
1076
 
186
- export { TreeChildComponent, TreeComponent, TreeModule };
1077
+ export { ArrayTreeDataSource, BaseTreeItem, FD_TREE_ITEM, FdTreeDataSource, ObservableTreeDataSource, TreeComponent, TreeDataSourceParser, TreeItemButtonDirective, TreeItemComponent, TreeItemDefDirective, TreeItemDirective, TreeItemIconDirective, TreeItemTextDirective, TreeModule };
187
1078
  //# sourceMappingURL=fundamental-ngx-core-tree.mjs.map