@acorex/components 19.11.0-next.5 → 19.11.0-next.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-components-file-explorer.mjs +1 -1
- package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +5 -2
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +85 -101
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +172 -157
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/grid-layout-builder/lib/types.d.ts +3 -0
- package/image-editor/index.d.ts +0 -1
- package/image-editor/lib/image-editor-container/image-editor-container.component.d.ts +1 -14
- package/image-editor/lib/image-editor-cropper-window/image-editor-cropper-window.component.d.ts +3 -4
- package/image-editor/lib/image-editor-tools/image-editor-crop/image-editor-crop.component.d.ts +2 -3
- package/image-editor/lib/image-editor.module.d.ts +2 -3
- package/image-editor/lib/image-editor.service.d.ts +1 -0
- package/package.json +1 -1
- package/tree-view/lib/tree-view-item.component.d.ts +8 -12
- package/tree-view/lib/tree-view.class.d.ts +4 -20
- package/tree-view/lib/tree-view.component.d.ts +25 -16
- package/image-editor/lib/image-editor-tools/image-editor-header/image-editor-header.component.d.ts +0 -12
|
@@ -4,7 +4,7 @@ import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip'
|
|
|
4
4
|
import { AXPlatform } from '@acorex/core/platform';
|
|
5
5
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
6
6
|
import * as i0 from '@angular/core';
|
|
7
|
-
import { input, output,
|
|
7
|
+
import { signal, input, output, inject, effect, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, model, computed, NgModule } from '@angular/core';
|
|
8
8
|
import { AXCheckBoxComponent, AXCheckBoxModule } from '@acorex/components/check-box';
|
|
9
9
|
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
|
10
10
|
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
@@ -12,101 +12,6 @@ import * as i1 from '@angular/forms';
|
|
|
12
12
|
import { FormsModule } from '@angular/forms';
|
|
13
13
|
import { AXFormModule } from '@acorex/components/form';
|
|
14
14
|
|
|
15
|
-
class AXTreeViewItemComponent extends NXComponent {
|
|
16
|
-
constructor() {
|
|
17
|
-
super();
|
|
18
|
-
this.item = input();
|
|
19
|
-
this.onNodeExpand = output();
|
|
20
|
-
this.onNodeClick = output();
|
|
21
|
-
this.isExpanded = model(false);
|
|
22
|
-
this.hasChildField = input();
|
|
23
|
-
this.isActive = model(false);
|
|
24
|
-
this.onNodeDbClick = output();
|
|
25
|
-
this.isLoading = input(false);
|
|
26
|
-
this.disableField = input();
|
|
27
|
-
this.expandIconField = input(null);
|
|
28
|
-
this.executorChanges = input(null);
|
|
29
|
-
this.platformService = inject(AXPlatform);
|
|
30
|
-
this.expandBehavior = input('both');
|
|
31
|
-
this.arrowIcon = computed(() => {
|
|
32
|
-
if (this.expandIconField()) {
|
|
33
|
-
if (this.isExpanded()) {
|
|
34
|
-
return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().expand}`;
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().unExpand}`;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
if (this.isExpanded()) {
|
|
42
|
-
return `ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-down`;
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
return this.platformService.isRtl()
|
|
46
|
-
? 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-left'
|
|
47
|
-
: 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-right';
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
handleArrowNodeClick() {
|
|
53
|
-
if (this.item()[this.disableField()] || this.isLoading() || this.expandBehavior() === 'dbClick') {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
this.isExpanded.set(!this.isExpanded());
|
|
57
|
-
this.onNodeExpand.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
|
|
58
|
-
}
|
|
59
|
-
handleTextClick(item) {
|
|
60
|
-
this.onNodeClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
|
|
61
|
-
}
|
|
62
|
-
handleTextDbClick(item) {
|
|
63
|
-
if (item[this.disableField()] || this.expandBehavior() === 'click') {
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
if (item?.childrens?.length || item[this.hasChildField()]) {
|
|
67
|
-
this.isExpanded.set(!this.isExpanded());
|
|
68
|
-
this.onNodeDbClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXTreeViewItemComponent, isStandalone: true, selector: "ax-tree-view-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, expandIconField: { classPropertyName: "expandIconField", publicName: "expandIconField", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeExpand: "onNodeExpand", onNodeClick: "onNodeClick", isExpanded: "isExpandedChange", isActive: "isActiveChange", onNodeDbClick: "onNodeDbClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n @if ((item().childrens && !isLoading()) || (item()[hasChildField()] && !isLoading())) {\n <i [class.ax-state-disabled]=\"item()[disableField()]\" (click)=\"handleArrowNodeClick()\" class=\"{{ arrowIcon() }}\"></i>\n } @else if (isLoading()) {\n <ax-loading></ax-loading>\n } @else {\n <i class=\"ax-icon\"></i>\n }\n\n <div class=\"ax-tree-view-items\">\n <ng-content select=\"ax-check-box\"></ng-content>\n <div\n [class.ax-state-disabled]=\"item()[disableField()]\"\n [axTooltip]=\"item().tooltip\"\n axTooltipPlacement=\"end-bottom\"\n (click)=\"handleTextClick(item())\"\n (dblclick)=\"handleTextDbClick(item())\"\n class=\"ax-tree-view-items-prefix noselect-tree-view\"\n [class.ax-state-tree-view-active]=\"item().active\"\n >\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-text\"></ng-content>\n <ng-content select=\"ax-suffix\"></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"{{ platformService.isRtl() ? 'ax-state-tree-view-rtl' : 'ax-state-tree-view-ltr' }}\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], animations: [
|
|
73
|
-
trigger('collapseExpand', [
|
|
74
|
-
state('collapsed', style({
|
|
75
|
-
height: '0',
|
|
76
|
-
overflow: 'hidden',
|
|
77
|
-
opacity: 0,
|
|
78
|
-
})),
|
|
79
|
-
state('expanded', style({
|
|
80
|
-
height: '*',
|
|
81
|
-
overflow: 'hidden',
|
|
82
|
-
opacity: 1,
|
|
83
|
-
})),
|
|
84
|
-
transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
|
|
85
|
-
]),
|
|
86
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
87
|
-
}
|
|
88
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
|
|
89
|
-
type: Component,
|
|
90
|
-
args: [{ selector: 'ax-tree-view-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
91
|
-
trigger('collapseExpand', [
|
|
92
|
-
state('collapsed', style({
|
|
93
|
-
height: '0',
|
|
94
|
-
overflow: 'hidden',
|
|
95
|
-
opacity: 0,
|
|
96
|
-
})),
|
|
97
|
-
state('expanded', style({
|
|
98
|
-
height: '*',
|
|
99
|
-
overflow: 'hidden',
|
|
100
|
-
opacity: 1,
|
|
101
|
-
})),
|
|
102
|
-
transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
|
|
103
|
-
]),
|
|
104
|
-
], imports: [AXLoadingComponent, AXTooltipDirective], template: "<div class=\"ax-tree-view-container\">\n @if ((item().childrens && !isLoading()) || (item()[hasChildField()] && !isLoading())) {\n <i [class.ax-state-disabled]=\"item()[disableField()]\" (click)=\"handleArrowNodeClick()\" class=\"{{ arrowIcon() }}\"></i>\n } @else if (isLoading()) {\n <ax-loading></ax-loading>\n } @else {\n <i class=\"ax-icon\"></i>\n }\n\n <div class=\"ax-tree-view-items\">\n <ng-content select=\"ax-check-box\"></ng-content>\n <div\n [class.ax-state-disabled]=\"item()[disableField()]\"\n [axTooltip]=\"item().tooltip\"\n axTooltipPlacement=\"end-bottom\"\n (click)=\"handleTextClick(item())\"\n (dblclick)=\"handleTextDbClick(item())\"\n class=\"ax-tree-view-items-prefix noselect-tree-view\"\n [class.ax-state-tree-view-active]=\"item().active\"\n >\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-text\"></ng-content>\n <ng-content select=\"ax-suffix\"></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"{{ platformService.isRtl() ? 'ax-state-tree-view-rtl' : 'ax-state-tree-view-ltr' }}\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
105
|
-
}], ctorParameters: () => [] });
|
|
106
|
-
|
|
107
|
-
class AXTreeItemClickBaseEvent extends AXClickEvent {
|
|
108
|
-
}
|
|
109
|
-
|
|
110
15
|
class AXTreeViewComponent extends NXComponent {
|
|
111
16
|
constructor() {
|
|
112
17
|
super(...arguments);
|
|
@@ -114,18 +19,26 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
114
19
|
this.items = input();
|
|
115
20
|
this.showCheckbox = input(true);
|
|
116
21
|
this.selectionMode = input('single');
|
|
117
|
-
this.selectionBehavior = input(
|
|
22
|
+
this.selectionBehavior = input();
|
|
118
23
|
this.focusNodeEnabled = input(true);
|
|
119
24
|
this.valueField = input('id');
|
|
120
25
|
this.textField = input('text');
|
|
121
26
|
this.visibleField = input('visible');
|
|
122
27
|
this.disableField = input('disabled');
|
|
123
28
|
this.hasChildField = input('hasChild');
|
|
29
|
+
this.selectedField = input('selected');
|
|
30
|
+
this.expandedField = input('expanded');
|
|
31
|
+
this.tooltipField = input('tooltip');
|
|
32
|
+
this.childrenField = input('children');
|
|
33
|
+
this.activeField = input('active');
|
|
124
34
|
this.iconField = input('icon');
|
|
125
35
|
this.onSelectionChanged = output();
|
|
126
36
|
this.onNodeClick = output();
|
|
127
37
|
this.onCollapsedChanged = output();
|
|
38
|
+
this.onNodedbClick = output();
|
|
128
39
|
this.executorChanges = signal(null);
|
|
40
|
+
this.look = input('defult');
|
|
41
|
+
this.platformService = inject(AXPlatform);
|
|
129
42
|
this.#effect = effect(() => {
|
|
130
43
|
const itemsInput = this.items();
|
|
131
44
|
if (typeof itemsInput === 'function') {
|
|
@@ -144,28 +57,32 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
144
57
|
this.itemsPromise = null;
|
|
145
58
|
}
|
|
146
59
|
});
|
|
147
|
-
this.
|
|
60
|
+
this.expandOn = input('defult');
|
|
148
61
|
this.loadingState = signal({});
|
|
149
62
|
}
|
|
63
|
+
/** @ignore */
|
|
64
|
+
get __hostClass() {
|
|
65
|
+
return [`ax-look-${this.look()}`];
|
|
66
|
+
}
|
|
150
67
|
get resolvedItems() {
|
|
151
68
|
return this.itemsSignal();
|
|
152
69
|
}
|
|
153
70
|
#effect;
|
|
154
71
|
handleNodeSelectionClick(event, item) {
|
|
155
|
-
if (item[this.disableField()] || this.isNodeLoading(item.
|
|
72
|
+
if (item[this.disableField()] || this.isNodeLoading(item[this.valueField()])) {
|
|
156
73
|
return;
|
|
157
74
|
}
|
|
158
75
|
if (this.selectionMode() === 'single' && event.isUserInteraction) {
|
|
159
76
|
this.handleUnSelectNode(this.itemsSignal());
|
|
160
77
|
}
|
|
161
|
-
item.
|
|
78
|
+
item[this.selectedField()] = event.value;
|
|
162
79
|
if (event.value !== null) {
|
|
163
80
|
switch (this.selectionBehavior()) {
|
|
164
81
|
case 'autoExpand':
|
|
165
82
|
if (event.value) {
|
|
166
|
-
if (this.itemsPromise && item[this.hasChildField()] && !item?.
|
|
83
|
+
if (this.itemsPromise && item[this.hasChildField()] && !item?.[this.childrenField()]?.length) {
|
|
167
84
|
this.fetchData(item);
|
|
168
|
-
this.setNodeLoading(item.
|
|
85
|
+
this.setNodeLoading(item[this.valueField()], true);
|
|
169
86
|
}
|
|
170
87
|
this.toggleExpand(item);
|
|
171
88
|
}
|
|
@@ -182,7 +99,7 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
182
99
|
this.expandAndToggleSelection(item, event.value);
|
|
183
100
|
break;
|
|
184
101
|
case 'indeterminate':
|
|
185
|
-
if (item?.
|
|
102
|
+
if (item?.[this.childrenField()]?.length) {
|
|
186
103
|
this.applySelectionToChildren(item, event.value, item[this.valueField()]);
|
|
187
104
|
}
|
|
188
105
|
this.updateParentSelection(item, event.value);
|
|
@@ -206,8 +123,8 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
206
123
|
*
|
|
207
124
|
*/
|
|
208
125
|
toggleExpand(item) {
|
|
209
|
-
if (!item.
|
|
210
|
-
item.
|
|
126
|
+
if (!item[this.expandedField()]) {
|
|
127
|
+
item[this.expandedField()] = true;
|
|
211
128
|
}
|
|
212
129
|
}
|
|
213
130
|
/**
|
|
@@ -217,15 +134,15 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
217
134
|
*/
|
|
218
135
|
expandAndToggleSelection(item, selected) {
|
|
219
136
|
this.toggleExpand(item);
|
|
220
|
-
if (item.
|
|
137
|
+
if (item[this.childrenField()]?.length) {
|
|
221
138
|
this.applySelectionToChildren(item, selected, item[this.valueField()]);
|
|
222
139
|
}
|
|
223
140
|
}
|
|
224
141
|
applySelectionToChildren(item, isSelected, parentId) {
|
|
225
|
-
item.
|
|
142
|
+
item[this.childrenField()].forEach((child) => {
|
|
226
143
|
child.parentId = parentId;
|
|
227
144
|
child.selected = isSelected;
|
|
228
|
-
if (child.
|
|
145
|
+
if (child.children?.length) {
|
|
229
146
|
this.applySelectionToChildren(child, isSelected, child.id);
|
|
230
147
|
}
|
|
231
148
|
});
|
|
@@ -236,11 +153,11 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
236
153
|
*
|
|
237
154
|
*/
|
|
238
155
|
updateParentSelection(item, selected) {
|
|
239
|
-
item.
|
|
156
|
+
item[this.selectedField()] = selected;
|
|
240
157
|
let parent = this.findParent(item, this.itemsSignal());
|
|
241
|
-
while ((parent && parent.selected != false) || (parent && item.
|
|
242
|
-
const allSelected = parent?.
|
|
243
|
-
const someSelected = parent?.
|
|
158
|
+
while ((parent && parent.selected != false) || (parent && item[this.selectedField()])) {
|
|
159
|
+
const allSelected = parent?.children?.every((child) => child.selected);
|
|
160
|
+
const someSelected = parent?.children?.some((child) => child.selected || child.indeterminate);
|
|
244
161
|
if (!allSelected && !someSelected) {
|
|
245
162
|
parent.selected = false;
|
|
246
163
|
parent.indeterminate = null;
|
|
@@ -262,11 +179,11 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
262
179
|
}
|
|
263
180
|
findParent(item, nodes) {
|
|
264
181
|
for (const node of nodes) {
|
|
265
|
-
if (node.
|
|
182
|
+
if (node[this.childrenField()]?.includes(item)) {
|
|
266
183
|
return node;
|
|
267
184
|
}
|
|
268
|
-
else if (node.
|
|
269
|
-
const parent = this.findParent(item, node.
|
|
185
|
+
else if (node[this.childrenField()]) {
|
|
186
|
+
const parent = this.findParent(item, node[this.childrenField()]);
|
|
270
187
|
if (parent)
|
|
271
188
|
return parent;
|
|
272
189
|
}
|
|
@@ -281,11 +198,11 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
281
198
|
findSelectedNodes(nodes) {
|
|
282
199
|
let selectedNodes = [];
|
|
283
200
|
nodes.forEach((node) => {
|
|
284
|
-
if (node.
|
|
201
|
+
if (node[this.selectedField()]) {
|
|
285
202
|
selectedNodes.push(node);
|
|
286
203
|
}
|
|
287
|
-
if (node.
|
|
288
|
-
selectedNodes = selectedNodes.concat(this.findSelectedNodes(node.
|
|
204
|
+
if (node[this.childrenField()]) {
|
|
205
|
+
selectedNodes = selectedNodes.concat(this.findSelectedNodes(node[this.childrenField()]));
|
|
289
206
|
}
|
|
290
207
|
});
|
|
291
208
|
return selectedNodes;
|
|
@@ -297,9 +214,9 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
297
214
|
*/
|
|
298
215
|
handleUnSelectNode(items) {
|
|
299
216
|
items.forEach((child) => {
|
|
300
|
-
child.
|
|
301
|
-
if (child?.
|
|
302
|
-
this.handleUnSelectNode(child.
|
|
217
|
+
child[this.selectedField()] = false;
|
|
218
|
+
if (child?.[this.childrenField()]?.length) {
|
|
219
|
+
this.handleUnSelectNode(child[this.childrenField()]);
|
|
303
220
|
}
|
|
304
221
|
});
|
|
305
222
|
}
|
|
@@ -309,11 +226,11 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
309
226
|
*
|
|
310
227
|
*/
|
|
311
228
|
fetchData(selectedNode) {
|
|
312
|
-
this.itemsPromise(selectedNode?.
|
|
229
|
+
this.itemsPromise(selectedNode?.[this.valueField()])
|
|
313
230
|
.then((data) => {
|
|
314
231
|
if (Array.isArray(data)) {
|
|
315
|
-
if (selectedNode?.
|
|
316
|
-
this.findNode(selectedNode.
|
|
232
|
+
if (selectedNode?.[this.valueField()]) {
|
|
233
|
+
this.findNode(selectedNode[this.valueField()], data, this.itemsSignal());
|
|
317
234
|
}
|
|
318
235
|
else {
|
|
319
236
|
this.itemsSignal.set(data);
|
|
@@ -321,21 +238,21 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
321
238
|
}
|
|
322
239
|
})
|
|
323
240
|
.finally(() => {
|
|
324
|
-
this.setNodeLoading(selectedNode?.
|
|
241
|
+
this.setNodeLoading(selectedNode?.[this.valueField()], false);
|
|
325
242
|
});
|
|
326
243
|
}
|
|
327
244
|
findNode(parentId, _children, source) {
|
|
328
245
|
if (source.length) {
|
|
329
246
|
source.forEach((element) => {
|
|
330
247
|
if (element[this.valueField()] == parentId) {
|
|
331
|
-
if (this.selectionBehavior() === 'indeterminate' && element.
|
|
332
|
-
_children.forEach((child) => (child.
|
|
248
|
+
if (this.selectionBehavior() === 'indeterminate' && element[this.selectedField()]) {
|
|
249
|
+
_children.forEach((child) => (child[this.selectedField()] = true));
|
|
333
250
|
}
|
|
334
|
-
element.
|
|
251
|
+
element[this.childrenField()] = _children;
|
|
335
252
|
}
|
|
336
253
|
else {
|
|
337
|
-
if (element?.
|
|
338
|
-
this.findNode(parentId, _children, element.
|
|
254
|
+
if (element?.[this.childrenField()])
|
|
255
|
+
this.findNode(parentId, _children, element[this.childrenField()]);
|
|
339
256
|
}
|
|
340
257
|
});
|
|
341
258
|
}
|
|
@@ -347,37 +264,20 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
347
264
|
*/
|
|
348
265
|
handleNodeExpandClick(node) {
|
|
349
266
|
const selectedNode = node.data;
|
|
350
|
-
if (this.itemsPromise && node.data.isExpanded && !node?.data.
|
|
267
|
+
if (this.itemsPromise && node.data.isExpanded && !node?.data.children?.length) {
|
|
351
268
|
this.fetchData(selectedNode);
|
|
352
269
|
this.setNodeLoading(selectedNode.id, true);
|
|
353
270
|
}
|
|
354
271
|
this.onCollapsedChanged.emit({ component: this, data: node.data, nativeElement: this.nativeElement });
|
|
355
272
|
}
|
|
356
|
-
handleNodeClick(node) {
|
|
357
|
-
if (node.data[this.disableField()]) {
|
|
358
|
-
return;
|
|
359
|
-
}
|
|
360
|
-
if (this.focusNodeEnabled()) {
|
|
361
|
-
this.handleUnActiveNode(this.itemsSignal());
|
|
362
|
-
node.data.active = true;
|
|
363
|
-
}
|
|
364
|
-
this.onNodeClick.emit({ component: this, data: node.data, nativeElement: this.nativeElement });
|
|
365
|
-
}
|
|
366
273
|
handleUnActiveNode(unActiveSource) {
|
|
367
274
|
unActiveSource.forEach((child) => {
|
|
368
|
-
child.
|
|
369
|
-
if (child?.
|
|
370
|
-
this.handleUnActiveNode(child.
|
|
275
|
+
child[this.activeField()] = false;
|
|
276
|
+
if (child?.[this.childrenField()]?.length) {
|
|
277
|
+
this.handleUnActiveNode(child[this.childrenField()]);
|
|
371
278
|
}
|
|
372
279
|
});
|
|
373
280
|
}
|
|
374
|
-
handleNodeDbClick(node) {
|
|
375
|
-
if (this.itemsPromise) {
|
|
376
|
-
const selectedNode = node.data;
|
|
377
|
-
this.fetchData(selectedNode);
|
|
378
|
-
this.setNodeLoading(selectedNode.id, true);
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
281
|
isNodeLoading(nodeId) {
|
|
382
282
|
return this.loadingState()[nodeId] || false;
|
|
383
283
|
}
|
|
@@ -390,11 +290,11 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
390
290
|
executeOnTreeNode(node, operation, value) {
|
|
391
291
|
switch (operation) {
|
|
392
292
|
case 'active':
|
|
393
|
-
node.
|
|
293
|
+
node[this.activeField()] = value;
|
|
394
294
|
break;
|
|
395
295
|
case 'expand':
|
|
396
|
-
node.
|
|
397
|
-
if (this.itemsPromise && node[this.hasChildField()] && !node.
|
|
296
|
+
node[this.expandedField()] = true;
|
|
297
|
+
if (this.itemsPromise && node[this.hasChildField()] && !node[this.childrenField()]?.length) {
|
|
398
298
|
this.handleNodeExpandClick({ data: node, nativeElement: this.nativeElement, component: this });
|
|
399
299
|
}
|
|
400
300
|
break;
|
|
@@ -415,12 +315,127 @@ class AXTreeViewComponent extends NXComponent {
|
|
|
415
315
|
this.executorChanges.set(operation);
|
|
416
316
|
}
|
|
417
317
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
418
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, focusNodeEnabled: { classPropertyName: "focusNodeEnabled", publicName: "focusNodeEnabled", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, visibleField: { classPropertyName: "visibleField", publicName: "visibleField", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null },
|
|
318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, focusNodeEnabled: { classPropertyName: "focusNodeEnabled", publicName: "focusNodeEnabled", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, visibleField: { classPropertyName: "visibleField", publicName: "visibleField", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, activeField: { classPropertyName: "activeField", publicName: "activeField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, expandOn: { classPropertyName: "expandOn", publicName: "expandOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", onNodeClick: "onNodeClick", onCollapsedChanged: "onCollapsedChanged", onNodedbClick: "onNodedbClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "@for (node of resolvedItems; track $index) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item[visibleField()] !== false) {\n <ax-tree-view-item\n [item]=\"item\"\n [(isExpanded)]=\"item.isExpanded\"\n [(isActive)]=\"item.active\"\n [isLoading]=\"isNodeLoading(item.id)\"\n [executorChanges]=\"executorChanges()\"\n >\n @if (this.showCheckbox()) {\n <ax-check-box\n [disabled]=\"item[disableField()]\"\n [indeterminate]=\"item.indeterminate\"\n [(ngModel)]=\"item.selected\"\n (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n ></ax-check-box>\n }\n <ax-prefix>\n @if (item[iconField()]) {\n <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n } @else {\n <i></i>\n }\n </ax-prefix>\n @if (item[textField()]) {\n <ax-text>{{ item[textField()] }}</ax-text>\n }\n\n <ax-suffix></ax-suffix>\n @for (child of item?.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-tree-view-item>\n }\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-tree-view-indicator-size: 2px}ax-tree-view.ax-look-with-line ax-tree-view-item{position:relative}ax-tree-view.ax-look-with-line ax-tree-view-item:before{content:\"\";position:absolute;top:0;inset-inline-start:.625rem;width:1px;height:100%;background-color:#ccc}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container{padding-inline-start:1.25rem}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:1.75rem}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-tree-view-child{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXTreeViewItemComponent, selector: "ax-tree-view-item", inputs: ["item", "isExpanded", "isActive", "isLoading", "expandIconField", "executorChanges"], outputs: ["isExpandedChange", "isActiveChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
419
319
|
}
|
|
420
320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewComponent, decorators: [{
|
|
421
321
|
type: Component,
|
|
422
|
-
args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
423
|
-
|
|
322
|
+
args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
323
|
+
NgTemplateOutlet,
|
|
324
|
+
AXTreeViewItemComponent,
|
|
325
|
+
AXCheckBoxComponent,
|
|
326
|
+
FormsModule,
|
|
327
|
+
AXDecoratorGenericComponent,
|
|
328
|
+
AXDecoratorIconComponent,
|
|
329
|
+
], template: "@for (node of resolvedItems; track $index) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item[visibleField()] !== false) {\n <ax-tree-view-item\n [item]=\"item\"\n [(isExpanded)]=\"item.isExpanded\"\n [(isActive)]=\"item.active\"\n [isLoading]=\"isNodeLoading(item.id)\"\n [executorChanges]=\"executorChanges()\"\n >\n @if (this.showCheckbox()) {\n <ax-check-box\n [disabled]=\"item[disableField()]\"\n [indeterminate]=\"item.indeterminate\"\n [(ngModel)]=\"item.selected\"\n (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n ></ax-check-box>\n }\n <ax-prefix>\n @if (item[iconField()]) {\n <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n } @else {\n <i></i>\n }\n </ax-prefix>\n @if (item[textField()]) {\n <ax-text>{{ item[textField()] }}</ax-text>\n }\n\n <ax-suffix></ax-suffix>\n @for (child of item?.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-tree-view-item>\n }\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-tree-view-indicator-size: 2px}ax-tree-view.ax-look-with-line ax-tree-view-item{position:relative}ax-tree-view.ax-look-with-line ax-tree-view-item:before{content:\"\";position:absolute;top:0;inset-inline-start:.625rem;width:1px;height:100%;background-color:#ccc}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container{padding-inline-start:1.25rem}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:1.75rem}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-tree-view-child{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}\n"] }]
|
|
330
|
+
}], propDecorators: { __hostClass: [{
|
|
331
|
+
type: HostBinding,
|
|
332
|
+
args: ['class']
|
|
333
|
+
}] } });
|
|
334
|
+
|
|
335
|
+
class AXTreeViewItemComponent extends NXComponent {
|
|
336
|
+
constructor() {
|
|
337
|
+
super();
|
|
338
|
+
this.treeView = inject(AXTreeViewComponent);
|
|
339
|
+
this.item = input();
|
|
340
|
+
this.isExpanded = model(false);
|
|
341
|
+
this.isActive = model(false);
|
|
342
|
+
this.isLoading = input(false);
|
|
343
|
+
this.expandIconField = input(null);
|
|
344
|
+
this.executorChanges = input();
|
|
345
|
+
this.platformService = inject(AXPlatform);
|
|
346
|
+
this.arrowIcon = computed(() => {
|
|
347
|
+
if (this.expandIconField()) {
|
|
348
|
+
if (this.isExpanded()) {
|
|
349
|
+
return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().expand}`;
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().unExpand}`;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
else {
|
|
356
|
+
if (this.isExpanded()) {
|
|
357
|
+
return `ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-down`;
|
|
358
|
+
}
|
|
359
|
+
else {
|
|
360
|
+
return this.platformService.isRtl()
|
|
361
|
+
? 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-left'
|
|
362
|
+
: 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-right';
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
handleArrowNodeClick() {
|
|
368
|
+
if (this.item()[this.treeView.disableField()] || this.isLoading() || this.treeView.expandOn() === 'dbClick') {
|
|
369
|
+
return;
|
|
370
|
+
}
|
|
371
|
+
this.isExpanded.set(!this.isExpanded());
|
|
372
|
+
if (this.treeView.itemsPromise && this.isExpanded() && !this.item()[this.treeView.childrenField()]?.length) {
|
|
373
|
+
this.treeView.fetchData(this.item());
|
|
374
|
+
this.treeView.setNodeLoading(this.item()[this.treeView.valueField()], true);
|
|
375
|
+
}
|
|
376
|
+
this.treeView.onCollapsedChanged.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
|
|
377
|
+
}
|
|
378
|
+
handleTextClick(item) {
|
|
379
|
+
if (this.item()[this.treeView.disableField()]) {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
if (this.treeView.focusNodeEnabled()) {
|
|
383
|
+
this.treeView.handleUnActiveNode(this.treeView.itemsSignal());
|
|
384
|
+
this.item()[this.treeView.activeField()] = true;
|
|
385
|
+
}
|
|
386
|
+
this.treeView.onNodeClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
|
|
387
|
+
}
|
|
388
|
+
handleTextDbClick(item) {
|
|
389
|
+
if (item[this.treeView.disableField()] || this.treeView.expandOn() === 'click') {
|
|
390
|
+
return;
|
|
391
|
+
}
|
|
392
|
+
if (item?.[this.treeView.childrenField()]?.length || item[this.treeView.hasChildField()]) {
|
|
393
|
+
this.isExpanded.set(!this.isExpanded());
|
|
394
|
+
if (this.treeView.itemsPromise) {
|
|
395
|
+
this.treeView.fetchData(this.item());
|
|
396
|
+
this.treeView.setNodeLoading(this.item()[this.treeView.valueField()], true);
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
this.treeView.onNodedbClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
|
|
400
|
+
}
|
|
401
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXTreeViewItemComponent, isStandalone: true, selector: "ax-tree-view-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, expandIconField: { classPropertyName: "expandIconField", publicName: "expandIconField", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange", isActive: "isActiveChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n @if ((item()[this.treeView.childrenField()] && !isLoading()) || (item()[treeView.hasChildField()] && !isLoading())) {\n <i\n [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n (click)=\"handleArrowNodeClick()\"\n class=\"{{ arrowIcon() }}\"\n ></i>\n } @else if (isLoading()) {\n <ax-loading></ax-loading>\n }\n\n <div class=\"ax-tree-view-items\">\n <ng-content select=\"ax-check-box\"></ng-content>\n <div\n [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n [axTooltip]=\"item()[treeView.tooltipField()]\"\n axTooltipPlacement=\"end-bottom\"\n (click)=\"handleTextClick(item())\"\n (dblclick)=\"handleTextDbClick(item())\"\n class=\"ax-tree-view-items-prefix noselect-tree-view\"\n [class.ax-state-tree-view-active]=\"item()[treeView.activeField()]\"\n >\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-text\"></ng-content>\n <ng-content select=\"ax-suffix\"></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"ax-tree-view-child\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], animations: [
|
|
403
|
+
trigger('collapseExpand', [
|
|
404
|
+
state('collapsed', style({
|
|
405
|
+
height: '0',
|
|
406
|
+
overflow: 'hidden',
|
|
407
|
+
opacity: 0,
|
|
408
|
+
})),
|
|
409
|
+
state('expanded', style({
|
|
410
|
+
height: '*',
|
|
411
|
+
overflow: 'hidden',
|
|
412
|
+
opacity: 1,
|
|
413
|
+
})),
|
|
414
|
+
transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
|
|
415
|
+
]),
|
|
416
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
417
|
+
}
|
|
418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
|
|
419
|
+
type: Component,
|
|
420
|
+
args: [{ selector: 'ax-tree-view-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
421
|
+
trigger('collapseExpand', [
|
|
422
|
+
state('collapsed', style({
|
|
423
|
+
height: '0',
|
|
424
|
+
overflow: 'hidden',
|
|
425
|
+
opacity: 0,
|
|
426
|
+
})),
|
|
427
|
+
state('expanded', style({
|
|
428
|
+
height: '*',
|
|
429
|
+
overflow: 'hidden',
|
|
430
|
+
opacity: 1,
|
|
431
|
+
})),
|
|
432
|
+
transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
|
|
433
|
+
]),
|
|
434
|
+
], imports: [AXLoadingComponent, AXTooltipDirective], template: "<div class=\"ax-tree-view-container\">\n @if ((item()[this.treeView.childrenField()] && !isLoading()) || (item()[treeView.hasChildField()] && !isLoading())) {\n <i\n [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n (click)=\"handleArrowNodeClick()\"\n class=\"{{ arrowIcon() }}\"\n ></i>\n } @else if (isLoading()) {\n <ax-loading></ax-loading>\n }\n\n <div class=\"ax-tree-view-items\">\n <ng-content select=\"ax-check-box\"></ng-content>\n <div\n [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n [axTooltip]=\"item()[treeView.tooltipField()]\"\n axTooltipPlacement=\"end-bottom\"\n (click)=\"handleTextClick(item())\"\n (dblclick)=\"handleTextDbClick(item())\"\n class=\"ax-tree-view-items-prefix noselect-tree-view\"\n [class.ax-state-tree-view-active]=\"item()[treeView.activeField()]\"\n >\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-text\"></ng-content>\n <ng-content select=\"ax-suffix\"></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"ax-tree-view-child\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
435
|
+
}], ctorParameters: () => [] });
|
|
436
|
+
|
|
437
|
+
class AXTreeItemClickBaseEvent extends AXClickEvent {
|
|
438
|
+
}
|
|
424
439
|
|
|
425
440
|
class AXTreeViewModule {
|
|
426
441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|