carbon-components-angular 5.38.2 → 5.39.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/documentation/components/TextareaLabelComponent.html +79 -5
- package/docs/documentation/components/TreeNodeComponent.html +87 -50
- package/docs/documentation/components/TreeViewComponent.html +106 -15
- package/docs/documentation/coverage.html +11 -11
- package/docs/documentation/injectables/TreeViewService.html +158 -11
- package/docs/documentation/interfaces/Node.html +48 -1
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TilesModule/dependencies.svg +92 -92
- package/docs/documentation/modules/TilesModule.html +92 -92
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TimePickerModule.html +4 -4
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +31 -31
- package/docs/documentation/modules/TimePickerSelectModule.html +31 -31
- package/docs/documentation/modules/ToggleModule/dependencies.svg +40 -44
- package/docs/documentation/modules/ToggleModule.html +40 -44
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggletipModule.html +4 -4
- package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TooltipModule.html +4 -4
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +30 -30
- package/docs/documentation/modules/TreeviewModule.html +30 -30
- package/docs/documentation.json +228 -92
- package/docs/storybook/{1345.9201efca.iframe.bundle.js → 1345.9eabf5e2.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/input-textarea-stories.1a3b5e80.iframe.bundle.js +1 -0
- package/docs/storybook/main.fef9668a.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.b26c0bbe.iframe.bundle.js → runtime~main.193d0e61.iframe.bundle.js} +1 -1
- package/docs/storybook/treeview-treeview-stories.1e5a6fb2.iframe.bundle.js +1 -0
- package/esm2020/input/textarea-label.component.mjs +8 -2
- package/esm2020/treeview/tree-node.component.mjs +21 -10
- package/esm2020/treeview/tree-node.types.mjs +1 -1
- package/esm2020/treeview/treeview.component.mjs +16 -5
- package/esm2020/treeview/treeview.service.mjs +10 -1
- package/fesm2015/carbon-components-angular-input.mjs +8 -1
- package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-treeview.mjs +55 -24
- package/fesm2015/carbon-components-angular-treeview.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-input.mjs +7 -1
- package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-treeview.mjs +44 -13
- package/fesm2020/carbon-components-angular-treeview.mjs.map +1 -1
- package/input/textarea-label.component.d.ts +1 -0
- package/package.json +1 -1
- package/treeview/tree-node.component.d.ts +2 -1
- package/treeview/tree-node.types.d.ts +1 -0
- package/treeview/treeview.component.d.ts +5 -0
- package/treeview/treeview.service.d.ts +7 -0
- package/docs/storybook/input-textarea-stories.51dab44c.iframe.bundle.js +0 -1
- package/docs/storybook/main.99dffacb.iframe.bundle.js +0 -1
- package/docs/storybook/treeview-treeview-stories.85954a19.iframe.bundle.js +0 -1
|
@@ -289,6 +289,9 @@
|
|
|
289
289
|
<li>
|
|
290
290
|
<a href="#ngOnInit" >ngOnInit</a>
|
|
291
291
|
</li>
|
|
292
|
+
<li>
|
|
293
|
+
<a href="#onNodeFocusChange" >onNodeFocusChange</a>
|
|
294
|
+
</li>
|
|
292
295
|
</ul>
|
|
293
296
|
</td>
|
|
294
297
|
</tr>
|
|
@@ -657,8 +660,8 @@ Passing value will disregard projected content</p>
|
|
|
657
660
|
|
|
658
661
|
<tr>
|
|
659
662
|
<td class="col-md-4">
|
|
660
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
661
|
-
class="link-to-prism">src/treeview/treeview.component.ts:
|
|
663
|
+
<div class="io-line">Defined in <a href="" data-line="186"
|
|
664
|
+
class="link-to-prism">src/treeview/treeview.component.ts:186</a></div>
|
|
662
665
|
</td>
|
|
663
666
|
</tr>
|
|
664
667
|
|
|
@@ -726,8 +729,8 @@ Passing value will disregard projected content</p>
|
|
|
726
729
|
|
|
727
730
|
<tr>
|
|
728
731
|
<td class="col-md-4">
|
|
729
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
730
|
-
class="link-to-prism">src/treeview/treeview.component.ts:
|
|
732
|
+
<div class="io-line">Defined in <a href="" data-line="182"
|
|
733
|
+
class="link-to-prism">src/treeview/treeview.component.ts:182</a></div>
|
|
731
734
|
</td>
|
|
732
735
|
</tr>
|
|
733
736
|
|
|
@@ -765,8 +768,8 @@ Passing value will disregard projected content</p>
|
|
|
765
768
|
|
|
766
769
|
<tr>
|
|
767
770
|
<td class="col-md-4">
|
|
768
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
769
|
-
class="link-to-prism">src/treeview/treeview.component.ts:
|
|
771
|
+
<div class="io-line">Defined in <a href="" data-line="178"
|
|
772
|
+
class="link-to-prism">src/treeview/treeview.component.ts:178</a></div>
|
|
770
773
|
</td>
|
|
771
774
|
</tr>
|
|
772
775
|
|
|
@@ -828,8 +831,8 @@ Passing value will disregard projected content</p>
|
|
|
828
831
|
|
|
829
832
|
<tr>
|
|
830
833
|
<td class="col-md-4">
|
|
831
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
832
|
-
class="link-to-prism">src/treeview/treeview.component.ts:
|
|
834
|
+
<div class="io-line">Defined in <a href="" data-line="154"
|
|
835
|
+
class="link-to-prism">src/treeview/treeview.component.ts:154</a></div>
|
|
833
836
|
</td>
|
|
834
837
|
</tr>
|
|
835
838
|
|
|
@@ -904,8 +907,8 @@ Passing value will disregard projected content</p>
|
|
|
904
907
|
|
|
905
908
|
<tr>
|
|
906
909
|
<td class="col-md-4">
|
|
907
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
908
|
-
class="link-to-prism">src/treeview/treeview.component.ts:
|
|
910
|
+
<div class="io-line">Defined in <a href="" data-line="136"
|
|
911
|
+
class="link-to-prism">src/treeview/treeview.component.ts:136</a></div>
|
|
909
912
|
</td>
|
|
910
913
|
</tr>
|
|
911
914
|
|
|
@@ -943,8 +946,8 @@ Passing value will disregard projected content</p>
|
|
|
943
946
|
|
|
944
947
|
<tr>
|
|
945
948
|
<td class="col-md-4">
|
|
946
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
947
|
-
class="link-to-prism">src/treeview/treeview.component.ts:
|
|
949
|
+
<div class="io-line">Defined in <a href="" data-line="129"
|
|
950
|
+
class="link-to-prism">src/treeview/treeview.component.ts:129</a></div>
|
|
948
951
|
</td>
|
|
949
952
|
</tr>
|
|
950
953
|
|
|
@@ -999,6 +1002,82 @@ Passing value will disregard projected content</p>
|
|
|
999
1002
|
</tr>
|
|
1000
1003
|
</tbody>
|
|
1001
1004
|
</table>
|
|
1005
|
+
<table class="table table-sm table-bordered">
|
|
1006
|
+
<tbody>
|
|
1007
|
+
<tr>
|
|
1008
|
+
<td class="col-md-4">
|
|
1009
|
+
<a name="onNodeFocusChange"></a>
|
|
1010
|
+
<span class="name">
|
|
1011
|
+
<span ><b>onNodeFocusChange</b></span>
|
|
1012
|
+
<a href="#onNodeFocusChange"><span class="icon ion-ios-link"></span></a>
|
|
1013
|
+
</span>
|
|
1014
|
+
</td>
|
|
1015
|
+
</tr>
|
|
1016
|
+
<tr>
|
|
1017
|
+
<td class="col-md-4">
|
|
1018
|
+
<code>onNodeFocusChange(node: <a href="../interfaces/Node.html" target="_self">Node</a>)</code>
|
|
1019
|
+
</td>
|
|
1020
|
+
</tr>
|
|
1021
|
+
|
|
1022
|
+
|
|
1023
|
+
<tr>
|
|
1024
|
+
<td class="col-md-4">
|
|
1025
|
+
<div class="io-line">Defined in <a href="" data-line="168"
|
|
1026
|
+
class="link-to-prism">src/treeview/treeview.component.ts:168</a></div>
|
|
1027
|
+
</td>
|
|
1028
|
+
</tr>
|
|
1029
|
+
|
|
1030
|
+
|
|
1031
|
+
<tr>
|
|
1032
|
+
<td class="col-md-4">
|
|
1033
|
+
<div class="io-description"><p>Node focus change</p>
|
|
1034
|
+
</div>
|
|
1035
|
+
|
|
1036
|
+
<div class="io-description">
|
|
1037
|
+
<b>Parameters :</b>
|
|
1038
|
+
|
|
1039
|
+
<table class="params">
|
|
1040
|
+
<thead>
|
|
1041
|
+
<tr>
|
|
1042
|
+
<td>Name</td>
|
|
1043
|
+
<td>Type</td>
|
|
1044
|
+
<td>Optional</td>
|
|
1045
|
+
<td>Description</td>
|
|
1046
|
+
</tr>
|
|
1047
|
+
</thead>
|
|
1048
|
+
<tbody>
|
|
1049
|
+
<tr>
|
|
1050
|
+
<td>node</td>
|
|
1051
|
+
<td>
|
|
1052
|
+
<code><a href="../interfaces/Node.html" target="_self" >Node</a></code>
|
|
1053
|
+
</td>
|
|
1054
|
+
|
|
1055
|
+
<td>
|
|
1056
|
+
No
|
|
1057
|
+
</td>
|
|
1058
|
+
|
|
1059
|
+
|
|
1060
|
+
<td>
|
|
1061
|
+
<ul>
|
|
1062
|
+
<li>Node</li>
|
|
1063
|
+
</ul>
|
|
1064
|
+
|
|
1065
|
+
</td>
|
|
1066
|
+
</tr>
|
|
1067
|
+
</tbody>
|
|
1068
|
+
</table>
|
|
1069
|
+
</div>
|
|
1070
|
+
<div class="io-description">
|
|
1071
|
+
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
|
|
1072
|
+
|
|
1073
|
+
</div>
|
|
1074
|
+
<div class="io-description">
|
|
1075
|
+
|
|
1076
|
+
</div>
|
|
1077
|
+
</td>
|
|
1078
|
+
</tr>
|
|
1079
|
+
</tbody>
|
|
1080
|
+
</table>
|
|
1002
1081
|
</section>
|
|
1003
1082
|
<section data-compodoc="block-properties">
|
|
1004
1083
|
|
|
@@ -1453,11 +1532,9 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {
|
|
|
1453
1532
|
// Get all values from the map to emit
|
|
1454
1533
|
const nodes = [...nodesMap.values()];
|
|
1455
1534
|
|
|
1456
|
-
// Update focus to reset arrow key traversal
|
|
1457
|
-
// Select the current highlight node as the last node, since we preserve order in map
|
|
1458
|
-
this.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(nodes[nodes.length - 1].id)}`);
|
|
1459
1535
|
this.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);
|
|
1460
1536
|
});
|
|
1537
|
+
this.subscription.add(this.treeViewService.focusNodeObservable.subscribe(node => this.onNodeFocusChange(node)));
|
|
1461
1538
|
}
|
|
1462
1539
|
|
|
1463
1540
|
ngOnDestroy(): void {
|
|
@@ -1495,6 +1572,20 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {
|
|
|
1495
1572
|
}
|
|
1496
1573
|
}
|
|
1497
1574
|
|
|
1575
|
+
/**
|
|
1576
|
+
* Node focus change
|
|
1577
|
+
* @param node - Node
|
|
1578
|
+
*/
|
|
1579
|
+
onNodeFocusChange(node: Node) {
|
|
1580
|
+
if (!node) {
|
|
1581
|
+
// if for some reason the focused node is not defined we fallback on the root element of the treeview
|
|
1582
|
+
this.treeWalker.currentNode = this.treeWalker.root;
|
|
1583
|
+
return;
|
|
1584
|
+
}
|
|
1585
|
+
// Update current node based on focus change to have a better keyboard navigation experience
|
|
1586
|
+
this.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(node.id)}`);
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1498
1589
|
public isTemplate(value) {
|
|
1499
1590
|
return value instanceof TemplateRef;
|
|
1500
1591
|
}
|
|
@@ -1301,9 +1301,9 @@
|
|
|
1301
1301
|
</td>
|
|
1302
1302
|
<td>component</td>
|
|
1303
1303
|
<td>TextareaLabelComponent</td>
|
|
1304
|
-
<td align="right" data-sort="
|
|
1305
|
-
<span class="coverage-percent">
|
|
1306
|
-
<span class="coverage-count">(14/
|
|
1304
|
+
<td align="right" data-sort="66">
|
|
1305
|
+
<span class="coverage-percent">66 %</span>
|
|
1306
|
+
<span class="coverage-count">(14/21)</span>
|
|
1307
1307
|
</td>
|
|
1308
1308
|
</tr>
|
|
1309
1309
|
<tr class="medium">
|
|
@@ -2959,7 +2959,7 @@
|
|
|
2959
2959
|
<td>TreeNodeComponent</td>
|
|
2960
2960
|
<td align="right" data-sort="25">
|
|
2961
2961
|
<span class="coverage-percent">25 %</span>
|
|
2962
|
-
<span class="coverage-count">(9/
|
|
2962
|
+
<span class="coverage-count">(9/36)</span>
|
|
2963
2963
|
</td>
|
|
2964
2964
|
</tr>
|
|
2965
2965
|
<tr class="low">
|
|
@@ -2971,7 +2971,7 @@
|
|
|
2971
2971
|
<td>Node</td>
|
|
2972
2972
|
<td align="right" data-sort="0">
|
|
2973
2973
|
<span class="coverage-percent">0 %</span>
|
|
2974
|
-
<span class="coverage-count">(0/
|
|
2974
|
+
<span class="coverage-count">(0/14)</span>
|
|
2975
2975
|
</td>
|
|
2976
2976
|
</tr>
|
|
2977
2977
|
<tr class="medium">
|
|
@@ -2981,9 +2981,9 @@
|
|
|
2981
2981
|
</td>
|
|
2982
2982
|
<td>component</td>
|
|
2983
2983
|
<td>TreeViewComponent</td>
|
|
2984
|
-
<td align="right" data-sort="
|
|
2985
|
-
<span class="coverage-percent">
|
|
2986
|
-
<span class="coverage-count">(
|
|
2984
|
+
<td align="right" data-sort="43">
|
|
2985
|
+
<span class="coverage-percent">43 %</span>
|
|
2986
|
+
<span class="coverage-count">(10/23)</span>
|
|
2987
2987
|
</td>
|
|
2988
2988
|
</tr>
|
|
2989
2989
|
<tr class="good">
|
|
@@ -2993,9 +2993,9 @@
|
|
|
2993
2993
|
</td>
|
|
2994
2994
|
<td>injectable</td>
|
|
2995
2995
|
<td>TreeViewService</td>
|
|
2996
|
-
<td align="right" data-sort="
|
|
2997
|
-
<span class="coverage-percent">
|
|
2998
|
-
<span class="coverage-count">(
|
|
2996
|
+
<td align="right" data-sort="53">
|
|
2997
|
+
<span class="coverage-percent">53 %</span>
|
|
2998
|
+
<span class="coverage-count">(7/13)</span>
|
|
2999
2999
|
</td>
|
|
3000
3000
|
</tr>
|
|
3001
3001
|
<tr class="good">
|
|
@@ -137,6 +137,13 @@
|
|
|
137
137
|
<li>
|
|
138
138
|
<a href="#contentProjected" >contentProjected</a>
|
|
139
139
|
</li>
|
|
140
|
+
<li>
|
|
141
|
+
<a href="#focusNodeObservable" >focusNodeObservable</a>
|
|
142
|
+
</li>
|
|
143
|
+
<li>
|
|
144
|
+
<span class="modifier">Private</span>
|
|
145
|
+
<a href="#focusNodeSubject" >focusNodeSubject</a>
|
|
146
|
+
</li>
|
|
140
147
|
<li>
|
|
141
148
|
<a href="#isMultiSelect" >isMultiSelect</a>
|
|
142
149
|
</li>
|
|
@@ -169,6 +176,9 @@
|
|
|
169
176
|
<li>
|
|
170
177
|
<a href="#deselectNode" >deselectNode</a>
|
|
171
178
|
</li>
|
|
179
|
+
<li>
|
|
180
|
+
<a href="#focusNode" >focusNode</a>
|
|
181
|
+
</li>
|
|
172
182
|
<li>
|
|
173
183
|
<a href="#selectNode" >selectNode</a>
|
|
174
184
|
</li>
|
|
@@ -195,7 +205,7 @@
|
|
|
195
205
|
</tr>
|
|
196
206
|
<tr>
|
|
197
207
|
<td class="col-md-4">
|
|
198
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
208
|
+
<div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/treeview/treeview.service.ts:27</a></div>
|
|
199
209
|
</td>
|
|
200
210
|
</tr>
|
|
201
211
|
|
|
@@ -228,8 +238,8 @@
|
|
|
228
238
|
|
|
229
239
|
<tr>
|
|
230
240
|
<td class="col-md-4">
|
|
231
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
232
|
-
class="link-to-prism">src/treeview/treeview.service.ts:
|
|
241
|
+
<div class="io-line">Defined in <a href="" data-line="75"
|
|
242
|
+
class="link-to-prism">src/treeview/treeview.service.ts:75</a></div>
|
|
233
243
|
</td>
|
|
234
244
|
</tr>
|
|
235
245
|
|
|
@@ -267,8 +277,8 @@
|
|
|
267
277
|
|
|
268
278
|
<tr>
|
|
269
279
|
<td class="col-md-4">
|
|
270
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
271
|
-
class="link-to-prism">src/treeview/treeview.service.ts:
|
|
280
|
+
<div class="io-line">Defined in <a href="" data-line="63"
|
|
281
|
+
class="link-to-prism">src/treeview/treeview.service.ts:63</a></div>
|
|
272
282
|
</td>
|
|
273
283
|
</tr>
|
|
274
284
|
|
|
@@ -321,6 +331,80 @@
|
|
|
321
331
|
</tr>
|
|
322
332
|
</tbody>
|
|
323
333
|
</table>
|
|
334
|
+
<table class="table table-sm table-bordered">
|
|
335
|
+
<tbody>
|
|
336
|
+
<tr>
|
|
337
|
+
<td class="col-md-4">
|
|
338
|
+
<a name="focusNode"></a>
|
|
339
|
+
<span class="name">
|
|
340
|
+
<span ><b>focusNode</b></span>
|
|
341
|
+
<a href="#focusNode"><span class="icon ion-ios-link"></span></a>
|
|
342
|
+
</span>
|
|
343
|
+
</td>
|
|
344
|
+
</tr>
|
|
345
|
+
<tr>
|
|
346
|
+
<td class="col-md-4">
|
|
347
|
+
<code>focusNode(node: <a href="../interfaces/Node.html" target="_self">Node</a>)</code>
|
|
348
|
+
</td>
|
|
349
|
+
</tr>
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
<tr>
|
|
353
|
+
<td class="col-md-4">
|
|
354
|
+
<div class="io-line">Defined in <a href="" data-line="38"
|
|
355
|
+
class="link-to-prism">src/treeview/treeview.service.ts:38</a></div>
|
|
356
|
+
</td>
|
|
357
|
+
</tr>
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
<tr>
|
|
361
|
+
<td class="col-md-4">
|
|
362
|
+
<div class="io-description"><p>Emits the focused node</p>
|
|
363
|
+
</div>
|
|
364
|
+
|
|
365
|
+
<div class="io-description">
|
|
366
|
+
<b>Parameters :</b>
|
|
367
|
+
|
|
368
|
+
<table class="params">
|
|
369
|
+
<thead>
|
|
370
|
+
<tr>
|
|
371
|
+
<td>Name</td>
|
|
372
|
+
<td>Type</td>
|
|
373
|
+
<td>Optional</td>
|
|
374
|
+
<td>Description</td>
|
|
375
|
+
</tr>
|
|
376
|
+
</thead>
|
|
377
|
+
<tbody>
|
|
378
|
+
<tr>
|
|
379
|
+
<td>node</td>
|
|
380
|
+
<td>
|
|
381
|
+
<code><a href="../interfaces/Node.html" target="_self" >Node</a></code>
|
|
382
|
+
</td>
|
|
383
|
+
|
|
384
|
+
<td>
|
|
385
|
+
No
|
|
386
|
+
</td>
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
<td>
|
|
390
|
+
<p>: Node</p>
|
|
391
|
+
|
|
392
|
+
</td>
|
|
393
|
+
</tr>
|
|
394
|
+
</tbody>
|
|
395
|
+
</table>
|
|
396
|
+
</div>
|
|
397
|
+
<div class="io-description">
|
|
398
|
+
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
|
|
399
|
+
|
|
400
|
+
</div>
|
|
401
|
+
<div class="io-description">
|
|
402
|
+
|
|
403
|
+
</div>
|
|
404
|
+
</td>
|
|
405
|
+
</tr>
|
|
406
|
+
</tbody>
|
|
407
|
+
</table>
|
|
324
408
|
<table class="table table-sm table-bordered">
|
|
325
409
|
<tbody>
|
|
326
410
|
<tr>
|
|
@@ -341,8 +425,8 @@
|
|
|
341
425
|
|
|
342
426
|
<tr>
|
|
343
427
|
<td class="col-md-4">
|
|
344
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
345
|
-
class="link-to-prism">src/treeview/treeview.service.ts:
|
|
428
|
+
<div class="io-line">Defined in <a href="" data-line="46"
|
|
429
|
+
class="link-to-prism">src/treeview/treeview.service.ts:46</a></div>
|
|
346
430
|
</td>
|
|
347
431
|
</tr>
|
|
348
432
|
|
|
@@ -419,7 +503,7 @@
|
|
|
419
503
|
</tr>
|
|
420
504
|
<tr>
|
|
421
505
|
<td class="col-md-4">
|
|
422
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
506
|
+
<div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/treeview/treeview.service.ts:15</a></div>
|
|
423
507
|
</td>
|
|
424
508
|
</tr>
|
|
425
509
|
|
|
@@ -434,6 +518,58 @@ or generate the tree</p>
|
|
|
434
518
|
|
|
435
519
|
</tbody>
|
|
436
520
|
</table>
|
|
521
|
+
<table class="table table-sm table-bordered">
|
|
522
|
+
<tbody>
|
|
523
|
+
<tr>
|
|
524
|
+
<td class="col-md-4">
|
|
525
|
+
<a name="focusNodeObservable"></a>
|
|
526
|
+
<span class="name">
|
|
527
|
+
<span ><b>focusNodeObservable</b></span>
|
|
528
|
+
<a href="#focusNodeObservable"><span class="icon ion-ios-link"></span></a>
|
|
529
|
+
</span>
|
|
530
|
+
</td>
|
|
531
|
+
</tr>
|
|
532
|
+
<tr>
|
|
533
|
+
<td class="col-md-4">
|
|
534
|
+
<i>Type : </i> <code><a href="../interfaces/Node.html" target="_self" >Observable<Node></a></code>
|
|
535
|
+
|
|
536
|
+
</td>
|
|
537
|
+
</tr>
|
|
538
|
+
<tr>
|
|
539
|
+
<td class="col-md-4">
|
|
540
|
+
<div class="io-line">Defined in <a href="" data-line="8" class="link-to-prism">src/treeview/treeview.service.ts:8</a></div>
|
|
541
|
+
</td>
|
|
542
|
+
</tr>
|
|
543
|
+
|
|
544
|
+
|
|
545
|
+
</tbody>
|
|
546
|
+
</table>
|
|
547
|
+
<table class="table table-sm table-bordered">
|
|
548
|
+
<tbody>
|
|
549
|
+
<tr>
|
|
550
|
+
<td class="col-md-4">
|
|
551
|
+
<a name="focusNodeSubject"></a>
|
|
552
|
+
<span class="name">
|
|
553
|
+
<span class="modifier">Private</span>
|
|
554
|
+
<span ><b>focusNodeSubject</b></span>
|
|
555
|
+
<a href="#focusNodeSubject"><span class="icon ion-ios-link"></span></a>
|
|
556
|
+
</span>
|
|
557
|
+
</td>
|
|
558
|
+
</tr>
|
|
559
|
+
<tr>
|
|
560
|
+
<td class="col-md-4">
|
|
561
|
+
<i>Default value : </i><code>new ReplaySubject<Node>(1)</code>
|
|
562
|
+
</td>
|
|
563
|
+
</tr>
|
|
564
|
+
<tr>
|
|
565
|
+
<td class="col-md-4">
|
|
566
|
+
<div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/treeview/treeview.service.ts:22</a></div>
|
|
567
|
+
</td>
|
|
568
|
+
</tr>
|
|
569
|
+
|
|
570
|
+
|
|
571
|
+
</tbody>
|
|
572
|
+
</table>
|
|
437
573
|
<table class="table table-sm table-bordered">
|
|
438
574
|
<tbody>
|
|
439
575
|
<tr>
|
|
@@ -452,7 +588,7 @@ or generate the tree</p>
|
|
|
452
588
|
</tr>
|
|
453
589
|
<tr>
|
|
454
590
|
<td class="col-md-4">
|
|
455
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
591
|
+
<div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/treeview/treeview.service.ts:19</a></div>
|
|
456
592
|
</td>
|
|
457
593
|
</tr>
|
|
458
594
|
|
|
@@ -510,7 +646,7 @@ or generate the tree</p>
|
|
|
510
646
|
</tr>
|
|
511
647
|
<tr>
|
|
512
648
|
<td class="col-md-4">
|
|
513
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
649
|
+
<div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/treeview/treeview.service.ts:21</a></div>
|
|
514
650
|
</td>
|
|
515
651
|
</tr>
|
|
516
652
|
|
|
@@ -536,7 +672,7 @@ or generate the tree</p>
|
|
|
536
672
|
</tr>
|
|
537
673
|
<tr>
|
|
538
674
|
<td class="col-md-4">
|
|
539
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
675
|
+
<div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/treeview/treeview.service.ts:27</a></div>
|
|
540
676
|
</td>
|
|
541
677
|
</tr>
|
|
542
678
|
|
|
@@ -562,6 +698,7 @@ import { Node } from "./tree-node.types";
|
|
|
562
698
|
@Injectable()
|
|
563
699
|
export class TreeViewService {
|
|
564
700
|
selectionObservable: Observable<any | any[]>;
|
|
701
|
+
focusNodeObservable: Observable<Node>;
|
|
565
702
|
/**
|
|
566
703
|
* Variable used across all nodes and wrapper to determine if we should allow content projection
|
|
567
704
|
* or generate the tree
|
|
@@ -575,6 +712,7 @@ export class TreeViewService {
|
|
|
575
712
|
isMultiSelect = false;
|
|
576
713
|
|
|
577
714
|
private selectionSubject = new ReplaySubject<Map<string, Node>>(1);
|
|
715
|
+
private focusNodeSubject = new ReplaySubject<Node>(1);
|
|
578
716
|
|
|
579
717
|
/**
|
|
580
718
|
* Hold's list of selected nodes and preserves order
|
|
@@ -583,6 +721,15 @@ export class TreeViewService {
|
|
|
583
721
|
|
|
584
722
|
constructor() {
|
|
585
723
|
this.selectionObservable = this.selectionSubject.asObservable();
|
|
724
|
+
this.focusNodeObservable = this.focusNodeSubject.asObservable();
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
/**
|
|
728
|
+
* Emits the focused node
|
|
729
|
+
* @param node: Node
|
|
730
|
+
*/
|
|
731
|
+
focusNode(node: Node) {
|
|
732
|
+
this.focusNodeSubject.next(node);
|
|
586
733
|
}
|
|
587
734
|
|
|
588
735
|
/**
|
|
@@ -209,6 +209,13 @@
|
|
|
209
209
|
labelContext
|
|
210
210
|
</a>
|
|
211
211
|
</li>
|
|
212
|
+
<li>
|
|
213
|
+
<span class="modifier">Optional</span>
|
|
214
|
+
<a href="#selectable"
|
|
215
|
+
>
|
|
216
|
+
selectable
|
|
217
|
+
</a>
|
|
218
|
+
</li>
|
|
212
219
|
<li>
|
|
213
220
|
<span class="modifier">Optional</span>
|
|
214
221
|
<a href="#selected"
|
|
@@ -243,7 +250,7 @@
|
|
|
243
250
|
</tr>
|
|
244
251
|
<tr>
|
|
245
252
|
<td class="col-md-4">
|
|
246
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
253
|
+
<div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/treeview/tree-node.types.ts:17</a></div>
|
|
247
254
|
</td>
|
|
248
255
|
</tr>
|
|
249
256
|
</tbody>
|
|
@@ -625,6 +632,44 @@
|
|
|
625
632
|
|
|
626
633
|
|
|
627
634
|
|
|
635
|
+
</tbody>
|
|
636
|
+
</table>
|
|
637
|
+
<table class="table table-sm table-bordered">
|
|
638
|
+
<tbody>
|
|
639
|
+
<tr>
|
|
640
|
+
<td class="col-md-4">
|
|
641
|
+
<a name="selectable"></a>
|
|
642
|
+
<span class="name "><b>selectable</b>
|
|
643
|
+
<a href="#selectable">
|
|
644
|
+
<span class="icon ion-ios-link"></span>
|
|
645
|
+
</a>
|
|
646
|
+
</span>
|
|
647
|
+
</td>
|
|
648
|
+
</tr>
|
|
649
|
+
<tr>
|
|
650
|
+
<td class="col-md-4">
|
|
651
|
+
<code>selectable: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
652
|
+
</code>
|
|
653
|
+
</td>
|
|
654
|
+
</tr>
|
|
655
|
+
|
|
656
|
+
|
|
657
|
+
<tr>
|
|
658
|
+
<td class="col-md-4">
|
|
659
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
660
|
+
|
|
661
|
+
</td>
|
|
662
|
+
</tr>
|
|
663
|
+
|
|
664
|
+
<tr>
|
|
665
|
+
<td class="col-md-4">
|
|
666
|
+
<i>Optional</i>
|
|
667
|
+
</td>
|
|
668
|
+
</tr>
|
|
669
|
+
|
|
670
|
+
|
|
671
|
+
|
|
672
|
+
|
|
628
673
|
</tbody>
|
|
629
674
|
</table>
|
|
630
675
|
<table class="table table-sm table-bordered">
|
|
@@ -717,6 +762,8 @@ export interface Node {
|
|
|
717
762
|
id?: string;
|
|
718
763
|
active?: boolean;
|
|
719
764
|
disabled?: boolean;
|
|
765
|
+
// selectable is only valid for nodes with children. If true, the node won't become selected and if clicked it would only expand/compress itself
|
|
766
|
+
selectable?: boolean;
|
|
720
767
|
expanded?: boolean;
|
|
721
768
|
selected?: boolean;
|
|
722
769
|
icon?: string | TemplateRef<any>;
|