carbon-components-angular 5.31.0 → 5.32.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/TreeNodeComponent.html +67 -36
- package/docs/documentation/components/TreeViewComponent.html +83 -1
- package/docs/documentation/coverage.html +8 -8
- package/docs/documentation/interfaces/Node.html +47 -1
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +26 -26
- package/docs/documentation/modules/TimePickerModule.html +26 -26
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TimePickerSelectModule.html +4 -4
- package/docs/documentation/modules/ToggleModule/dependencies.svg +44 -40
- package/docs/documentation/modules/ToggleModule.html +44 -40
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
- package/docs/documentation/modules/ToggletipModule.html +37 -37
- package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
- package/docs/documentation/modules/TooltipModule.html +29 -29
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TreeviewModule.html +28 -28
- package/docs/documentation.json +62 -44
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.84a378b3.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.d1f42191.iframe.bundle.js → runtime~main.6c556d33.iframe.bundle.js} +1 -1
- package/docs/storybook/{treeview-treeview-stories.eec445b3.iframe.bundle.js → treeview-treeview-stories.85954a19.iframe.bundle.js} +1 -1
- package/esm2020/treeview/tree-node.component.mjs +8 -4
- package/esm2020/treeview/tree-node.types.mjs +1 -1
- package/esm2020/treeview/treeview.component.mjs +11 -3
- package/fesm2015/carbon-components-angular-treeview.mjs +20 -8
- package/fesm2015/carbon-components-angular-treeview.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-treeview.mjs +17 -5
- package/fesm2020/carbon-components-angular-treeview.mjs.map +1 -1
- 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 +1 -0
- package/docs/storybook/main.0d9139c6.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -1077,12 +1077,12 @@
|
|
|
1077
1077
|
},
|
|
1078
1078
|
{
|
|
1079
1079
|
"name": "Node",
|
|
1080
|
-
"id": "interface-Node-
|
|
1080
|
+
"id": "interface-Node-edec89fb3656ba70a0f7f007520c3f4a9501f4fd644b7c925dc041a592cabb45e60b40806aa86c48628a87daac9b0bafca5decb6647aca2cbb534f57f10885b9",
|
|
1081
1081
|
"file": "src/treeview/tree-node.types.ts",
|
|
1082
1082
|
"deprecated": false,
|
|
1083
1083
|
"deprecationMessage": "",
|
|
1084
1084
|
"type": "interface",
|
|
1085
|
-
"sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n",
|
|
1085
|
+
"sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n",
|
|
1086
1086
|
"properties": [
|
|
1087
1087
|
{
|
|
1088
1088
|
"name": "active",
|
|
@@ -1100,7 +1100,7 @@
|
|
|
1100
1100
|
"type": "Node[]",
|
|
1101
1101
|
"optional": true,
|
|
1102
1102
|
"description": "",
|
|
1103
|
-
"line":
|
|
1103
|
+
"line": 15
|
|
1104
1104
|
},
|
|
1105
1105
|
{
|
|
1106
1106
|
"name": "disabled",
|
|
@@ -1120,6 +1120,15 @@
|
|
|
1120
1120
|
"description": "",
|
|
1121
1121
|
"line": 10
|
|
1122
1122
|
},
|
|
1123
|
+
{
|
|
1124
|
+
"name": "gap",
|
|
1125
|
+
"deprecated": false,
|
|
1126
|
+
"deprecationMessage": "",
|
|
1127
|
+
"type": "number",
|
|
1128
|
+
"optional": true,
|
|
1129
|
+
"description": "",
|
|
1130
|
+
"line": 14
|
|
1131
|
+
},
|
|
1123
1132
|
{
|
|
1124
1133
|
"name": "icon",
|
|
1125
1134
|
"deprecated": false,
|
|
@@ -1186,7 +1195,7 @@
|
|
|
1186
1195
|
],
|
|
1187
1196
|
"indexSignatures": [
|
|
1188
1197
|
{
|
|
1189
|
-
"id": "index-declaration-
|
|
1198
|
+
"id": "index-declaration-edec89fb3656ba70a0f7f007520c3f4a9501f4fd644b7c925dc041a592cabb45e60b40806aa86c48628a87daac9b0bafca5decb6647aca2cbb534f57f10885b9",
|
|
1190
1199
|
"args": [
|
|
1191
1200
|
{
|
|
1192
1201
|
"name": "key",
|
|
@@ -1196,7 +1205,7 @@
|
|
|
1196
1205
|
}
|
|
1197
1206
|
],
|
|
1198
1207
|
"returnType": "any",
|
|
1199
|
-
"line":
|
|
1208
|
+
"line": 15,
|
|
1200
1209
|
"deprecated": false,
|
|
1201
1210
|
"deprecationMessage": ""
|
|
1202
1211
|
}
|
|
@@ -66470,7 +66479,7 @@
|
|
|
66470
66479
|
},
|
|
66471
66480
|
{
|
|
66472
66481
|
"name": "TreeNodeComponent",
|
|
66473
|
-
"id": "component-TreeNodeComponent-
|
|
66482
|
+
"id": "component-TreeNodeComponent-c92ddc59f0218683e4fcc77e08c4981a5bc88974f90c94b24cb01d09b757cd6c980a04425f538445af59ba71061124b7ae89a54f150ba0dc68e78310c61879ce",
|
|
66474
66483
|
"file": "src/treeview/tree-node.component.ts",
|
|
66475
66484
|
"encapsulation": [],
|
|
66476
66485
|
"entryComponents": [],
|
|
@@ -66499,7 +66508,7 @@
|
|
|
66499
66508
|
"defaultValue": "[]",
|
|
66500
66509
|
"deprecated": false,
|
|
66501
66510
|
"deprecationMessage": "",
|
|
66502
|
-
"line":
|
|
66511
|
+
"line": 133,
|
|
66503
66512
|
"type": "Node[]",
|
|
66504
66513
|
"decorators": []
|
|
66505
66514
|
},
|
|
@@ -66510,7 +66519,7 @@
|
|
|
66510
66519
|
"deprecationMessage": "",
|
|
66511
66520
|
"rawdescription": "\n\nDetermines the depth of the node\nCalculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n",
|
|
66512
66521
|
"description": "<p>Determines the depth of the node\nCalculated by default when passing <code>Node</code> array to <code>TreeViewComponent</code>, manual entry required otherwise</p>\n",
|
|
66513
|
-
"line":
|
|
66522
|
+
"line": 139,
|
|
66514
66523
|
"type": "number",
|
|
66515
66524
|
"decorators": []
|
|
66516
66525
|
},
|
|
@@ -66532,6 +66541,15 @@
|
|
|
66532
66541
|
"type": "boolean",
|
|
66533
66542
|
"decorators": []
|
|
66534
66543
|
},
|
|
66544
|
+
{
|
|
66545
|
+
"name": "gap",
|
|
66546
|
+
"defaultValue": "0",
|
|
66547
|
+
"deprecated": false,
|
|
66548
|
+
"deprecationMessage": "",
|
|
66549
|
+
"line": 132,
|
|
66550
|
+
"type": "number",
|
|
66551
|
+
"decorators": []
|
|
66552
|
+
},
|
|
66535
66553
|
{
|
|
66536
66554
|
"name": "icon",
|
|
66537
66555
|
"deprecated": false,
|
|
@@ -66579,7 +66597,7 @@
|
|
|
66579
66597
|
"deprecationMessage": "",
|
|
66580
66598
|
"rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
|
|
66581
66599
|
"description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
|
|
66582
|
-
"line":
|
|
66600
|
+
"line": 145,
|
|
66583
66601
|
"type": "Node",
|
|
66584
66602
|
"decorators": []
|
|
66585
66603
|
},
|
|
@@ -66607,7 +66625,7 @@
|
|
|
66607
66625
|
"defaultValue": "new EventEmitter()",
|
|
66608
66626
|
"deprecated": false,
|
|
66609
66627
|
"deprecationMessage": "",
|
|
66610
|
-
"line":
|
|
66628
|
+
"line": 168,
|
|
66611
66629
|
"type": "EventEmitter"
|
|
66612
66630
|
},
|
|
66613
66631
|
{
|
|
@@ -66615,7 +66633,7 @@
|
|
|
66615
66633
|
"defaultValue": "new EventEmitter()",
|
|
66616
66634
|
"deprecated": false,
|
|
66617
66635
|
"deprecationMessage": "",
|
|
66618
|
-
"line":
|
|
66636
|
+
"line": 167,
|
|
66619
66637
|
"type": "EventEmitter"
|
|
66620
66638
|
},
|
|
66621
66639
|
{
|
|
@@ -66623,7 +66641,7 @@
|
|
|
66623
66641
|
"defaultValue": "new EventEmitter()",
|
|
66624
66642
|
"deprecated": false,
|
|
66625
66643
|
"deprecationMessage": "",
|
|
66626
|
-
"line":
|
|
66644
|
+
"line": 169,
|
|
66627
66645
|
"type": "EventEmitter"
|
|
66628
66646
|
},
|
|
66629
66647
|
{
|
|
@@ -66631,7 +66649,7 @@
|
|
|
66631
66649
|
"defaultValue": "new EventEmitter()",
|
|
66632
66650
|
"deprecated": false,
|
|
66633
66651
|
"deprecationMessage": "",
|
|
66634
|
-
"line":
|
|
66652
|
+
"line": 170,
|
|
66635
66653
|
"type": "EventEmitter"
|
|
66636
66654
|
}
|
|
66637
66655
|
],
|
|
@@ -66643,7 +66661,7 @@
|
|
|
66643
66661
|
"type": "",
|
|
66644
66662
|
"optional": false,
|
|
66645
66663
|
"description": "",
|
|
66646
|
-
"line":
|
|
66664
|
+
"line": 172
|
|
66647
66665
|
},
|
|
66648
66666
|
{
|
|
66649
66667
|
"name": "treeNodeCount",
|
|
@@ -66666,7 +66684,7 @@
|
|
|
66666
66684
|
"optional": false,
|
|
66667
66685
|
"returnType": "number",
|
|
66668
66686
|
"typeParameters": [],
|
|
66669
|
-
"line":
|
|
66687
|
+
"line": 221,
|
|
66670
66688
|
"deprecated": false,
|
|
66671
66689
|
"deprecationMessage": "",
|
|
66672
66690
|
"rawdescription": "\n\nCalculate the node offset\n",
|
|
@@ -66674,8 +66692,8 @@
|
|
|
66674
66692
|
"jsdoctags": [
|
|
66675
66693
|
{
|
|
66676
66694
|
"tagName": {
|
|
66677
|
-
"pos":
|
|
66678
|
-
"end":
|
|
66695
|
+
"pos": 6114,
|
|
66696
|
+
"end": 6121,
|
|
66679
66697
|
"flags": 16842752,
|
|
66680
66698
|
"modifierFlagsCache": 0,
|
|
66681
66699
|
"transformFlags": 0,
|
|
@@ -66699,7 +66717,7 @@
|
|
|
66699
66717
|
"optional": false,
|
|
66700
66718
|
"returnType": "void",
|
|
66701
66719
|
"typeParameters": [],
|
|
66702
|
-
"line":
|
|
66720
|
+
"line": 244,
|
|
66703
66721
|
"deprecated": false,
|
|
66704
66722
|
"deprecationMessage": "",
|
|
66705
66723
|
"jsdoctags": [
|
|
@@ -66727,7 +66745,7 @@
|
|
|
66727
66745
|
"optional": false,
|
|
66728
66746
|
"returnType": "void",
|
|
66729
66747
|
"typeParameters": [],
|
|
66730
|
-
"line":
|
|
66748
|
+
"line": 240,
|
|
66731
66749
|
"deprecated": false,
|
|
66732
66750
|
"deprecationMessage": "",
|
|
66733
66751
|
"jsdoctags": [
|
|
@@ -66748,7 +66766,7 @@
|
|
|
66748
66766
|
"optional": false,
|
|
66749
66767
|
"returnType": "any",
|
|
66750
66768
|
"typeParameters": [],
|
|
66751
|
-
"line":
|
|
66769
|
+
"line": 291,
|
|
66752
66770
|
"deprecated": false,
|
|
66753
66771
|
"deprecationMessage": "",
|
|
66754
66772
|
"modifierKind": [
|
|
@@ -66768,7 +66786,7 @@
|
|
|
66768
66786
|
"optional": false,
|
|
66769
66787
|
"returnType": "boolean",
|
|
66770
66788
|
"typeParameters": [],
|
|
66771
|
-
"line":
|
|
66789
|
+
"line": 287,
|
|
66772
66790
|
"deprecated": false,
|
|
66773
66791
|
"deprecationMessage": "",
|
|
66774
66792
|
"modifierKind": [
|
|
@@ -66799,7 +66817,7 @@
|
|
|
66799
66817
|
"optional": false,
|
|
66800
66818
|
"returnType": "void",
|
|
66801
66819
|
"typeParameters": [],
|
|
66802
|
-
"line":
|
|
66820
|
+
"line": 264,
|
|
66803
66821
|
"deprecated": false,
|
|
66804
66822
|
"deprecationMessage": "",
|
|
66805
66823
|
"rawdescription": "\n\nManages the keyboard accessibility for children expansion & selection\n",
|
|
@@ -66829,7 +66847,7 @@
|
|
|
66829
66847
|
"optional": false,
|
|
66830
66848
|
"returnType": "void",
|
|
66831
66849
|
"typeParameters": [],
|
|
66832
|
-
"line":
|
|
66850
|
+
"line": 207,
|
|
66833
66851
|
"deprecated": false,
|
|
66834
66852
|
"deprecationMessage": "",
|
|
66835
66853
|
"rawdescription": "\n\nSelects the node and emits the event from the tree view component\n",
|
|
@@ -66837,8 +66855,8 @@
|
|
|
66837
66855
|
"jsdoctags": [
|
|
66838
66856
|
{
|
|
66839
66857
|
"name": {
|
|
66840
|
-
"pos":
|
|
66841
|
-
"end":
|
|
66858
|
+
"pos": 5761,
|
|
66859
|
+
"end": 5766,
|
|
66842
66860
|
"flags": 16842752,
|
|
66843
66861
|
"modifierFlagsCache": 0,
|
|
66844
66862
|
"transformFlags": 0,
|
|
@@ -66849,8 +66867,8 @@
|
|
|
66849
66867
|
"deprecated": false,
|
|
66850
66868
|
"deprecationMessage": "",
|
|
66851
66869
|
"tagName": {
|
|
66852
|
-
"pos":
|
|
66853
|
-
"end":
|
|
66870
|
+
"pos": 5755,
|
|
66871
|
+
"end": 5760,
|
|
66854
66872
|
"flags": 16842752,
|
|
66855
66873
|
"modifierFlagsCache": 0,
|
|
66856
66874
|
"transformFlags": 0,
|
|
@@ -66874,7 +66892,7 @@
|
|
|
66874
66892
|
"optional": false,
|
|
66875
66893
|
"returnType": "void",
|
|
66876
66894
|
"typeParameters": [],
|
|
66877
|
-
"line":
|
|
66895
|
+
"line": 252,
|
|
66878
66896
|
"deprecated": false,
|
|
66879
66897
|
"deprecationMessage": "",
|
|
66880
66898
|
"rawdescription": "\n\nExpand children if not disabled\n",
|
|
@@ -66882,8 +66900,8 @@
|
|
|
66882
66900
|
"jsdoctags": [
|
|
66883
66901
|
{
|
|
66884
66902
|
"name": {
|
|
66885
|
-
"pos":
|
|
66886
|
-
"end":
|
|
66903
|
+
"pos": 6800,
|
|
66904
|
+
"end": 6805,
|
|
66887
66905
|
"flags": 16842752,
|
|
66888
66906
|
"modifierFlagsCache": 0,
|
|
66889
66907
|
"transformFlags": 0,
|
|
@@ -66894,8 +66912,8 @@
|
|
|
66894
66912
|
"deprecated": false,
|
|
66895
66913
|
"deprecationMessage": "",
|
|
66896
66914
|
"tagName": {
|
|
66897
|
-
"pos":
|
|
66898
|
-
"end":
|
|
66915
|
+
"pos": 6794,
|
|
66916
|
+
"end": 6799,
|
|
66899
66917
|
"flags": 16842752,
|
|
66900
66918
|
"modifierFlagsCache": 0,
|
|
66901
66919
|
"transformFlags": 0,
|
|
@@ -66916,7 +66934,7 @@
|
|
|
66916
66934
|
"description": "",
|
|
66917
66935
|
"rawdescription": "\n",
|
|
66918
66936
|
"type": "component",
|
|
66919
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter();\n\t@Output() nodeBlur = new EventEmitter();\n\t@Output() nodeSelect = new EventEmitter();\n\t@Output() nodetoggle = new EventEmitter();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = value.has(this.id);\n\t\t\tthis.active = this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.selected = true;\n\t\t\tthis.active = true;\n\t\t\tevent.target.parentElement.focus();\n\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\tthis.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tthis.nodeFocus.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
|
|
66937
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() gap = 0;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.gap = node.gap ?? this.gap;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter();\n\t@Output() nodeBlur = new EventEmitter();\n\t@Output() nodeSelect = new EventEmitter();\n\t@Output() nodetoggle = new EventEmitter();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = value.has(this.id);\n\t\t\tthis.active = this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.selected = true;\n\t\t\tthis.active = true;\n\t\t\tevent.target.parentElement.focus();\n\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\tthis.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + this.gap + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tthis.nodeFocus.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
|
|
66920
66938
|
"assetsDirs": [],
|
|
66921
66939
|
"styleUrlsData": "",
|
|
66922
66940
|
"stylesData": "",
|
|
@@ -66933,7 +66951,7 @@
|
|
|
66933
66951
|
"deprecationMessage": ""
|
|
66934
66952
|
}
|
|
66935
66953
|
],
|
|
66936
|
-
"line":
|
|
66954
|
+
"line": 174,
|
|
66937
66955
|
"jsdoctags": [
|
|
66938
66956
|
{
|
|
66939
66957
|
"name": "treeViewService",
|
|
@@ -66969,7 +66987,7 @@
|
|
|
66969
66987
|
}
|
|
66970
66988
|
],
|
|
66971
66989
|
"returnType": "void",
|
|
66972
|
-
"line":
|
|
66990
|
+
"line": 145,
|
|
66973
66991
|
"rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
|
|
66974
66992
|
"description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
|
|
66975
66993
|
"jsdoctags": [
|
|
@@ -66988,14 +67006,14 @@
|
|
|
66988
67006
|
"name": "node",
|
|
66989
67007
|
"type": "",
|
|
66990
67008
|
"returnType": "",
|
|
66991
|
-
"line":
|
|
67009
|
+
"line": 163
|
|
66992
67010
|
}
|
|
66993
67011
|
}
|
|
66994
67012
|
}
|
|
66995
67013
|
},
|
|
66996
67014
|
{
|
|
66997
67015
|
"name": "TreeViewComponent",
|
|
66998
|
-
"id": "component-TreeViewComponent-
|
|
67016
|
+
"id": "component-TreeViewComponent-9b6130f78321359e71f56d2044bb1ed7d588faff0561c87756d1f591288e94fb45666b6e97d4edf883c7f4984fba82bcb92d55a211c507f20e64b097f855b0cb",
|
|
66999
67017
|
"file": "src/treeview/treeview.component.ts",
|
|
67000
67018
|
"encapsulation": [],
|
|
67001
67019
|
"entryComponents": [],
|
|
@@ -67197,8 +67215,8 @@
|
|
|
67197
67215
|
"jsdoctags": [
|
|
67198
67216
|
{
|
|
67199
67217
|
"name": {
|
|
67200
|
-
"pos":
|
|
67201
|
-
"end":
|
|
67218
|
+
"pos": 3986,
|
|
67219
|
+
"end": 3991,
|
|
67202
67220
|
"flags": 16842752,
|
|
67203
67221
|
"modifierFlagsCache": 0,
|
|
67204
67222
|
"transformFlags": 0,
|
|
@@ -67209,8 +67227,8 @@
|
|
|
67209
67227
|
"deprecated": false,
|
|
67210
67228
|
"deprecationMessage": "",
|
|
67211
67229
|
"tagName": {
|
|
67212
|
-
"pos":
|
|
67213
|
-
"end":
|
|
67230
|
+
"pos": 3980,
|
|
67231
|
+
"end": 3985,
|
|
67214
67232
|
"flags": 16842752,
|
|
67215
67233
|
"modifierFlagsCache": 0,
|
|
67216
67234
|
"transformFlags": 0,
|
|
@@ -67231,7 +67249,7 @@
|
|
|
67231
67249
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TreeviewModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-tree-view--basic\">See demo</a></p>\n",
|
|
67232
67250
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TreeviewModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tree-view--basic)\n",
|
|
67233
67251
|
"type": "component",
|
|
67234
|
-
"sourceCode": "import { DOCUMENT } from \"@angular/common\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter,\n\tAfterViewInit,\n\tInject,\n\tViewChild,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\nimport { TreeViewService } from \"./treeview.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TreeviewModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tree-view--basic)\n */\n@Component({\n\tselector: \"cds-tree-view\",\n\ttemplate: `\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--tree\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree--sm': size === 'sm',\n\t\t\t\t'cds--tree--xs': size === 'xs'\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"label ? label : null\"\n\t\t\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t\t\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\t\t\trole=\"tree\"\n\t\t\t(keydown)=\"navigateTree($event)\"\n\t\t\t#treeWrapper>\n\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-container>\n\t\t\t<ng-template #notProjected>\n\t\t\t\t<cds-tree-node\n\t\t\t\t\t*ngFor=\"let node of tree\"\n\t\t\t\t\t[node]=\"node\">\n\t\t\t\t</cds-tree-node>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n\tproviders: [TreeViewService]\n})\nexport class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {\n\t/**\n\t * Pass `Node[]` array to have tree view render the nodes\n\t * Passing value will disregard projected content\n\t */\n\t@Input() set tree(treeNodes: Node[]) {\n\t\tthis._tree = treeNodes.map((node) =>
|
|
67252
|
+
"sourceCode": "import { DOCUMENT } from \"@angular/common\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter,\n\tAfterViewInit,\n\tInject,\n\tViewChild,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\nimport { TreeViewService } from \"./treeview.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TreeviewModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tree-view--basic)\n */\n@Component({\n\tselector: \"cds-tree-view\",\n\ttemplate: `\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--tree\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree--sm': size === 'sm',\n\t\t\t\t'cds--tree--xs': size === 'xs'\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"label ? label : null\"\n\t\t\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t\t\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\t\t\trole=\"tree\"\n\t\t\t(keydown)=\"navigateTree($event)\"\n\t\t\t#treeWrapper>\n\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-container>\n\t\t\t<ng-template #notProjected>\n\t\t\t\t<cds-tree-node\n\t\t\t\t\t*ngFor=\"let node of tree\"\n\t\t\t\t\t[node]=\"node\">\n\t\t\t\t</cds-tree-node>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n\tproviders: [TreeViewService]\n})\nexport class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {\n\t/**\n\t * Pass `Node[]` array to have tree view render the nodes\n\t * Passing value will disregard projected content\n\t */\n\t@Input() set tree(treeNodes: Node[]) {\n\t\tthis._tree = treeNodes.map((node) => this.copyNode(node));\n\t\tthis.treeViewService.contentProjected = false;\n\t}\n\n\tget tree() {\n\t\treturn this._tree;\n\t}\n\n\tstatic treeViewCount = 0;\n\n\t@Input() id = `tree-view-${TreeViewComponent.treeViewCount++}`;\n\t/**\n\t * Tree view label\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional context for label if it's a template\n\t */\n\t@Input() labelContext: any;\n\t/**\n\t * Specify the size of the list items in the tree\n\t */\n\t@Input() size: \"xs\" | \"sm\" = \"sm\";\n\t/**\n\t * **Experimental** - Enable to select multiple nodes\n\t */\n\t@Input() set isMultiSelect(isMulti: boolean) {\n\t\tthis.treeViewService.isMultiSelect = isMulti;\n\t}\n\n\t@Output() select = new EventEmitter<Node | Node[]>();\n\t@ViewChild(\"treeWrapper\") root: ElementRef;\n\n\tprivate treeWalker: TreeWalker;\n\tprivate _tree: Node[] = [];\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tpublic treeViewService: TreeViewService,\n\t\tprivate elementRef: ElementRef\n\t) {}\n\n\t/**\n\t * Subscribe for node selection\n\t */\n\tngOnInit(): void {\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((nodesMap: Map<string, Node>) => {\n\t\t\t// Get all values from the map to emit\n\t\t\tconst nodes = [...nodesMap.values()];\n\n\t\t\t// Update focus to reset arrow key traversal\n\t\t\t// Select the current highlight node as the last node, since we preserve order in map\n\t\t\tthis.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(nodes[nodes.length - 1].id)}`);\n\t\t\tthis.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);\n\t\t});\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\t/**\n\t * Initialize tree walker to support keyboard navigation\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.treeWalker = this.document.createTreeWalker(this.root.nativeElement, NodeFilter.SHOW_ELEMENT, {\n\t\t\tacceptNode: function (node: HTMLElement) {\n\t\t\t\tif (node.classList.contains(`cds--tree-node--disabled`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_REJECT;\n\t\t\t\t}\n\t\t\t\tif (node.matches(`div.cds--tree-node`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_ACCEPT;\n\t\t\t\t}\n\t\t\t\treturn NodeFilter.FILTER_SKIP;\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Navigate tree using tree walker\n\t * @param event - KeyboardEvent\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowUp\") {\n\t\t\t(this.treeWalker.previousNode() as HTMLElement)?.focus();\n\t\t}\n\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\t(this.treeWalker.nextNode() as HTMLElement)?.focus();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n\n\tprivate copyNode(node: Node): Node {\n\t\t// making a recursive shallow copy to avoid performance issues when deeply cloning templateRefs if defined in the node\n\t\tconst copiedNode = Object.assign({}, node);\n\t\tif (node.children) {\n\t\t copiedNode.children = node.children.map(child => this.copyNode(child));\n\t\t}\n\t\treturn copiedNode;\n\t}\n}\n",
|
|
67235
67253
|
"assetsDirs": [],
|
|
67236
67254
|
"styleUrlsData": "",
|
|
67237
67255
|
"stylesData": "",
|
|
@@ -88692,7 +88710,7 @@
|
|
|
88692
88710
|
"linktype": "component",
|
|
88693
88711
|
"name": "TreeNodeComponent",
|
|
88694
88712
|
"coveragePercent": 20,
|
|
88695
|
-
"coverageCount": "6/
|
|
88713
|
+
"coverageCount": "6/30",
|
|
88696
88714
|
"status": "low"
|
|
88697
88715
|
},
|
|
88698
88716
|
{
|
|
@@ -88701,7 +88719,7 @@
|
|
|
88701
88719
|
"linktype": "interface",
|
|
88702
88720
|
"name": "Node",
|
|
88703
88721
|
"coveragePercent": 0,
|
|
88704
|
-
"coverageCount": "0/
|
|
88722
|
+
"coverageCount": "0/13",
|
|
88705
88723
|
"status": "low"
|
|
88706
88724
|
},
|
|
88707
88725
|
{
|
|
@@ -348,8 +348,8 @@
|
|
|
348
348
|
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
|
|
349
349
|
|
|
350
350
|
|
|
351
|
-
import './runtime~main.
|
|
351
|
+
import './runtime~main.6c556d33.iframe.bundle.js';
|
|
352
352
|
|
|
353
353
|
import './5478.5fc19af5.iframe.bundle.js';
|
|
354
354
|
|
|
355
|
-
import './main.
|
|
355
|
+
import './main.84a378b3.iframe.bundle.js';</script></body></html>
|