@acorex/components 21.0.2-next.36 → 21.0.2-next.38
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.
|
@@ -743,6 +743,13 @@ class AXTreeViewComponent {
|
|
|
743
743
|
this.doubleClickDuration = input(200, ...(ngDevMode ? [{ debugName: "doubleClickDuration" }] : []));
|
|
744
744
|
/** Duration in milliseconds for detecting double-clicks. Default: `50`. */
|
|
745
745
|
this.tooltipDelay = input(500, ...(ngDevMode ? [{ debugName: "tooltipDelay" }] : []));
|
|
746
|
+
/**
|
|
747
|
+
* When true, {@link selectedIds} is the source of truth: the tree applies it on load/reload
|
|
748
|
+
* and emits updates on user interaction. Default: `false` (existing imperative API unchanged).
|
|
749
|
+
*/
|
|
750
|
+
this.controlledSelection = input(false, ...(ngDevMode ? [{ debugName: "controlledSelection" }] : []));
|
|
751
|
+
/** Selected node ids (two-way). Used when {@link controlledSelection} is true. */
|
|
752
|
+
this.selectedIds = model([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
|
|
746
753
|
// ==================== Outputs ====================
|
|
747
754
|
/** Emitted before a drop operation - set canceled to true to prevent drop */
|
|
748
755
|
this.onBeforeDrop = output();
|
|
@@ -793,6 +800,10 @@ class AXTreeViewComponent {
|
|
|
793
800
|
}, ...(ngDevMode ? [{ debugName: "directionCollapsedIcon" }] : []));
|
|
794
801
|
/** Flag to prevent infinite loops when syncing datasource */
|
|
795
802
|
this.isUpdatingFromDatasource = false;
|
|
803
|
+
/** Bumped when controlled selection changes so stale async sync is ignored. */
|
|
804
|
+
this.selectionSyncRevision = 0;
|
|
805
|
+
/** Prevents selectedIds effect from re-applying when the model was updated from the tree. */
|
|
806
|
+
this.isUpdatingSelectedIdsModel = false;
|
|
796
807
|
/** Computed to check if datasource is a function */
|
|
797
808
|
this.isLazyDataSource = computed(() => typeof this.datasource() === 'function', ...(ngDevMode ? [{ debugName: "isLazyDataSource" }] : []));
|
|
798
809
|
/** Computed: Returns true when selection is restricted to leaf nodes only */
|
|
@@ -836,6 +847,9 @@ class AXTreeViewComponent {
|
|
|
836
847
|
const ds = this.datasource();
|
|
837
848
|
if (Array.isArray(ds)) {
|
|
838
849
|
this.nodes.set([...ds]);
|
|
850
|
+
if (this.controlledSelection()) {
|
|
851
|
+
this.scheduleApplySelectedIdsToTree(0);
|
|
852
|
+
}
|
|
839
853
|
}
|
|
840
854
|
else if (typeof ds === 'function') {
|
|
841
855
|
try {
|
|
@@ -846,6 +860,19 @@ class AXTreeViewComponent {
|
|
|
846
860
|
}
|
|
847
861
|
}
|
|
848
862
|
}, ...(ngDevMode ? [{ debugName: "#datasourceEffect" }] : []));
|
|
863
|
+
/** Applies external selectedIds changes to the tree when controlledSelection is enabled. */
|
|
864
|
+
this.#selectedIdsEffect = effect(() => {
|
|
865
|
+
if (!this.controlledSelection()) {
|
|
866
|
+
return;
|
|
867
|
+
}
|
|
868
|
+
const ids = this.selectedIds();
|
|
869
|
+
if (this.isUpdatingSelectedIdsModel) {
|
|
870
|
+
return;
|
|
871
|
+
}
|
|
872
|
+
void ids;
|
|
873
|
+
this.bumpSelectionSyncRevision();
|
|
874
|
+
this.scheduleApplySelectedIdsToTree(0);
|
|
875
|
+
}, ...(ngDevMode ? [{ debugName: "#selectedIdsEffect" }] : []));
|
|
849
876
|
/** Initialize direction change listener */
|
|
850
877
|
this.#initDirectionListener = afterNextRender(() => {
|
|
851
878
|
this.platformService.directionChange
|
|
@@ -1023,6 +1050,8 @@ class AXTreeViewComponent {
|
|
|
1023
1050
|
// ==================== Effects ====================
|
|
1024
1051
|
/** Effect to handle datasource changes */
|
|
1025
1052
|
#datasourceEffect;
|
|
1053
|
+
/** Applies external selectedIds changes to the tree when controlledSelection is enabled. */
|
|
1054
|
+
#selectedIdsEffect;
|
|
1026
1055
|
/** Initialize direction change listener */
|
|
1027
1056
|
#initDirectionListener;
|
|
1028
1057
|
// ==================== Public API ====================
|
|
@@ -1060,6 +1089,37 @@ class AXTreeViewComponent {
|
|
|
1060
1089
|
this.treeService.collectSelected(this.nodes(), selected, this.selectedField(), this.childrenField());
|
|
1061
1090
|
return selected;
|
|
1062
1091
|
}
|
|
1092
|
+
/**
|
|
1093
|
+
* Returns selected node ids (from {@link selectedIds} when controlled, otherwise from tree state).
|
|
1094
|
+
*/
|
|
1095
|
+
getSelectedIds() {
|
|
1096
|
+
if (this.controlledSelection()) {
|
|
1097
|
+
return this.normalizeSelectedIdsForMode(this.selectedIds());
|
|
1098
|
+
}
|
|
1099
|
+
return this.normalizeSelectedIdsForMode(this.getSelectedNodes()
|
|
1100
|
+
.map((node) => this.getNodeId(node))
|
|
1101
|
+
.filter(Boolean));
|
|
1102
|
+
}
|
|
1103
|
+
/**
|
|
1104
|
+
* Expands ancestor paths (when provided) and applies selection.
|
|
1105
|
+
* Intended for lazy trees with {@link controlledSelection}.
|
|
1106
|
+
*/
|
|
1107
|
+
async selectAndReveal(nodeIds, options) {
|
|
1108
|
+
this.bumpSelectionSyncRevision();
|
|
1109
|
+
const revision = this.selectionSyncRevision;
|
|
1110
|
+
const normalized = this.normalizeSelectedIdsForMode(nodeIds);
|
|
1111
|
+
const paths = options?.ancestorPaths ??
|
|
1112
|
+
normalized.map((id) => {
|
|
1113
|
+
const path = this.getNodePath(id);
|
|
1114
|
+
return path.slice(0, -1);
|
|
1115
|
+
});
|
|
1116
|
+
await this.expandAncestorPaths(paths, revision);
|
|
1117
|
+
if (!this.isSelectionSyncCurrent(revision)) {
|
|
1118
|
+
return;
|
|
1119
|
+
}
|
|
1120
|
+
this.setSelectedIdsModel(normalized);
|
|
1121
|
+
await this.applySelectedIdsToTreeWithRetry(revision);
|
|
1122
|
+
}
|
|
1063
1123
|
/**
|
|
1064
1124
|
* Delete selected nodes from the tree
|
|
1065
1125
|
*/
|
|
@@ -1069,7 +1129,12 @@ class AXTreeViewComponent {
|
|
|
1069
1129
|
this.treeService.updateAllParentStates(this.nodes(), this.hasIntermediateState(), this.childrenField(), this.selectedField(), this.indeterminateField());
|
|
1070
1130
|
}
|
|
1071
1131
|
this.refreshNodes();
|
|
1072
|
-
this.
|
|
1132
|
+
if (this.controlledSelection()) {
|
|
1133
|
+
this.syncSelectedIdsModelFromTree('programmatic');
|
|
1134
|
+
}
|
|
1135
|
+
else {
|
|
1136
|
+
this.emitSelectionChange('programmatic');
|
|
1137
|
+
}
|
|
1073
1138
|
}
|
|
1074
1139
|
/**
|
|
1075
1140
|
* Select all nodes in the tree (respects disabled state)
|
|
@@ -1111,7 +1176,12 @@ class AXTreeViewComponent {
|
|
|
1111
1176
|
selectAllNonDisabled(this.nodes());
|
|
1112
1177
|
}
|
|
1113
1178
|
this.refreshNodes();
|
|
1114
|
-
this.
|
|
1179
|
+
if (this.controlledSelection()) {
|
|
1180
|
+
this.syncSelectedIdsModelFromTree('programmatic');
|
|
1181
|
+
}
|
|
1182
|
+
else {
|
|
1183
|
+
this.emitSelectionChange('programmatic');
|
|
1184
|
+
}
|
|
1115
1185
|
}
|
|
1116
1186
|
/**
|
|
1117
1187
|
* Deselect all nodes in the tree
|
|
@@ -1119,7 +1189,12 @@ class AXTreeViewComponent {
|
|
|
1119
1189
|
deselectAll() {
|
|
1120
1190
|
this.treeService.setAllSelection(this.nodes(), false, this.selectedField(), this.indeterminateField(), this.childrenField());
|
|
1121
1191
|
this.refreshNodes();
|
|
1122
|
-
this.
|
|
1192
|
+
if (this.controlledSelection()) {
|
|
1193
|
+
this.syncSelectedIdsModelFromTree('programmatic');
|
|
1194
|
+
}
|
|
1195
|
+
else {
|
|
1196
|
+
this.emitSelectionChange('programmatic');
|
|
1197
|
+
}
|
|
1123
1198
|
}
|
|
1124
1199
|
/**
|
|
1125
1200
|
* Find a node by ID in the tree
|
|
@@ -1163,11 +1238,17 @@ class AXTreeViewComponent {
|
|
|
1163
1238
|
}
|
|
1164
1239
|
finally {
|
|
1165
1240
|
this._isLoading.set(false);
|
|
1241
|
+
if (this.controlledSelection()) {
|
|
1242
|
+
this.scheduleApplySelectedIdsToTree(50);
|
|
1243
|
+
}
|
|
1166
1244
|
}
|
|
1167
1245
|
}
|
|
1168
1246
|
else if (Array.isArray(ds)) {
|
|
1169
1247
|
// For array datasource, just refresh from the current data
|
|
1170
1248
|
this.nodes.set([...ds]);
|
|
1249
|
+
if (this.controlledSelection()) {
|
|
1250
|
+
this.scheduleApplySelectedIdsToTree(0);
|
|
1251
|
+
}
|
|
1171
1252
|
}
|
|
1172
1253
|
}
|
|
1173
1254
|
/**
|
|
@@ -1323,7 +1404,12 @@ class AXTreeViewComponent {
|
|
|
1323
1404
|
node,
|
|
1324
1405
|
isUserInteraction: false,
|
|
1325
1406
|
});
|
|
1326
|
-
this.
|
|
1407
|
+
if (this.controlledSelection()) {
|
|
1408
|
+
this.syncSelectedIdsModelFromTree('programmatic');
|
|
1409
|
+
}
|
|
1410
|
+
else {
|
|
1411
|
+
this.emitSelectionChange('programmatic');
|
|
1412
|
+
}
|
|
1327
1413
|
return true;
|
|
1328
1414
|
}
|
|
1329
1415
|
/**
|
|
@@ -1351,7 +1437,12 @@ class AXTreeViewComponent {
|
|
|
1351
1437
|
node,
|
|
1352
1438
|
isUserInteraction: false,
|
|
1353
1439
|
});
|
|
1354
|
-
this.
|
|
1440
|
+
if (this.controlledSelection()) {
|
|
1441
|
+
this.syncSelectedIdsModelFromTree('programmatic');
|
|
1442
|
+
}
|
|
1443
|
+
else {
|
|
1444
|
+
this.emitSelectionChange('programmatic');
|
|
1445
|
+
}
|
|
1355
1446
|
return true;
|
|
1356
1447
|
}
|
|
1357
1448
|
/**
|
|
@@ -1679,13 +1770,172 @@ class AXTreeViewComponent {
|
|
|
1679
1770
|
/**
|
|
1680
1771
|
* Emit selection change event with all selected nodes
|
|
1681
1772
|
*/
|
|
1682
|
-
emitSelectionChange() {
|
|
1773
|
+
emitSelectionChange(source = 'programmatic') {
|
|
1683
1774
|
const selectedNodes = this.getSelectedNodes();
|
|
1775
|
+
const selectedIds = this.normalizeSelectedIdsForMode(selectedNodes.map((node) => this.getNodeId(node)).filter(Boolean));
|
|
1684
1776
|
this.onSelectionChange.emit({
|
|
1685
1777
|
component: this,
|
|
1686
1778
|
selectedNodes,
|
|
1779
|
+
selectedIds,
|
|
1780
|
+
source,
|
|
1687
1781
|
});
|
|
1688
1782
|
}
|
|
1783
|
+
//#region ---- Controlled selection ----
|
|
1784
|
+
bumpSelectionSyncRevision() {
|
|
1785
|
+
this.selectionSyncRevision++;
|
|
1786
|
+
if (this.pendingApplySelectedIdsTimeout !== undefined) {
|
|
1787
|
+
clearTimeout(this.pendingApplySelectedIdsTimeout);
|
|
1788
|
+
this.pendingApplySelectedIdsTimeout = undefined;
|
|
1789
|
+
}
|
|
1790
|
+
}
|
|
1791
|
+
isSelectionSyncCurrent(revision) {
|
|
1792
|
+
return revision === this.selectionSyncRevision;
|
|
1793
|
+
}
|
|
1794
|
+
normalizeSelectedIdsForMode(ids) {
|
|
1795
|
+
const filtered = ids.filter((id) => Boolean(id));
|
|
1796
|
+
if (this.selectMode() === 'single') {
|
|
1797
|
+
return filtered.length > 0 ? [filtered[filtered.length - 1]] : [];
|
|
1798
|
+
}
|
|
1799
|
+
return [...filtered];
|
|
1800
|
+
}
|
|
1801
|
+
areSelectedIdsEqual(a, b) {
|
|
1802
|
+
if (a.length !== b.length) {
|
|
1803
|
+
return false;
|
|
1804
|
+
}
|
|
1805
|
+
return a.every((id, index) => id === b[index]);
|
|
1806
|
+
}
|
|
1807
|
+
setSelectedIdsModel(ids) {
|
|
1808
|
+
const normalized = this.normalizeSelectedIdsForMode(ids);
|
|
1809
|
+
if (this.areSelectedIdsEqual(normalized, this.selectedIds())) {
|
|
1810
|
+
return;
|
|
1811
|
+
}
|
|
1812
|
+
this.isUpdatingSelectedIdsModel = true;
|
|
1813
|
+
try {
|
|
1814
|
+
this.selectedIds.set(normalized);
|
|
1815
|
+
}
|
|
1816
|
+
finally {
|
|
1817
|
+
this.isUpdatingSelectedIdsModel = false;
|
|
1818
|
+
}
|
|
1819
|
+
}
|
|
1820
|
+
syncSelectedIdsModelFromTree(source) {
|
|
1821
|
+
if (this.controlledSelection()) {
|
|
1822
|
+
const normalized = this.normalizeSelectedIdsForMode(this.getSelectedNodes()
|
|
1823
|
+
.map((node) => this.getNodeId(node))
|
|
1824
|
+
.filter(Boolean));
|
|
1825
|
+
this.setSelectedIdsModel(normalized);
|
|
1826
|
+
}
|
|
1827
|
+
this.emitSelectionChange(source);
|
|
1828
|
+
}
|
|
1829
|
+
scheduleApplySelectedIdsToTree(delayMs = 0) {
|
|
1830
|
+
if (!this.controlledSelection()) {
|
|
1831
|
+
return;
|
|
1832
|
+
}
|
|
1833
|
+
if (this.pendingApplySelectedIdsTimeout !== undefined) {
|
|
1834
|
+
clearTimeout(this.pendingApplySelectedIdsTimeout);
|
|
1835
|
+
}
|
|
1836
|
+
const revision = this.selectionSyncRevision;
|
|
1837
|
+
this.pendingApplySelectedIdsTimeout = setTimeout(() => {
|
|
1838
|
+
this.pendingApplySelectedIdsTimeout = undefined;
|
|
1839
|
+
if (!this.isSelectionSyncCurrent(revision)) {
|
|
1840
|
+
return;
|
|
1841
|
+
}
|
|
1842
|
+
this.applySelectedIdsToTree(revision);
|
|
1843
|
+
const ids = this.normalizeSelectedIdsForMode(this.selectedIds());
|
|
1844
|
+
const allSynced = ids.length === 0 ||
|
|
1845
|
+
ids.every((id) => {
|
|
1846
|
+
const node = this.findNode(id);
|
|
1847
|
+
return node !== null && this.getNodeSelected(node);
|
|
1848
|
+
});
|
|
1849
|
+
if (!allSynced && ids.length > 0) {
|
|
1850
|
+
this.scheduleApplySelectedIdsToTree(50);
|
|
1851
|
+
}
|
|
1852
|
+
}, delayMs);
|
|
1853
|
+
}
|
|
1854
|
+
applySelectedIdsToTree(revision) {
|
|
1855
|
+
if (!this.isSelectionSyncCurrent(revision) || !this.controlledSelection()) {
|
|
1856
|
+
return;
|
|
1857
|
+
}
|
|
1858
|
+
const ids = this.normalizeSelectedIdsForMode(this.selectedIds());
|
|
1859
|
+
const mode = this.selectMode();
|
|
1860
|
+
if (ids.length === 0 || mode === 'none') {
|
|
1861
|
+
this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
|
|
1862
|
+
this.refreshNodes();
|
|
1863
|
+
return;
|
|
1864
|
+
}
|
|
1865
|
+
if (mode === 'single') {
|
|
1866
|
+
const id = ids[0];
|
|
1867
|
+
const node = this.findNode(id);
|
|
1868
|
+
if (!node) {
|
|
1869
|
+
return;
|
|
1870
|
+
}
|
|
1871
|
+
if (this.getNodeSelected(node)) {
|
|
1872
|
+
return;
|
|
1873
|
+
}
|
|
1874
|
+
this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
|
|
1875
|
+
this.setNodeSelected(node, true);
|
|
1876
|
+
this.setNodeIndeterminate(node, false);
|
|
1877
|
+
this.refreshNodes();
|
|
1878
|
+
return;
|
|
1879
|
+
}
|
|
1880
|
+
this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
|
|
1881
|
+
for (const id of ids) {
|
|
1882
|
+
const node = this.findNode(id);
|
|
1883
|
+
if (!node || !this.canSelectNode(node) || this.isNodeEffectivelyDisabled(node)) {
|
|
1884
|
+
continue;
|
|
1885
|
+
}
|
|
1886
|
+
this.setNodeSelected(node, true);
|
|
1887
|
+
this.setNodeIndeterminate(node, false);
|
|
1888
|
+
const children = this.getNodeChildren(node);
|
|
1889
|
+
if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
|
|
1890
|
+
this.treeService.selectAllChildren(children, true, this.selectedField(), this.indeterminateField(), this.childrenField());
|
|
1891
|
+
}
|
|
1892
|
+
}
|
|
1893
|
+
if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
|
|
1894
|
+
this.treeService.updateAllParentStates(this.nodes(), this.hasIntermediateState(), this.childrenField(), this.selectedField(), this.indeterminateField());
|
|
1895
|
+
}
|
|
1896
|
+
this.refreshNodes();
|
|
1897
|
+
}
|
|
1898
|
+
async applySelectedIdsToTreeWithRetry(revision) {
|
|
1899
|
+
for (let attempt = 0; attempt < 8; attempt++) {
|
|
1900
|
+
if (!this.isSelectionSyncCurrent(revision)) {
|
|
1901
|
+
return;
|
|
1902
|
+
}
|
|
1903
|
+
this.applySelectedIdsToTree(revision);
|
|
1904
|
+
const ids = this.normalizeSelectedIdsForMode(this.selectedIds());
|
|
1905
|
+
const allSynced = ids.length === 0 ||
|
|
1906
|
+
ids.every((id) => {
|
|
1907
|
+
const node = this.findNode(id);
|
|
1908
|
+
return node !== null && this.getNodeSelected(node);
|
|
1909
|
+
});
|
|
1910
|
+
if (allSynced) {
|
|
1911
|
+
return;
|
|
1912
|
+
}
|
|
1913
|
+
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
1914
|
+
}
|
|
1915
|
+
}
|
|
1916
|
+
async expandAncestorPaths(paths, revision) {
|
|
1917
|
+
const ancestorDepths = new Map();
|
|
1918
|
+
for (const path of paths) {
|
|
1919
|
+
path.forEach((ancestorId, depth) => {
|
|
1920
|
+
const existing = ancestorDepths.get(ancestorId);
|
|
1921
|
+
if (existing === undefined || depth < existing) {
|
|
1922
|
+
ancestorDepths.set(ancestorId, depth);
|
|
1923
|
+
}
|
|
1924
|
+
});
|
|
1925
|
+
}
|
|
1926
|
+
const sortedAncestors = Array.from(ancestorDepths.entries())
|
|
1927
|
+
.sort((a, b) => a[1] - b[1])
|
|
1928
|
+
.map(([id]) => id);
|
|
1929
|
+
for (const ancestorId of sortedAncestors) {
|
|
1930
|
+
if (!this.isSelectionSyncCurrent(revision)) {
|
|
1931
|
+
return;
|
|
1932
|
+
}
|
|
1933
|
+
if (!this.isNodeExpanded(ancestorId)) {
|
|
1934
|
+
await this.expandNode(ancestorId);
|
|
1935
|
+
}
|
|
1936
|
+
}
|
|
1937
|
+
}
|
|
1938
|
+
//#endregion
|
|
1689
1939
|
// ==================== Event Handlers ====================
|
|
1690
1940
|
/**
|
|
1691
1941
|
* Handle node double click
|
|
@@ -1768,7 +2018,7 @@ class AXTreeViewComponent {
|
|
|
1768
2018
|
node,
|
|
1769
2019
|
isUserInteraction: event.isUserInteraction,
|
|
1770
2020
|
});
|
|
1771
|
-
this.
|
|
2021
|
+
this.syncSelectedIdsModelFromTree(event.isUserInteraction ? 'user' : 'programmatic');
|
|
1772
2022
|
}
|
|
1773
2023
|
/**
|
|
1774
2024
|
* Handle drop events for tree nodes
|
|
@@ -1886,6 +2136,9 @@ class AXTreeViewComponent {
|
|
|
1886
2136
|
const result = loadFn();
|
|
1887
2137
|
const rootNodes = result instanceof Promise ? await result : result;
|
|
1888
2138
|
this.nodes.set(rootNodes);
|
|
2139
|
+
if (this.controlledSelection()) {
|
|
2140
|
+
this.scheduleApplySelectedIdsToTree(0);
|
|
2141
|
+
}
|
|
1889
2142
|
}
|
|
1890
2143
|
catch (error) {
|
|
1891
2144
|
this.handleError('Failed to load root items', error);
|
|
@@ -1934,6 +2187,9 @@ class AXTreeViewComponent {
|
|
|
1934
2187
|
return newSet;
|
|
1935
2188
|
});
|
|
1936
2189
|
this.refreshNodes();
|
|
2190
|
+
if (this.controlledSelection()) {
|
|
2191
|
+
this.scheduleApplySelectedIdsToTree(0);
|
|
2192
|
+
}
|
|
1937
2193
|
}
|
|
1938
2194
|
}
|
|
1939
2195
|
/**
|
|
@@ -1973,6 +2229,9 @@ class AXTreeViewComponent {
|
|
|
1973
2229
|
* Handle single selection mode
|
|
1974
2230
|
*/
|
|
1975
2231
|
handleSingleSelection(node, event) {
|
|
2232
|
+
if (this.controlledSelection()) {
|
|
2233
|
+
this.bumpSelectionSyncRevision();
|
|
2234
|
+
}
|
|
1976
2235
|
this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
|
|
1977
2236
|
this.setNodeSelected(node, true);
|
|
1978
2237
|
this.setNodeIndeterminate(node, false);
|
|
@@ -1983,7 +2242,7 @@ class AXTreeViewComponent {
|
|
|
1983
2242
|
nativeEvent: event,
|
|
1984
2243
|
isUserInteraction: true,
|
|
1985
2244
|
});
|
|
1986
|
-
this.
|
|
2245
|
+
this.syncSelectedIdsModelFromTree('user');
|
|
1987
2246
|
}
|
|
1988
2247
|
/**
|
|
1989
2248
|
* Handle multiple selection mode (used internally, but in multiple mode selection is primarily handled by checkboxes)
|
|
@@ -2006,7 +2265,7 @@ class AXTreeViewComponent {
|
|
|
2006
2265
|
nativeEvent: event,
|
|
2007
2266
|
isUserInteraction: true,
|
|
2008
2267
|
});
|
|
2009
|
-
this.
|
|
2268
|
+
this.syncSelectedIdsModelFromTree('user');
|
|
2010
2269
|
}
|
|
2011
2270
|
/**
|
|
2012
2271
|
* Get array reference by drop list ID
|
|
@@ -2272,7 +2531,7 @@ class AXTreeViewComponent {
|
|
|
2272
2531
|
nativeEvent: event,
|
|
2273
2532
|
isUserInteraction: true,
|
|
2274
2533
|
});
|
|
2275
|
-
this.
|
|
2534
|
+
this.syncSelectedIdsModelFromTree('user');
|
|
2276
2535
|
}
|
|
2277
2536
|
/**
|
|
2278
2537
|
* Handle Enter key selection
|
|
@@ -2305,7 +2564,7 @@ class AXTreeViewComponent {
|
|
|
2305
2564
|
nativeEvent: event,
|
|
2306
2565
|
isUserInteraction: true,
|
|
2307
2566
|
});
|
|
2308
|
-
this.
|
|
2567
|
+
this.syncSelectedIdsModelFromTree('user');
|
|
2309
2568
|
}
|
|
2310
2569
|
/**
|
|
2311
2570
|
* Handle Ctrl/Cmd + Enter key selection
|
|
@@ -2330,7 +2589,7 @@ class AXTreeViewComponent {
|
|
|
2330
2589
|
nativeEvent: event,
|
|
2331
2590
|
isUserInteraction: true,
|
|
2332
2591
|
});
|
|
2333
|
-
this.
|
|
2592
|
+
this.syncSelectedIdsModelFromTree('user');
|
|
2334
2593
|
}
|
|
2335
2594
|
/**
|
|
2336
2595
|
* Type guard to check if value is an Event
|
|
@@ -2350,7 +2609,7 @@ class AXTreeViewComponent {
|
|
|
2350
2609
|
}
|
|
2351
2610
|
}
|
|
2352
2611
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, inheritDisabled: { classPropertyName: "inheritDisabled", publicName: "inheritDisabled", isSignal: true, isRequired: false, transformFunction: null }, expandOnDoubleClick: { classPropertyName: "expandOnDoubleClick", publicName: "expandOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, doubleClickDuration: { classPropertyName: "doubleClickDuration", publicName: "doubleClickDuration", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n <div class=\"ax-tree-view-drop-list\">\n @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n <div class=\"ax-tree-view-node\">\n <div class=\"ax-tree-view-node-content\">\n <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Root drop list -->\n<div\n axFocusTrap\n [axDropList]=\"dragBehavior() !== 'none'\"\n [sortingDisabled]=\"false\"\n [id]=\"getListId()\"\n [attr.data-node-id]=\"null\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event)\"\n class=\"ax-tree-view-drop-list\"\n [class.ax-tree-view-card]=\"look() === 'card'\"\n [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n [class.ax-tree-view-loading]=\"isLoading()\"\n role=\"group\"\n>\n @for (node of nodes(); track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(0)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n axDoubleClick\n [duration]=\"doubleClickDuration()\"\n [disabled]=\"isDoubleClickDisabledForNode(node)\"\n (onClick)=\"onNodeClickHandle(node, $event)\"\n (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n @if (nodeTemplate()) {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n (click)=\"$event.stopPropagation()\"\n (pointerdown)=\"$event.stopPropagation()\"\n ></ax-check-box>\n }\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipOpenAfter]=\"tooltipDelay()\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n <div\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"getListId(parent)\"\n [attr.data-node-id]=\"getNodeId(parent)\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event, parent)\"\n class=\"ax-tree-view-drop-list\"\n role=\"group\"\n >\n @for (node of children; track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(level)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n axDoubleClick\n [duration]=\"doubleClickDuration()\"\n [disabled]=\"isDoubleClickDisabledForNode(node)\"\n (onClick)=\"onNodeClickHandle(node, $event)\"\n (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n\n @if (nodeTemplate()) {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n (click)=\"$event.stopPropagation()\"\n (pointerdown)=\"$event.stopPropagation()\"\n ></ax-check-box>\n }\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipOpenAfter]=\"tooltipDelay()\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-surface), .5);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-surface), .2);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-surface));--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{min-width:1.5rem;height:1.5rem;border-radius:.25rem}.ax-tree-view-skeleton-label{flex:1;height:1rem;border-radius:.25rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXDoubleClickDirective, selector: "[axDoubleClick]", inputs: ["duration", "disabled"], outputs: ["onClick", "onDblClick"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]", inputs: ["axFocusTrapArrowNavigation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, inheritDisabled: { classPropertyName: "inheritDisabled", publicName: "inheritDisabled", isSignal: true, isRequired: false, transformFunction: null }, expandOnDoubleClick: { classPropertyName: "expandOnDoubleClick", publicName: "expandOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, doubleClickDuration: { classPropertyName: "doubleClickDuration", publicName: "doubleClickDuration", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "controlledSelection", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", selectedIds: "selectedIdsChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n <div class=\"ax-tree-view-drop-list\">\n @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n <div class=\"ax-tree-view-node\">\n <div class=\"ax-tree-view-node-content\">\n <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Root drop list -->\n<div\n axFocusTrap\n [axDropList]=\"dragBehavior() !== 'none'\"\n [sortingDisabled]=\"false\"\n [id]=\"getListId()\"\n [attr.data-node-id]=\"null\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event)\"\n class=\"ax-tree-view-drop-list\"\n [class.ax-tree-view-card]=\"look() === 'card'\"\n [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n [class.ax-tree-view-loading]=\"isLoading()\"\n role=\"group\"\n>\n @for (node of nodes(); track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(0)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n axDoubleClick\n [duration]=\"doubleClickDuration()\"\n [disabled]=\"isDoubleClickDisabledForNode(node)\"\n (onClick)=\"onNodeClickHandle(node, $event)\"\n (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n @if (nodeTemplate()) {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n (click)=\"$event.stopPropagation()\"\n (pointerdown)=\"$event.stopPropagation()\"\n ></ax-check-box>\n }\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipOpenAfter]=\"tooltipDelay()\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n <div\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"getListId(parent)\"\n [attr.data-node-id]=\"getNodeId(parent)\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event, parent)\"\n class=\"ax-tree-view-drop-list\"\n role=\"group\"\n >\n @for (node of children; track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(level)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n axDoubleClick\n [duration]=\"doubleClickDuration()\"\n [disabled]=\"isDoubleClickDisabledForNode(node)\"\n (onClick)=\"onNodeClickHandle(node, $event)\"\n (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n\n @if (nodeTemplate()) {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n (click)=\"$event.stopPropagation()\"\n (pointerdown)=\"$event.stopPropagation()\"\n ></ax-check-box>\n }\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipOpenAfter]=\"tooltipDelay()\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-surface), .5);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-surface), .2);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-surface));--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{min-width:1.5rem;height:1.5rem;border-radius:.25rem}.ax-tree-view-skeleton-label{flex:1;height:1rem;border-radius:.25rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXDoubleClickDirective, selector: "[axDoubleClick]", inputs: ["duration", "disabled"], outputs: ["onClick", "onDblClick"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]", inputs: ["axFocusTrapArrowNavigation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2354
2613
|
}
|
|
2355
2614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTreeViewComponent, decorators: [{
|
|
2356
2615
|
type: Component,
|