carbon-components-angular 5.20.3 → 5.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/docs/documentation/components/Hamburger.html +92 -20
  2. package/docs/documentation/coverage.html +3 -3
  3. package/docs/documentation/js/search/search_index.js +2 -2
  4. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  5. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  6. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  7. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  8. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
  9. package/docs/documentation/modules/DatePickerInputModule.html +7 -7
  10. package/docs/documentation/modules/DatePickerModule/dependencies.svg +57 -53
  11. package/docs/documentation/modules/DatePickerModule.html +57 -53
  12. package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
  13. package/docs/documentation/modules/DialogModule.html +34 -34
  14. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  15. package/docs/documentation/modules/GridModule.html +60 -60
  16. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  17. package/docs/documentation/modules/LoadingModule.html +4 -4
  18. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  19. package/docs/documentation/modules/NFormsModule.html +4 -4
  20. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/NumberModule.html +4 -4
  22. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  24. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/RadioModule.html +4 -4
  26. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  27. package/docs/documentation/modules/SearchModule.html +4 -4
  28. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  29. package/docs/documentation/modules/SelectModule.html +58 -58
  30. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  31. package/docs/documentation/modules/SliderModule.html +4 -4
  32. package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
  33. package/docs/documentation/modules/StructuredListModule.html +66 -66
  34. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  35. package/docs/documentation/modules/TabsModule.html +69 -69
  36. package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
  37. package/docs/documentation/modules/TagModule.html +4 -4
  38. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  39. package/docs/documentation/modules/ThemeModule.html +13 -13
  40. package/docs/documentation/modules/TilesModule/dependencies.svg +86 -86
  41. package/docs/documentation/modules/TilesModule.html +86 -86
  42. package/docs/documentation/modules/TimePickerModule/dependencies.svg +18 -18
  43. package/docs/documentation/modules/TimePickerModule.html +18 -18
  44. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +21 -21
  45. package/docs/documentation/modules/TimePickerSelectModule.html +21 -21
  46. package/docs/documentation/modules/ToggleModule/dependencies.svg +36 -40
  47. package/docs/documentation/modules/ToggleModule.html +36 -40
  48. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  49. package/docs/documentation/modules/ToggletipModule.html +4 -4
  50. package/docs/documentation/modules/TreeviewModule/dependencies.svg +35 -35
  51. package/docs/documentation/modules/TreeviewModule.html +35 -35
  52. package/docs/documentation.json +32 -10
  53. package/docs/storybook/3348.35ca85d6.iframe.bundle.js +1 -0
  54. package/docs/storybook/iframe.html +2 -2
  55. package/docs/storybook/{main.939e2f87.iframe.bundle.js → main.11f564c6.iframe.bundle.js} +1 -1
  56. package/docs/storybook/project.json +1 -1
  57. package/docs/storybook/{runtime~main.a91352e8.iframe.bundle.js → runtime~main.386e82b8.iframe.bundle.js} +1 -1
  58. package/esm2020/ui-shell/header/hamburger.component.mjs +19 -15
  59. package/fesm2015/carbon-components-angular-ui-shell.mjs +18 -14
  60. package/fesm2015/carbon-components-angular-ui-shell.mjs.map +1 -1
  61. package/fesm2020/carbon-components-angular-ui-shell.mjs +18 -14
  62. package/fesm2020/carbon-components-angular-ui-shell.mjs.map +1 -1
  63. package/package.json +1 -1
  64. package/ui-shell/header/hamburger.component.d.ts +9 -1
  65. package/docs/storybook/3348.65c12f97.iframe.bundle.js +0 -1
package/docs/documentation/modules/TreeviewModule/dependencies.svg CHANGED
@@ -22,101 +22,101 @@
22
22
  <text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
23
23
  <g id="clust1" class="cluster">
24
24
  <title>cluster_TreeviewModule</title>
25
- <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="31.5,-70 31.5,-333 464.5,-333 464.5,-70 31.5,-70"/>
25
+ <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="18,-70 18,-333 478,-333 478,-70 18,-70"/>
26
26
  </g>
27
27
  <g id="clust6" class="cluster">
28
28
  <title>cluster_TreeviewModule_exports</title>
29
- <polygon fill="none" stroke="black" points="90.5,-273 90.5,-325 405.5,-325 405.5,-273 90.5,-273"/>
29
+ <polygon fill="none" stroke="black" points="80,-273 80,-325 395,-325 395,-273 80,-273"/>
30
30
  </g>
31
- <g id="clust5" class="cluster">
32
- <title>cluster_TreeviewModule_imports</title>
33
- <polygon fill="none" stroke="black" points="356.5,-143 356.5,-195 456.5,-195 456.5,-143 356.5,-143"/>
31
+ <g id="clust4" class="cluster">
32
+ <title>cluster_TreeviewModule_TreeViewComponent_providers</title>
33
+ <polygon fill="none" stroke="black" points="296,-78 296,-195 470,-195 470,-78 296,-78"/>
34
34
  </g>
35
35
  <g id="clust2" class="cluster">
36
36
  <title>cluster_TreeviewModule_declarations</title>
37
- <polygon fill="none" stroke="black" points="39.5,-143 39.5,-195 348.5,-195 348.5,-143 39.5,-143"/>
37
+ <polygon fill="none" stroke="black" points="134,-143 134,-195 288,-195 288,-143 134,-143"/>
38
38
  </g>
39
- <g id="clust4" class="cluster">
40
- <title>cluster_TreeviewModule_TreeViewComponent_providers</title>
41
- <polygon fill="none" stroke="black" points="39.5,-78 39.5,-130 213.5,-130 213.5,-78 39.5,-78"/>
39
+ <g id="clust5" class="cluster">
40
+ <title>cluster_TreeviewModule_imports</title>
41
+ <polygon fill="none" stroke="black" points="26,-143 26,-195 126,-195 126,-143 26,-143"/>
42
42
  </g>
43
43
  <!-- TreeNodeComponent -->
44
44
  <g id="node1" class="node">
45
45
  <title>TreeNodeComponent</title>
46
- <polygon fill="#ffffb3" stroke="black" points="340.3,-187 202.7,-187 202.7,-151 340.3,-151 340.3,-187"/>
47
- <text text-anchor="middle" x="271.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
46
+ <polygon fill="#ffffb3" stroke="black" points="279.8,-187 142.2,-187 142.2,-151 279.8,-151 279.8,-187"/>
47
+ <text text-anchor="middle" x="211" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
48
48
  </g>
49
49
  <!-- TreeviewModule -->
50
50
  <g id="node3" class="node">
51
51
  <title>TreeviewModule</title>
52
- <polygon fill="#8dd3c7" stroke="black" points="327.9,-252 324.9,-256 303.9,-256 300.9,-252 215.1,-252 215.1,-216 327.9,-216 327.9,-252"/>
53
- <text text-anchor="middle" x="271.5" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
52
+ <polygon fill="#8dd3c7" stroke="black" points="267.4,-252 264.4,-256 243.4,-256 240.4,-252 154.6,-252 154.6,-216 267.4,-216 267.4,-252"/>
53
+ <text text-anchor="middle" x="211" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
54
54
  </g>
55
55
  <!-- TreeNodeComponent&#45;&gt;TreeviewModule -->
56
56
  <g id="edge1" class="edge">
57
57
  <title>TreeNodeComponent&#45;&gt;TreeviewModule</title>
58
- <path fill="none" stroke="black" d="M271.5,-187.11C271.5,-187.11 271.5,-205.99 271.5,-205.99"/>
59
- <polygon fill="black" stroke="black" points="268,-205.99 271.5,-215.99 275,-205.99 268,-205.99"/>
58
+ <path fill="none" stroke="black" d="M211,-187.11C211,-187.11 211,-205.99 211,-205.99"/>
59
+ <polygon fill="black" stroke="black" points="207.5,-205.99 211,-215.99 214.5,-205.99 207.5,-205.99"/>
60
60
  </g>
61
61
  <!-- TreeViewComponent -->
62
62
  <g id="node2" class="node">
63
63
  <title>TreeViewComponent</title>
64
- <polygon fill="#ffffb3" stroke="black" points="185.29,-187 47.71,-187 47.71,-151 185.29,-151 185.29,-187"/>
65
- <text text-anchor="middle" x="116.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
64
+ <polygon fill="#ffffb3" stroke="black" points="446.79,-187 309.21,-187 309.21,-151 446.79,-151 446.79,-187"/>
65
+ <text text-anchor="middle" x="378" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
66
66
  </g>
67
67
  <!-- TreeViewComponent&#45;&gt;TreeviewModule -->
68
68
  <g id="edge2" class="edge">
69
69
  <title>TreeViewComponent&#45;&gt;TreeviewModule</title>
70
- <path fill="none" stroke="black" d="M141.62,-187.11C141.62,-206.34 141.62,-234 141.62,-234 141.62,-234 205.29,-234 205.29,-234"/>
71
- <polygon fill="black" stroke="black" points="205.29,-237.5 215.29,-234 205.29,-230.5 205.29,-237.5"/>
70
+ <path fill="none" stroke="black" d="M348.38,-187.11C348.38,-206.34 348.38,-234 348.38,-234 348.38,-234 277.27,-234 277.27,-234"/>
71
+ <polygon fill="black" stroke="black" points="277.27,-230.5 267.27,-234 277.27,-237.5 277.27,-230.5"/>
72
72
  </g>
73
73
  <!-- TreeNodeComponent -->
74
74
  <g id="node6" class="node">
75
75
  <title>TreeNodeComponent </title>
76
- <polygon fill="#fb8072" stroke="black" points="397.8,-317 257.2,-317 257.2,-281 397.8,-281 397.8,-317"/>
77
- <text text-anchor="middle" x="327.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
76
+ <polygon fill="#fb8072" stroke="black" points="387.3,-317 246.7,-317 246.7,-281 387.3,-281 387.3,-317"/>
77
+ <text text-anchor="middle" x="317" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
78
78
  </g>
79
79
  <!-- TreeviewModule&#45;&gt;TreeNodeComponent -->
80
80
  <g id="edge5" class="edge">
81
81
  <title>TreeviewModule&#45;&gt;TreeNodeComponent </title>
82
- <path fill="none" stroke="black" stroke-dasharray="5,2" d="M292.4,-252.11C292.4,-252.11 292.4,-270.99 292.4,-270.99"/>
83
- <polygon fill="black" stroke="black" points="288.9,-270.99 292.4,-280.99 295.9,-270.99 288.9,-270.99"/>
82
+ <path fill="none" stroke="black" stroke-dasharray="5,2" d="M256.9,-252.11C256.9,-252.11 256.9,-270.99 256.9,-270.99"/>
83
+ <polygon fill="black" stroke="black" points="253.4,-270.99 256.9,-280.99 260.4,-270.99 253.4,-270.99"/>
84
84
  </g>
85
85
  <!-- TreeViewComponent -->
86
86
  <g id="node7" class="node">
87
87
  <title>TreeViewComponent </title>
88
- <polygon fill="#fb8072" stroke="black" points="238.79,-317 98.21,-317 98.21,-281 238.79,-281 238.79,-317"/>
89
- <text text-anchor="middle" x="168.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
88
+ <polygon fill="#fb8072" stroke="black" points="228.29,-317 87.71,-317 87.71,-281 228.29,-281 228.29,-317"/>
89
+ <text text-anchor="middle" x="158" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
90
90
  </g>
91
91
  <!-- TreeviewModule&#45;&gt;TreeViewComponent -->
92
92
  <g id="edge6" class="edge">
93
93
  <title>TreeviewModule&#45;&gt;TreeViewComponent </title>
94
- <path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.1,-252.11C227.1,-252.11 227.1,-270.99 227.1,-270.99"/>
95
- <polygon fill="black" stroke="black" points="223.6,-270.99 227.1,-280.99 230.6,-270.99 223.6,-270.99"/>
94
+ <path fill="none" stroke="black" stroke-dasharray="5,2" d="M191.6,-252.11C191.6,-252.11 191.6,-270.99 191.6,-270.99"/>
95
+ <polygon fill="black" stroke="black" points="188.1,-270.99 191.6,-280.99 195.1,-270.99 188.1,-270.99"/>
96
96
  </g>
97
97
  <!-- TreeViewService -->
98
98
  <g id="node4" class="node">
99
99
  <title>TreeViewService</title>
100
- <ellipse fill="#fdb462" stroke="black" cx="126.5" cy="-104" rx="78.69" ry="18"/>
101
- <text text-anchor="middle" x="126.5" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
100
+ <ellipse fill="#fdb462" stroke="black" cx="383" cy="-104" rx="78.69" ry="18"/>
101
+ <text text-anchor="middle" x="383" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
102
102
  </g>
103
103
  <!-- TreeViewService&#45;&gt;TreeViewComponent -->
104
104
  <g id="edge3" class="edge">
105
105
  <title>TreeViewService&#45;&gt;TreeViewComponent</title>
106
- <path fill="none" stroke="black" d="M116.53,-122.11C116.53,-122.11 116.53,-140.99 116.53,-140.99"/>
107
- <polygon fill="black" stroke="black" points="113.03,-140.99 116.53,-150.99 120.03,-140.99 113.03,-140.99"/>
106
+ <path fill="none" stroke="black" d="M378,-122.11C378,-122.11 378,-140.99 378,-140.99"/>
107
+ <polygon fill="black" stroke="black" points="374.5,-140.99 378,-150.99 381.5,-140.99 374.5,-140.99"/>
108
108
  </g>
109
109
  <!-- IconModule -->
110
110
  <g id="node5" class="node">
111
111
  <title>IconModule</title>
112
- <polygon fill="#8dd3c7" stroke="black" points="448.93,-187 445.93,-191 424.93,-191 421.93,-187 364.07,-187 364.07,-151 448.93,-151 448.93,-187"/>
113
- <text text-anchor="middle" x="406.5" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
112
+ <polygon fill="#8dd3c7" stroke="black" points="118.43,-187 115.43,-191 94.43,-191 91.43,-187 33.57,-187 33.57,-151 118.43,-151 118.43,-187"/>
113
+ <text text-anchor="middle" x="76" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
114
114
  </g>
115
115
  <!-- IconModule&#45;&gt;TreeviewModule -->
116
116
  <g id="edge4" class="edge">
117
117
  <title>IconModule&#45;&gt;TreeviewModule</title>
118
- <path fill="none" stroke="black" d="M381.09,-187.11C381.09,-206.34 381.09,-234 381.09,-234 381.09,-234 337.9,-234 337.9,-234"/>
119
- <polygon fill="black" stroke="black" points="337.9,-230.5 327.9,-234 337.9,-237.5 337.9,-230.5"/>
118
+ <path fill="none" stroke="black" d="M102.91,-187.11C102.91,-206.34 102.91,-234 102.91,-234 102.91,-234 144.74,-234 144.74,-234"/>
119
+ <polygon fill="black" stroke="black" points="144.74,-237.5 154.74,-234 144.74,-230.5 144.74,-237.5"/>
120
120
  </g>
121
121
  </g>
122
122
  </svg>
package/docs/documentation/modules/TreeviewModule.html CHANGED
@@ -64,101 +64,101 @@
64
64
  <text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
65
65
  <g id="clust1" class="cluster">
66
66
  <title>cluster_TreeviewModule</title>
67
- <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="31.5,-70 31.5,-333 464.5,-333 464.5,-70 31.5,-70"/>
67
+ <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="18,-70 18,-333 478,-333 478,-70 18,-70"/>
68
68
  </g>
69
69
  <g id="clust6" class="cluster">
70
70
  <title>cluster_TreeviewModule_exports</title>
71
- <polygon fill="none" stroke="black" points="90.5,-273 90.5,-325 405.5,-325 405.5,-273 90.5,-273"/>
71
+ <polygon fill="none" stroke="black" points="80,-273 80,-325 395,-325 395,-273 80,-273"/>
72
72
  </g>
73
- <g id="clust5" class="cluster">
74
- <title>cluster_TreeviewModule_imports</title>
75
- <polygon fill="none" stroke="black" points="356.5,-143 356.5,-195 456.5,-195 456.5,-143 356.5,-143"/>
73
+ <g id="clust4" class="cluster">
74
+ <title>cluster_TreeviewModule_TreeViewComponent_providers</title>
75
+ <polygon fill="none" stroke="black" points="296,-78 296,-195 470,-195 470,-78 296,-78"/>
76
76
  </g>
77
77
  <g id="clust2" class="cluster">
78
78
  <title>cluster_TreeviewModule_declarations</title>
79
- <polygon fill="none" stroke="black" points="39.5,-143 39.5,-195 348.5,-195 348.5,-143 39.5,-143"/>
79
+ <polygon fill="none" stroke="black" points="134,-143 134,-195 288,-195 288,-143 134,-143"/>
80
80
  </g>
81
- <g id="clust4" class="cluster">
82
- <title>cluster_TreeviewModule_TreeViewComponent_providers</title>
83
- <polygon fill="none" stroke="black" points="39.5,-78 39.5,-130 213.5,-130 213.5,-78 39.5,-78"/>
81
+ <g id="clust5" class="cluster">
82
+ <title>cluster_TreeviewModule_imports</title>
83
+ <polygon fill="none" stroke="black" points="26,-143 26,-195 126,-195 126,-143 26,-143"/>
84
84
  </g>
85
85
  <!-- TreeNodeComponent -->
86
86
  <g id="node1" class="node">
87
87
  <title>TreeNodeComponent</title>
88
- <polygon fill="#ffffb3" stroke="black" points="340.3,-187 202.7,-187 202.7,-151 340.3,-151 340.3,-187"/>
89
- <text text-anchor="middle" x="271.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
88
+ <polygon fill="#ffffb3" stroke="black" points="279.8,-187 142.2,-187 142.2,-151 279.8,-151 279.8,-187"/>
89
+ <text text-anchor="middle" x="211" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
90
90
  </g>
91
91
  <!-- TreeviewModule -->
92
92
  <g id="node3" class="node">
93
93
  <title>TreeviewModule</title>
94
- <polygon fill="#8dd3c7" stroke="black" points="327.9,-252 324.9,-256 303.9,-256 300.9,-252 215.1,-252 215.1,-216 327.9,-216 327.9,-252"/>
95
- <text text-anchor="middle" x="271.5" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
94
+ <polygon fill="#8dd3c7" stroke="black" points="267.4,-252 264.4,-256 243.4,-256 240.4,-252 154.6,-252 154.6,-216 267.4,-216 267.4,-252"/>
95
+ <text text-anchor="middle" x="211" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
96
96
  </g>
97
97
  <!-- TreeNodeComponent&#45;&gt;TreeviewModule -->
98
98
  <g id="edge1" class="edge">
99
99
  <title>TreeNodeComponent&#45;&gt;TreeviewModule</title>
100
- <path fill="none" stroke="black" d="M271.5,-187.11C271.5,-187.11 271.5,-205.99 271.5,-205.99"/>
101
- <polygon fill="black" stroke="black" points="268,-205.99 271.5,-215.99 275,-205.99 268,-205.99"/>
100
+ <path fill="none" stroke="black" d="M211,-187.11C211,-187.11 211,-205.99 211,-205.99"/>
101
+ <polygon fill="black" stroke="black" points="207.5,-205.99 211,-215.99 214.5,-205.99 207.5,-205.99"/>
102
102
  </g>
103
103
  <!-- TreeViewComponent -->
104
104
  <g id="node2" class="node">
105
105
  <title>TreeViewComponent</title>
106
- <polygon fill="#ffffb3" stroke="black" points="185.29,-187 47.71,-187 47.71,-151 185.29,-151 185.29,-187"/>
107
- <text text-anchor="middle" x="116.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
106
+ <polygon fill="#ffffb3" stroke="black" points="446.79,-187 309.21,-187 309.21,-151 446.79,-151 446.79,-187"/>
107
+ <text text-anchor="middle" x="378" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
108
108
  </g>
109
109
  <!-- TreeViewComponent&#45;&gt;TreeviewModule -->
110
110
  <g id="edge2" class="edge">
111
111
  <title>TreeViewComponent&#45;&gt;TreeviewModule</title>
112
- <path fill="none" stroke="black" d="M141.62,-187.11C141.62,-206.34 141.62,-234 141.62,-234 141.62,-234 205.29,-234 205.29,-234"/>
113
- <polygon fill="black" stroke="black" points="205.29,-237.5 215.29,-234 205.29,-230.5 205.29,-237.5"/>
112
+ <path fill="none" stroke="black" d="M348.38,-187.11C348.38,-206.34 348.38,-234 348.38,-234 348.38,-234 277.27,-234 277.27,-234"/>
113
+ <polygon fill="black" stroke="black" points="277.27,-230.5 267.27,-234 277.27,-237.5 277.27,-230.5"/>
114
114
  </g>
115
115
  <!-- TreeNodeComponent -->
116
116
  <g id="node6" class="node">
117
117
  <title>TreeNodeComponent </title>
118
- <polygon fill="#fb8072" stroke="black" points="397.8,-317 257.2,-317 257.2,-281 397.8,-281 397.8,-317"/>
119
- <text text-anchor="middle" x="327.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
118
+ <polygon fill="#fb8072" stroke="black" points="387.3,-317 246.7,-317 246.7,-281 387.3,-281 387.3,-317"/>
119
+ <text text-anchor="middle" x="317" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
120
120
  </g>
121
121
  <!-- TreeviewModule&#45;&gt;TreeNodeComponent -->
122
122
  <g id="edge5" class="edge">
123
123
  <title>TreeviewModule&#45;&gt;TreeNodeComponent </title>
124
- <path fill="none" stroke="black" stroke-dasharray="5,2" d="M292.4,-252.11C292.4,-252.11 292.4,-270.99 292.4,-270.99"/>
125
- <polygon fill="black" stroke="black" points="288.9,-270.99 292.4,-280.99 295.9,-270.99 288.9,-270.99"/>
124
+ <path fill="none" stroke="black" stroke-dasharray="5,2" d="M256.9,-252.11C256.9,-252.11 256.9,-270.99 256.9,-270.99"/>
125
+ <polygon fill="black" stroke="black" points="253.4,-270.99 256.9,-280.99 260.4,-270.99 253.4,-270.99"/>
126
126
  </g>
127
127
  <!-- TreeViewComponent -->
128
128
  <g id="node7" class="node">
129
129
  <title>TreeViewComponent </title>
130
- <polygon fill="#fb8072" stroke="black" points="238.79,-317 98.21,-317 98.21,-281 238.79,-281 238.79,-317"/>
131
- <text text-anchor="middle" x="168.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
130
+ <polygon fill="#fb8072" stroke="black" points="228.29,-317 87.71,-317 87.71,-281 228.29,-281 228.29,-317"/>
131
+ <text text-anchor="middle" x="158" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
132
132
  </g>
133
133
  <!-- TreeviewModule&#45;&gt;TreeViewComponent -->
134
134
  <g id="edge6" class="edge">
135
135
  <title>TreeviewModule&#45;&gt;TreeViewComponent </title>
136
- <path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.1,-252.11C227.1,-252.11 227.1,-270.99 227.1,-270.99"/>
137
- <polygon fill="black" stroke="black" points="223.6,-270.99 227.1,-280.99 230.6,-270.99 223.6,-270.99"/>
136
+ <path fill="none" stroke="black" stroke-dasharray="5,2" d="M191.6,-252.11C191.6,-252.11 191.6,-270.99 191.6,-270.99"/>
137
+ <polygon fill="black" stroke="black" points="188.1,-270.99 191.6,-280.99 195.1,-270.99 188.1,-270.99"/>
138
138
  </g>
139
139
  <!-- TreeViewService -->
140
140
  <g id="node4" class="node">
141
141
  <title>TreeViewService</title>
142
- <ellipse fill="#fdb462" stroke="black" cx="126.5" cy="-104" rx="78.69" ry="18"/>
143
- <text text-anchor="middle" x="126.5" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
142
+ <ellipse fill="#fdb462" stroke="black" cx="383" cy="-104" rx="78.69" ry="18"/>
143
+ <text text-anchor="middle" x="383" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
144
144
  </g>
145
145
  <!-- TreeViewService&#45;&gt;TreeViewComponent -->
146
146
  <g id="edge3" class="edge">
147
147
  <title>TreeViewService&#45;&gt;TreeViewComponent</title>
148
- <path fill="none" stroke="black" d="M116.53,-122.11C116.53,-122.11 116.53,-140.99 116.53,-140.99"/>
149
- <polygon fill="black" stroke="black" points="113.03,-140.99 116.53,-150.99 120.03,-140.99 113.03,-140.99"/>
148
+ <path fill="none" stroke="black" d="M378,-122.11C378,-122.11 378,-140.99 378,-140.99"/>
149
+ <polygon fill="black" stroke="black" points="374.5,-140.99 378,-150.99 381.5,-140.99 374.5,-140.99"/>
150
150
  </g>
151
151
  <!-- IconModule -->
152
152
  <g id="node5" class="node">
153
153
  <title>IconModule</title>
154
- <polygon fill="#8dd3c7" stroke="black" points="448.93,-187 445.93,-191 424.93,-191 421.93,-187 364.07,-187 364.07,-151 448.93,-151 448.93,-187"/>
155
- <text text-anchor="middle" x="406.5" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
154
+ <polygon fill="#8dd3c7" stroke="black" points="118.43,-187 115.43,-191 94.43,-191 91.43,-187 33.57,-187 33.57,-151 118.43,-151 118.43,-187"/>
155
+ <text text-anchor="middle" x="76" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
156
156
  </g>
157
157
  <!-- IconModule&#45;&gt;TreeviewModule -->
158
158
  <g id="edge4" class="edge">
159
159
  <title>IconModule&#45;&gt;TreeviewModule</title>
160
- <path fill="none" stroke="black" d="M381.09,-187.11C381.09,-206.34 381.09,-234 381.09,-234 381.09,-234 337.9,-234 337.9,-234"/>
161
- <polygon fill="black" stroke="black" points="337.9,-230.5 327.9,-234 337.9,-237.5 337.9,-230.5"/>
160
+ <path fill="none" stroke="black" d="M102.91,-187.11C102.91,-206.34 102.91,-234 102.91,-234 102.91,-234 144.74,-234 144.74,-234"/>
161
+ <polygon fill="black" stroke="black" points="144.74,-237.5 154.74,-234 144.74,-230.5 144.74,-237.5"/>
162
162
  </g>
163
163
  </g>
164
164
  </svg>
package/docs/documentation.json CHANGED
@@ -31643,7 +31643,7 @@
31643
31643
  },
31644
31644
  {
31645
31645
  "name": "Hamburger",
31646
- "id": "component-Hamburger-3eb24e9eb1124c8246337e3ebe12e8bafa9fa945597fb3d82dbe6808fda6b5a61f077633036672d3577775a91b861f62e1736697a099514a0a823f329c32a395",
31646
+ "id": "component-Hamburger-ee42e761f8e5ddaa77ba0ce22087ef43711640c0f5c17eb6e91d38d90844446256c784045c38a10b865260759eb8e19a21c2c41b2325ff77d606fe6b6350b9b1",
31647
31647
  "file": "src/ui-shell/header/hamburger.component.ts",
31648
31648
  "encapsulation": [],
31649
31649
  "entryComponents": [],
@@ -31653,7 +31653,7 @@
31653
31653
  "selector": "cds-hamburger, ibm-hamburger",
31654
31654
  "styleUrls": [],
31655
31655
  "styles": [],
31656
- "template": "<button\n\ttype=\"button\"\n\t(click)=\"doClick()\"\n\t[ngClass]=\"{'cds--header__action--active': active}\"\n\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t[attr.aria-label]=\"active\n\t\t? (i18n.get('UI_SHELL.HEADER.CLOSE_MENU') | async)\n\t\t: (i18n.get('UI_SHELL.HEADER.OPEN_MENU') | async)\"\n\t[attr.title]=\"active\n\t\t? (i18n.get('UI_SHELL.HEADER.CLOSE_MENU') | async)\n\t\t: (i18n.get('UI_SHELL.HEADER.OPEN_MENU') | async)\">\n\t<svg *ngIf=\"!active\" cdsIcon=\"menu\" size=\"20\"></svg>\n\t<svg *ngIf=\"active\" cdsIcon=\"close\" size=\"20\"></svg>\n</button>\n\t",
31656
+ "template": "<button\n\ttype=\"button\"\n\t(click)=\"doClick()\"\n\t[ngClass]=\"{'cds--header__action--active': active}\"\n\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t[attr.aria-label]=\"active ? activeTitle : inactiveTitle\"\n\t[attr.title]=\"active ? activeTitle : inactiveTitle\">\n\t<svg *ngIf=\"!active\" cdsIcon=\"menu\" size=\"20\"></svg>\n\t<svg *ngIf=\"active\" cdsIcon=\"close\" size=\"20\"></svg>\n</button>\n\t",
31657
31657
  "templateUrl": [],
31658
31658
  "viewProviders": [],
31659
31659
  "hostDirectives": [],
@@ -31665,9 +31665,31 @@
31665
31665
  "deprecationMessage": "",
31666
31666
  "rawdescription": "\n\nControls the active/selected state for the `Hamburger` menu.\n",
31667
31667
  "description": "<p>Controls the active/selected state for the <code>Hamburger</code> menu.</p>\n",
31668
- "line": 35,
31668
+ "line": 31,
31669
31669
  "type": "boolean",
31670
31670
  "decorators": []
31671
+ },
31672
+ {
31673
+ "name": "activeTitle",
31674
+ "defaultValue": "this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU",
31675
+ "deprecated": false,
31676
+ "deprecationMessage": "",
31677
+ "rawdescription": "\n\nSet the title text when the hamburger is active\n",
31678
+ "description": "<p>Set the title text when the hamburger is active</p>\n",
31679
+ "line": 36,
31680
+ "type": "any",
31681
+ "decorators": []
31682
+ },
31683
+ {
31684
+ "name": "inactiveTitle",
31685
+ "defaultValue": "this.i18n.get().UI_SHELL.HEADER.OPEN_MENU",
31686
+ "deprecated": false,
31687
+ "deprecationMessage": "",
31688
+ "rawdescription": "\n\nSet the title text when the hamburger is inactive\n",
31689
+ "description": "<p>Set the title text when the hamburger is inactive</p>\n",
31690
+ "line": 41,
31691
+ "type": "any",
31692
+ "decorators": []
31671
31693
  }
31672
31694
  ],
31673
31695
  "outputsClass": [
@@ -31678,7 +31700,7 @@
31678
31700
  "deprecationMessage": "",
31679
31701
  "rawdescription": "\n\n`EventEmitter` to notify parent components of menu click events.\n",
31680
31702
  "description": "<p><code>EventEmitter</code> to notify parent components of menu click events.</p>\n",
31681
- "line": 40,
31703
+ "line": 46,
31682
31704
  "type": "EventEmitter<Object>"
31683
31705
  }
31684
31706
  ],
@@ -31690,7 +31712,7 @@
31690
31712
  "type": "I18n",
31691
31713
  "optional": false,
31692
31714
  "description": "",
31693
- "line": 42,
31715
+ "line": 48,
31694
31716
  "modifierKind": [
31695
31717
  123
31696
31718
  ]
@@ -31703,7 +31725,7 @@
31703
31725
  "optional": false,
31704
31726
  "returnType": "void",
31705
31727
  "typeParameters": [],
31706
- "line": 47,
31728
+ "line": 53,
31707
31729
  "deprecated": false,
31708
31730
  "deprecationMessage": "",
31709
31731
  "rawdescription": "\n\nEmit the Hamburger click event upwards.\n",
@@ -31722,7 +31744,7 @@
31722
31744
  "description": "<p>A toggle for the side navigation</p>\n",
31723
31745
  "rawdescription": "\n\nA toggle for the side navigation\n",
31724
31746
  "type": "component",
31725
- "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tInput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A toggle for the side navigation\n */\n@Component({\n\tselector: \"cds-hamburger, ibm-hamburger\",\n\ttemplate: `\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"doClick()\"\n\t\t\t[ngClass]=\"{'cds--header__action--active': active}\"\n\t\t\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t\t\t[attr.aria-label]=\"active\n\t\t\t\t? (i18n.get('UI_SHELL.HEADER.CLOSE_MENU') | async)\n\t\t\t\t: (i18n.get('UI_SHELL.HEADER.OPEN_MENU') | async)\"\n\t\t\t[attr.title]=\"active\n\t\t\t\t? (i18n.get('UI_SHELL.HEADER.CLOSE_MENU') | async)\n\t\t\t\t: (i18n.get('UI_SHELL.HEADER.OPEN_MENU') | async)\">\n\t\t\t<svg *ngIf=\"!active\" cdsIcon=\"menu\" size=\"20\"></svg>\n\t\t\t<svg *ngIf=\"active\" cdsIcon=\"close\" size=\"20\"></svg>\n\t\t</button>\n\t`\n})\nexport class Hamburger {\n\t/**\n\t * Controls the active/selected state for the `Hamburger` menu.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * `EventEmitter` to notify parent components of menu click events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\n\tconstructor(public i18n: I18n) { }\n\n\t/**\n\t * Emit the Hamburger click event upwards.\n\t */\n\tpublic doClick() {\n\t\tthis.selected.emit(this.active);\n\t}\n}\n",
31747
+ "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tInput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A toggle for the side navigation\n */\n@Component({\n\tselector: \"cds-hamburger, ibm-hamburger\",\n\ttemplate: `\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"doClick()\"\n\t\t\t[ngClass]=\"{'cds--header__action--active': active}\"\n\t\t\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t\t\t[attr.aria-label]=\"active ? activeTitle : inactiveTitle\"\n\t\t\t[attr.title]=\"active ? activeTitle : inactiveTitle\">\n\t\t\t<svg *ngIf=\"!active\" cdsIcon=\"menu\" size=\"20\"></svg>\n\t\t\t<svg *ngIf=\"active\" cdsIcon=\"close\" size=\"20\"></svg>\n\t\t</button>\n\t`\n})\nexport class Hamburger {\n\t/**\n\t * Controls the active/selected state for the `Hamburger` menu.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Set the title text when the hamburger is active\n\t */\n\t@Input() activeTitle = this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU;\n\n\t/**\n\t * Set the title text when the hamburger is inactive\n\t */\n\t@Input() inactiveTitle = this.i18n.get().UI_SHELL.HEADER.OPEN_MENU;\n\n\t/**\n\t * `EventEmitter` to notify parent components of menu click events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\n\tconstructor(public i18n: I18n) {}\n\n\t/**\n\t * Emit the Hamburger click event upwards.\n\t */\n\tpublic doClick() {\n\t\tthis.selected.emit(this.active);\n\t}\n}\n",
31726
31748
  "assetsDirs": [],
31727
31749
  "styleUrlsData": "",
31728
31750
  "stylesData": "",
@@ -31739,7 +31761,7 @@
31739
31761
  "deprecationMessage": ""
31740
31762
  }
31741
31763
  ],
31742
- "line": 40,
31764
+ "line": 46,
31743
31765
  "jsdoctags": [
31744
31766
  {
31745
31767
  "name": "i18n",
@@ -85998,8 +86020,8 @@
85998
86020
  "type": "component",
85999
86021
  "linktype": "component",
86000
86022
  "name": "Hamburger",
86001
- "coveragePercent": 66,
86002
- "coverageCount": "4/6",
86023
+ "coveragePercent": 75,
86024
+ "coverageCount": "6/8",
86003
86025
  "status": "good"
86004
86026
  },
86005
86027
  {
package/docs/storybook/3348.35ca85d6.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3348],{"./src/ui-shell/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p5:()=>UIShellModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),platform_browser=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/platform-browser.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let Header=class Header{constructor(i18n,domSanitizer,router){this.i18n=i18n,this.domSanitizer=domSanitizer,this.router=router,this.brand="IBM",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){this._href=v}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}isTemplate(value){return value instanceof core.TemplateRef}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};Header.ctorParameters=()=>[{type:i18n.oc},{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],Header.propDecorators={skipTo:[{type:core.Input}],name:[{type:core.Input}],brand:[{type:core.Input}],href:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],useRouter:[{type:core.Input}],navigation:[{type:core.Output}]},Header=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header, ibm-header",template:'\n\t\t<header\n\t\t\tclass="cds--header"\n\t\t\t[attr.aria-label]="brand + \' \' + name">\n\t\t\t<a\n\t\t\t\t*ngIf="skipTo"\n\t\t\t\tclass="cds--skip-to-content"\n\t\t\t\t[href]="skipTo"\n\t\t\t\ttabindex="0">\n\t\t\t\t{{ i18n.get("UI_SHELL.SKIP_TO") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select="cds-hamburger,ibm-hamburger"></ng-content>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="isTemplate(brand)"\n\t\t\t\t[ngTemplateOutlet]="brand">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="false"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[href]="href"\n\t\t\t\t\t(click)="navigate($event)">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="true"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[routerLink]="route">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t'})],Header);let HeaderItem=class HeaderItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.role="listitem",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};HeaderItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],HeaderItem.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],href:[{type:core.Input}],useRouter:[{type:core.Input}],activeLinkClass:[{type:core.Input}],isCurrentPage:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}]},HeaderItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-item, ibm-header-item",template:'\n\t\t<ng-container [ngSwitch]="useRouter">\n\t\t\t<ng-template #content><ng-content></ng-content></ng-template>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="false"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[href]="href"\n\t\t\t\t(click)="navigate($event)">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="true"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\t[routerLinkActive]="[\'cds--header__menu-item--current\']"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[routerLink]="route"\n\t\t\t\t[routerLinkActive]="activeLinkClass">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t</ng-container>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderItem);let HeaderMenu=class HeaderMenu{constructor(domSanitizer,elementRef){this.domSanitizer=domSanitizer,this.elementRef=elementRef,this.subMenu=!0,this.role="listitem",this.trigger="click",this.expanded=!1,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}onClick(){"click"===this.trigger&&(this.expanded=!this.expanded)}onMouseOver(){"mouseover"===this.trigger&&(this.expanded=!0)}onMouseOut(){"mouseover"===this.trigger&&(this.expanded=!1)}onFocusOut(event){this.elementRef.nativeElement.contains(event.relatedTarget)||(this.expanded=!1)}navigate(event){"#"===this._href&&event.preventDefault()}};HeaderMenu.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:core.ElementRef}],HeaderMenu.propDecorators={subMenu:[{type:core.HostBinding,args:["class.cds--header__submenu"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],href:[{type:core.Input}],trigger:[{type:core.Input}],headerItems:[{type:core.Input}],icon:[{type:core.Input}],onClick:[{type:core.HostListener,args:["click"]}],onMouseOver:[{type:core.HostListener,args:["mouseover"]}],onMouseOut:[{type:core.HostListener,args:["mouseout"]}],onFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},HeaderMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-menu, ibm-header-menu",template:'\n\t\t<a\n\t\t\tclass="cds--header__menu-item cds--header__menu-title"\n\t\t\t[href]="href"\n\t\t\ttabindex="0"\n\t\t\taria-haspopup="menu"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\t(click)="navigate($event)">\n\t\t\t{{title}}\n\t\t\t<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t<ng-template #defaultIcon>\n\t\t\t\t<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">\n\t\t\t\t\t<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />\n\t\t\t\t</svg>\n\t\t\t</ng-template>\n\t\t</a>\n\t\t<div class="cds--header__menu" [attr.aria-label]="title">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let headerItem of headerItems">\n\t\t\t\t<cds-header-item\n\t\t\t\t\t[href]="headerItem.href"\n\t\t\t\t\t[route]="headerItem.route"\n\t\t\t\t\t[routeExtras]="headerItem.routeExtras">\n\t\t\t\t\t{{ headerItem.content }}\n\t\t\t\t</cds-header-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderMenu);let HeaderNavigation=class HeaderNavigation{constructor(){this.height=100}};HeaderNavigation.propDecorators={height:[{type:core.HostBinding,args:["style.height.%"]}],ariaLabel:[{type:core.Input}],navigationItems:[{type:core.Input}]},HeaderNavigation=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-navigation, ibm-header-navigation",template:'\n\t\t<nav class="cds--header__nav" [attr.aria-label]="ariaLabel">\n\t\t\t<div class="cds--header__menu-bar" role="list">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t<cds-header-item\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t[isCurrentPage]="!!navigationItem.isCurrentPage">\n\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t</cds-header-item>\n\t\t\t\t\t<cds-header-menu\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t[trigger]="navigationItem.trigger ? navigationItem.trigger : \'click\'"\n\t\t\t\t\t\t[headerItems]="navigationItem.menuItems">\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</nav>\n\t'})],HeaderNavigation);let HeaderGlobal=class HeaderGlobal{constructor(){this.hostClass=!0}};HeaderGlobal.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--header__global"]}]},HeaderGlobal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-global, ibm-header-global",template:"\n\t\t<ng-content></ng-content>\n\t"})],HeaderGlobal);let HeaderAction=class HeaderAction extends src_button.HL{constructor(){super(...arguments),this.active=!1,this.activeChange=new core.EventEmitter,this.selected=new core.EventEmitter}onClick(){this.active=!this.active,this.selected.emit(this.active),this.activeChange.emit(this.active)}};HeaderAction.propDecorators={description:[{type:core.Input}],ariaLabel:[{type:core.Input}],active:[{type:core.Input}],activeChange:[{type:core.Output}],selected:[{type:core.Output}]},HeaderAction=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-action, ibm-header-action",template:'\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]="{\n\t\t\t\t\'cds--header__action\': true,\n\t\t\t\t\'cds--header__action--active\': active\n\t\t\t}"\n\t\t\t(click)="onClick()"\n\t\t\t[align]="align"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t\t[description]="description"\n\t\t\t[buttonAttributes]="{\n\t\t\t\t\'aria-label\': ariaLabel\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-icon-button>\n\t'})],HeaderAction);let Hamburger=class Hamburger{constructor(i18n){this.i18n=i18n,this.active=!1,this.activeTitle=this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU,this.inactiveTitle=this.i18n.get().UI_SHELL.HEADER.OPEN_MENU,this.selected=new core.EventEmitter}doClick(){this.selected.emit(this.active)}};Hamburger.ctorParameters=()=>[{type:i18n.oc}],Hamburger.propDecorators={active:[{type:core.Input}],activeTitle:[{type:core.Input}],inactiveTitle:[{type:core.Input}],selected:[{type:core.Output}]},Hamburger=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-hamburger, ibm-hamburger",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="doClick()"\n\t\t\t[ngClass]="{\'cds--header__action--active\': active}"\n\t\t\tclass="cds--header__menu-trigger cds--header__action cds--header__menu-toggle"\n\t\t\t[attr.aria-label]="active ? activeTitle : inactiveTitle"\n\t\t\t[attr.title]="active ? activeTitle : inactiveTitle">\n\t\t\t<svg *ngIf="!active" cdsIcon="menu" size="20"></svg>\n\t\t\t<svg *ngIf="active" cdsIcon="close" size="20"></svg>\n\t\t</button>\n\t'})],Hamburger);let HeaderModule=class HeaderModule{};HeaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger],imports:[common.CommonModule,src_button.hJ,i18n.LU,icon.QX,router.Bz],exports:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger]})],HeaderModule);let SideNav=class SideNav{constructor(i18n){this.i18n=i18n,this.hostClass=!0,this.ariaLabel="Side navigation",this.expanded=!0,this.hidden=!1,this.rail=!1,this.ux=!0,this.allowExpansion=!1}toggle(){this.expanded=!this.expanded}};SideNav.ctorParameters=()=>[{type:i18n.oc}],SideNav.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--side-nav"]}],ariaLabel:[{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--side-nav--expanded"]},{type:core.Input}],hidden:[{type:core.HostBinding,args:["class.cds--side-nav--hidden"]},{type:core.Input}],rail:[{type:core.HostBinding,args:["class.cds--side-nav--rail"]},{type:core.Input}],ux:[{type:core.HostBinding,args:["class.cds--side-nav__navigation"]}],allowExpansion:[{type:core.Input}],navigationItems:[{type:core.Input}]},SideNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav, ibm-sidenav",template:'\n\t\t<nav class="cds--side-nav__items" [attr.aria-label]="ariaLabel">\n\t\t\t<ng-content select="cds-sidenav-header,ibm-sidenav-header"></ng-content>\n\t\t\t<div role="list">\n\t\t\t\t<div class="cds--side-nav__header-navigation cds--side-nav__header-divider">\n\t\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t\t[title]="navigationItem.title">\n\t\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t\t</cds-sidenav-item>\n\t\t\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t\t[menuItems]="navigationItem.menuItems">\n\t\t\t\t\t\t</cds-sidenav-menu>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<footer class="cds--side-nav__footer">\n\t\t\t\t<button\n\t\t\t\t\t*ngIf="allowExpansion"\n\t\t\t\t\tclass="cds--side-nav__toggle"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[title]="(expanded ? i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_CLOSE\') : i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_OPEN\')) | async"\n\t\t\t\t\t(click)="toggle()">\n\t\t\t\t\t<div class="cds--side-nav__icon">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="expanded"\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="!expanded"\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class="cds--assistive-text">\n\t\t\t\t\t\t{{(expanded ? i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_CLOSE\') : i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_OPEN\')) | async}}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</footer>\n\t\t</nav>\n\t',encapsulation:core.ViewEncapsulation.None})],SideNav);let SideNavItem=class SideNavItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.isSubMenu=!1,this.navigation=new core.EventEmitter,this.selected=new core.EventEmitter,this.role="listitem",this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}get sideNav(){return!this.isSubMenu}get menuItem(){return this.isSubMenu}ngOnChanges(changes){changes.active&&this.selected.emit(this.active)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SideNavItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SideNavItem.propDecorators={href:[{type:core.Input}],sideNav:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],menuItem:[{type:core.HostBinding,args:["class.cds--side-nav__menu-item"]}],active:[{type:core.Input}],route:[{type:core.Input}],isSubMenu:[{type:core.Input}],routeExtras:[{type:core.Input}],title:[{type:core.Input}],navigation:[{type:core.Output}],selected:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}]},SideNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-item, ibm-sidenav-item",template:'\n\t\t<a\n\t\t\tclass="cds--side-nav__link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--side-nav__item--active\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[attr.aria-current]="(active ? \'page\' : null)"\n\t\t\t[attr.title]="title ? title : null"\n\t\t\t(click)="navigate($event)">\n\t\t\t<div *ngIf="!isSubMenu" class="cds--side-nav__icon">\n\t\t\t\t<ng-content select="svg, [icon]"></ng-content>\n\t\t\t</div>\n\t\t\t<span class="cds--side-nav__link-text">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</a>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],SideNavItem);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js");let SideNavMenu=class SideNavMenu{constructor(){this.navItem=!0,this.navItemIcon=!0,this.role="listitem",this.expanded=!1,this.hasActiveChild=!1,this.activeItemsSubscription=new Subscription.w0}get navItemActive(){return this.hasActiveChild}ngAfterContentInit(){setTimeout((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)})),this.sidenavItems.changes.subscribe((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)}))}))}))}ngOnDestroy(){this.activeItemsSubscription.unsubscribe()}toggle(){this.expanded=!this.expanded}findActiveChildren(){this.hasActiveChild=this.sidenavItems.some((item=>item.active))}};SideNavMenu.propDecorators={navItem:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],navItemIcon:[{type:core.HostBinding,args:["class.cds--side-nav__item--icon"]}],navItemActive:[{type:core.HostBinding,args:["class.cds--side-nav__item--active"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],expanded:[{type:core.Input}],hasActiveChild:[{type:core.Input}],menuItems:[{type:core.Input}],sidenavItems:[{type:core.ContentChildren,args:[SideNavItem]}]},SideNavMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-menu, ibm-sidenav-menu",template:'\n\t\t<button\n\t\t\t(click)="toggle()"\n\t\t\tclass="cds--side-nav__submenu"\n\t\t\taria-haspopup="true"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\ttype="button">\n\t\t\t<div class="cds--side-nav__icon">\n\t\t\t\t<ng-content select="svg, [icon]"></ng-content>\n\t\t\t</div>\n\t\t\t<span class="cds--side-nav__submenu-title">{{title}}</span>\n\t\t\t<div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">\n\t\t\t\t<svg\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\twidth="20"\n\t\t\t\t\theight="20"\n\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t\t<div class="cds--side-nav__menu" role="list">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let menuItem of menuItems">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t[href]="menuItem.href"\n\t\t\t\t\t[route]="menuItem.route"\n\t\t\t\t\t[routeExtras]="menuItem.routeExtras"\n\t\t\t\t\t[isSubMenu]="true">\n\t\t\t\t\t{{ menuItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t'})],SideNavMenu);let SideNavModule=class SideNavModule{};SideNavModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[SideNav,SideNavItem,SideNavMenu],imports:[common.CommonModule,i18n.LU],exports:[SideNav,SideNavItem,SideNavMenu]})],SideNavModule);let Panel=class Panel{constructor(){this.expanded=!1}};Panel.propDecorators={expanded:[{type:core.Input}],ariaLabel:[{type:core.Input}]},Panel=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-panel, ibm-panel",template:'\n\t\t<div\n\t\t\tclass="cds--header-panel"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--header-panel--expanded\': expanded\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Panel);let SwitcherList=class SwitcherList{constructor(){this.switcher=!0,this.role="list"}};SwitcherList.propDecorators={switcher:[{type:core.HostBinding,args:["class.cds--switcher"]}],role:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list, ibm-switcher-list",template:"\n\t\t\t<ng-content></ng-content>\n\t",styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],SwitcherList);let SwitcherListItem=class SwitcherListItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.navigation=new core.EventEmitter,this.itemClass=!0,this.itemRole="listitem",this._href="#",this._target=""}set href(value){this._href=value}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}set target(value){this._target=value}get target(){return this._target}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SwitcherListItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SwitcherListItem.propDecorators={active:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],href:[{type:core.Input}],navigation:[{type:core.Output}],target:[{type:core.Input}],itemClass:[{type:core.HostBinding,args:["class.cds--switcher__item"]}],itemRole:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list-item, ibm-switcher-list-item",template:'\n\t\t<a\n\t\t\tclass="cds--switcher__item-link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--switcher__item-link--selected\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[target]="target"\n\t\t\t(click)="navigate($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</a>\n\t'})],SwitcherListItem);let PanelModule=class PanelModule{};PanelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Panel,SwitcherList,SwitcherListItem],imports:[common.CommonModule,i18n.LU],exports:[Panel,SwitcherList,SwitcherListItem]})],PanelModule);let UIShellModule=class UIShellModule{};UIShellModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,i18n.LU,HeaderModule,SideNavModule,PanelModule],exports:[HeaderModule,SideNavModule,PanelModule]})],UIShellModule)}}]);
package/docs/storybook/iframe.html CHANGED
@@ -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.a91352e8.iframe.bundle.js';
351
+ import './runtime~main.386e82b8.iframe.bundle.js';
352
352
 
353
353
  import './959.4248791c.iframe.bundle.js';
354
354
 
355
- import './main.939e2f87.iframe.bundle.js';</script></body></html>
355
+ import './main.11f564c6.iframe.bundle.js';</script></body></html>