carbon-components-angular 5.15.0 → 5.15.1
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/contained-list/contained-list-item.component.d.ts +1 -1
- package/docs/documentation/components/ContainedListItem.html +3 -3
- package/docs/documentation/components/Header.html +3 -3
- package/docs/documentation/components/SideNav.html +3 -3
- package/docs/documentation/components/StructuredList.html +3 -3
- package/docs/documentation/components/TableToolbar.html +3 -3
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
- package/docs/documentation/modules/DatePickerInputModule.html +7 -7
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +53 -57
- package/docs/documentation/modules/DatePickerModule.html +53 -57
- package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
- package/docs/documentation/modules/LoadingModule.html +4 -4
- package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NFormsModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +60 -56
- package/docs/documentation/modules/RadioModule.html +60 -56
- package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SearchModule.html +4 -4
- package/docs/documentation/modules/SelectModule/dependencies.svg +60 -60
- package/docs/documentation/modules/SelectModule.html +60 -60
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/TabsModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TabsModule.html +4 -4
- package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TagModule.html +4 -4
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TilesModule.html +4 -4
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +45 -41
- package/docs/documentation/modules/TimePickerModule.html +45 -41
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +45 -49
- package/docs/documentation/modules/TimePickerSelectModule.html +45 -49
- package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggleModule.html +4 -4
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +39 -39
- package/docs/documentation/modules/ToggletipModule.html +39 -39
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation.json +15 -15
- package/docs/storybook/3348.65c12f97.iframe.bundle.js +1 -0
- package/docs/storybook/5868.3a9c7b8c.iframe.bundle.js +1 -0
- package/docs/storybook/contained-list-contained-list-stories.cc19b34e.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.7089a1ee.iframe.bundle.js +1 -0
- package/docs/storybook/{patterns-filtering-multiple-categories-stories.558f489b.iframe.bundle.js → patterns-filtering-multiple-categories-stories.4807c390.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.c04398e0.iframe.bundle.js → runtime~main.e6d6ea33.iframe.bundle.js} +1 -1
- package/docs/storybook/{structured-list-structured-list-stories.6c6d8ade.iframe.bundle.js → structured-list-structured-list-stories.71b6565d.iframe.bundle.js} +1 -1
- package/esm2020/contained-list/contained-list-item.component.mjs +3 -3
- package/esm2020/structured-list/structured-list.component.mjs +3 -3
- package/esm2020/table/toolbar/table-toolbar.component.mjs +3 -3
- package/esm2020/ui-shell/header/header.component.mjs +3 -3
- package/esm2020/ui-shell/sidenav/sidenav.component.mjs +3 -3
- package/fesm2015/carbon-components-angular-contained-list.mjs +2 -2
- package/fesm2015/carbon-components-angular-contained-list.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-structured-list.mjs +2 -2
- package/fesm2015/carbon-components-angular-structured-list.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-table.mjs +2 -2
- package/fesm2015/carbon-components-angular-table.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-ui-shell.mjs +4 -4
- package/fesm2015/carbon-components-angular-ui-shell.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-contained-list.mjs +2 -2
- package/fesm2020/carbon-components-angular-contained-list.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-structured-list.mjs +2 -2
- package/fesm2020/carbon-components-angular-structured-list.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-table.mjs +2 -2
- package/fesm2020/carbon-components-angular-table.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-ui-shell.mjs +4 -4
- package/fesm2020/carbon-components-angular-ui-shell.mjs.map +1 -1
- package/package.json +1 -1
- package/structured-list/structured-list.component.d.ts +1 -1
- package/table/toolbar/table-toolbar.component.d.ts +1 -1
- package/ui-shell/header/header.component.d.ts +1 -1
- package/ui-shell/sidenav/sidenav.component.d.ts +1 -1
- package/docs/storybook/3348.08aa935e.iframe.bundle.js +0 -1
- package/docs/storybook/5868.1bac16a6.iframe.bundle.js +0 -1
- package/docs/storybook/contained-list-contained-list-stories.f866c774.iframe.bundle.js +0 -1
- package/docs/storybook/main.7e102918.iframe.bundle.js +0 -1
|
@@ -26,81 +26,81 @@
|
|
|
26
26
|
</g>
|
|
27
27
|
<g id="clust6" class="cluster">
|
|
28
28
|
<title>cluster_TooltipModule_exports</title>
|
|
29
|
-
<polygon fill="none" stroke="black" points="
|
|
30
|
-
</g>
|
|
31
|
-
<g id="clust2" class="cluster">
|
|
32
|
-
<title>cluster_TooltipModule_declarations</title>
|
|
33
|
-
<polygon fill="none" stroke="black" points="210,-78 210,-130 416,-130 416,-78 210,-78"/>
|
|
29
|
+
<polygon fill="none" stroke="black" points="131,-208 131,-260 343,-260 343,-208 131,-208"/>
|
|
34
30
|
</g>
|
|
35
31
|
<g id="clust5" class="cluster">
|
|
36
32
|
<title>cluster_TooltipModule_imports</title>
|
|
37
|
-
<polygon fill="none" stroke="black" points="
|
|
33
|
+
<polygon fill="none" stroke="black" points="294,-78 294,-130 416,-130 416,-78 294,-78"/>
|
|
34
|
+
</g>
|
|
35
|
+
<g id="clust2" class="cluster">
|
|
36
|
+
<title>cluster_TooltipModule_declarations</title>
|
|
37
|
+
<polygon fill="none" stroke="black" points="80,-78 80,-130 286,-130 286,-78 80,-78"/>
|
|
38
38
|
</g>
|
|
39
39
|
<!-- Tooltip -->
|
|
40
40
|
<g id="node1" class="node">
|
|
41
41
|
<title>Tooltip</title>
|
|
42
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
43
|
-
<text text-anchor="middle" x="
|
|
42
|
+
<polygon fill="#ffffb3" stroke="black" points="277.72,-122 220.28,-122 220.28,-86 277.72,-86 277.72,-122"/>
|
|
43
|
+
<text text-anchor="middle" x="249" y="-99.8" font-family="Times,serif" font-size="14.00">Tooltip</text>
|
|
44
44
|
</g>
|
|
45
45
|
<!-- TooltipModule -->
|
|
46
46
|
<g id="node3" class="node">
|
|
47
47
|
<title>TooltipModule</title>
|
|
48
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
49
|
-
<text text-anchor="middle" x="
|
|
48
|
+
<polygon fill="#8dd3c7" stroke="black" points="299.27,-187 296.27,-191 275.27,-191 272.27,-187 198.73,-187 198.73,-151 299.27,-151 299.27,-187"/>
|
|
49
|
+
<text text-anchor="middle" x="249" y="-164.8" font-family="Times,serif" font-size="14.00">TooltipModule</text>
|
|
50
50
|
</g>
|
|
51
51
|
<!-- Tooltip->TooltipModule -->
|
|
52
52
|
<g id="edge1" class="edge">
|
|
53
53
|
<title>Tooltip->TooltipModule</title>
|
|
54
|
-
<path fill="none" stroke="black" d="
|
|
55
|
-
<polygon fill="black" stroke="black" points="
|
|
54
|
+
<path fill="none" stroke="black" d="M249,-122.11C249,-122.11 249,-140.99 249,-140.99"/>
|
|
55
|
+
<polygon fill="black" stroke="black" points="245.5,-140.99 249,-150.99 252.5,-140.99 245.5,-140.99"/>
|
|
56
56
|
</g>
|
|
57
57
|
<!-- TooltipDefinition -->
|
|
58
58
|
<g id="node2" class="node">
|
|
59
59
|
<title>TooltipDefinition</title>
|
|
60
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
61
|
-
<text text-anchor="middle" x="
|
|
60
|
+
<polygon fill="#ffffb3" stroke="black" points="202.27,-122 87.73,-122 87.73,-86 202.27,-86 202.27,-122"/>
|
|
61
|
+
<text text-anchor="middle" x="145" y="-99.8" font-family="Times,serif" font-size="14.00">TooltipDefinition</text>
|
|
62
62
|
</g>
|
|
63
63
|
<!-- TooltipDefinition->TooltipModule -->
|
|
64
64
|
<g id="edge2" class="edge">
|
|
65
65
|
<title>TooltipDefinition->TooltipModule</title>
|
|
66
|
-
<path fill="none" stroke="black" d="
|
|
67
|
-
<polygon fill="black" stroke="black" points="
|
|
66
|
+
<path fill="none" stroke="black" d="M202.43,-104C207.86,-104 211.39,-104 211.39,-104 211.39,-104 211.39,-140.89 211.39,-140.89"/>
|
|
67
|
+
<polygon fill="black" stroke="black" points="207.89,-140.89 211.39,-150.89 214.89,-140.89 207.89,-140.89"/>
|
|
68
68
|
</g>
|
|
69
69
|
<!-- Tooltip -->
|
|
70
70
|
<g id="node5" class="node">
|
|
71
71
|
<title>Tooltip </title>
|
|
72
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
73
|
-
<text text-anchor="middle" x="
|
|
72
|
+
<polygon fill="#fb8072" stroke="black" points="335.23,-252 274.77,-252 274.77,-216 335.23,-216 335.23,-252"/>
|
|
73
|
+
<text text-anchor="middle" x="305" y="-229.8" font-family="Times,serif" font-size="14.00">Tooltip </text>
|
|
74
74
|
</g>
|
|
75
75
|
<!-- TooltipModule->Tooltip -->
|
|
76
76
|
<g id="edge4" class="edge">
|
|
77
77
|
<title>TooltipModule->Tooltip </title>
|
|
78
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
79
|
-
<polygon fill="black" stroke="black" points="
|
|
78
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M287.01,-187.11C287.01,-187.11 287.01,-205.99 287.01,-205.99"/>
|
|
79
|
+
<polygon fill="black" stroke="black" points="283.51,-205.99 287.01,-215.99 290.51,-205.99 283.51,-205.99"/>
|
|
80
80
|
</g>
|
|
81
81
|
<!-- TooltipDefinition -->
|
|
82
82
|
<g id="node6" class="node">
|
|
83
83
|
<title>TooltipDefinition </title>
|
|
84
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
85
|
-
<text text-anchor="middle" x="
|
|
84
|
+
<polygon fill="#fb8072" stroke="black" points="257.27,-252 138.73,-252 138.73,-216 257.27,-216 257.27,-252"/>
|
|
85
|
+
<text text-anchor="middle" x="198" y="-229.8" font-family="Times,serif" font-size="14.00">TooltipDefinition </text>
|
|
86
86
|
</g>
|
|
87
87
|
<!-- TooltipModule->TooltipDefinition -->
|
|
88
88
|
<g id="edge5" class="edge">
|
|
89
89
|
<title>TooltipModule->TooltipDefinition </title>
|
|
90
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
91
|
-
<polygon fill="black" stroke="black" points="
|
|
90
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.87,-187.11C227.87,-187.11 227.87,-205.99 227.87,-205.99"/>
|
|
91
|
+
<polygon fill="black" stroke="black" points="224.37,-205.99 227.87,-215.99 231.37,-205.99 224.37,-205.99"/>
|
|
92
92
|
</g>
|
|
93
93
|
<!-- PopoverModule -->
|
|
94
94
|
<g id="node4" class="node">
|
|
95
95
|
<title>PopoverModule</title>
|
|
96
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
97
|
-
<text text-anchor="middle" x="
|
|
96
|
+
<polygon fill="#8dd3c7" stroke="black" points="408.21,-122 405.21,-126 384.21,-126 381.21,-122 301.79,-122 301.79,-86 408.21,-86 408.21,-122"/>
|
|
97
|
+
<text text-anchor="middle" x="355" y="-99.8" font-family="Times,serif" font-size="14.00">PopoverModule</text>
|
|
98
98
|
</g>
|
|
99
99
|
<!-- PopoverModule->TooltipModule -->
|
|
100
100
|
<g id="edge3" class="edge">
|
|
101
101
|
<title>PopoverModule->TooltipModule</title>
|
|
102
|
-
<path fill="none" stroke="black" d="
|
|
103
|
-
<polygon fill="black" stroke="black" points="
|
|
102
|
+
<path fill="none" stroke="black" d="M301.64,-104C293.91,-104 288.5,-104 288.5,-104 288.5,-104 288.5,-140.89 288.5,-140.89"/>
|
|
103
|
+
<polygon fill="black" stroke="black" points="285,-140.89 288.5,-150.89 292,-140.89 285,-140.89"/>
|
|
104
104
|
</g>
|
|
105
105
|
</g>
|
|
106
106
|
</svg>
|
|
@@ -68,81 +68,81 @@
|
|
|
68
68
|
</g>
|
|
69
69
|
<g id="clust6" class="cluster">
|
|
70
70
|
<title>cluster_TooltipModule_exports</title>
|
|
71
|
-
<polygon fill="none" stroke="black" points="
|
|
72
|
-
</g>
|
|
73
|
-
<g id="clust2" class="cluster">
|
|
74
|
-
<title>cluster_TooltipModule_declarations</title>
|
|
75
|
-
<polygon fill="none" stroke="black" points="210,-78 210,-130 416,-130 416,-78 210,-78"/>
|
|
71
|
+
<polygon fill="none" stroke="black" points="131,-208 131,-260 343,-260 343,-208 131,-208"/>
|
|
76
72
|
</g>
|
|
77
73
|
<g id="clust5" class="cluster">
|
|
78
74
|
<title>cluster_TooltipModule_imports</title>
|
|
79
|
-
<polygon fill="none" stroke="black" points="
|
|
75
|
+
<polygon fill="none" stroke="black" points="294,-78 294,-130 416,-130 416,-78 294,-78"/>
|
|
76
|
+
</g>
|
|
77
|
+
<g id="clust2" class="cluster">
|
|
78
|
+
<title>cluster_TooltipModule_declarations</title>
|
|
79
|
+
<polygon fill="none" stroke="black" points="80,-78 80,-130 286,-130 286,-78 80,-78"/>
|
|
80
80
|
</g>
|
|
81
81
|
<!-- Tooltip -->
|
|
82
82
|
<g id="node1" class="node">
|
|
83
83
|
<title>Tooltip</title>
|
|
84
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
85
|
-
<text text-anchor="middle" x="
|
|
84
|
+
<polygon fill="#ffffb3" stroke="black" points="277.72,-122 220.28,-122 220.28,-86 277.72,-86 277.72,-122"/>
|
|
85
|
+
<text text-anchor="middle" x="249" y="-99.8" font-family="Times,serif" font-size="14.00">Tooltip</text>
|
|
86
86
|
</g>
|
|
87
87
|
<!-- TooltipModule -->
|
|
88
88
|
<g id="node3" class="node">
|
|
89
89
|
<title>TooltipModule</title>
|
|
90
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
91
|
-
<text text-anchor="middle" x="
|
|
90
|
+
<polygon fill="#8dd3c7" stroke="black" points="299.27,-187 296.27,-191 275.27,-191 272.27,-187 198.73,-187 198.73,-151 299.27,-151 299.27,-187"/>
|
|
91
|
+
<text text-anchor="middle" x="249" y="-164.8" font-family="Times,serif" font-size="14.00">TooltipModule</text>
|
|
92
92
|
</g>
|
|
93
93
|
<!-- Tooltip->TooltipModule -->
|
|
94
94
|
<g id="edge1" class="edge">
|
|
95
95
|
<title>Tooltip->TooltipModule</title>
|
|
96
|
-
<path fill="none" stroke="black" d="
|
|
97
|
-
<polygon fill="black" stroke="black" points="
|
|
96
|
+
<path fill="none" stroke="black" d="M249,-122.11C249,-122.11 249,-140.99 249,-140.99"/>
|
|
97
|
+
<polygon fill="black" stroke="black" points="245.5,-140.99 249,-150.99 252.5,-140.99 245.5,-140.99"/>
|
|
98
98
|
</g>
|
|
99
99
|
<!-- TooltipDefinition -->
|
|
100
100
|
<g id="node2" class="node">
|
|
101
101
|
<title>TooltipDefinition</title>
|
|
102
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
103
|
-
<text text-anchor="middle" x="
|
|
102
|
+
<polygon fill="#ffffb3" stroke="black" points="202.27,-122 87.73,-122 87.73,-86 202.27,-86 202.27,-122"/>
|
|
103
|
+
<text text-anchor="middle" x="145" y="-99.8" font-family="Times,serif" font-size="14.00">TooltipDefinition</text>
|
|
104
104
|
</g>
|
|
105
105
|
<!-- TooltipDefinition->TooltipModule -->
|
|
106
106
|
<g id="edge2" class="edge">
|
|
107
107
|
<title>TooltipDefinition->TooltipModule</title>
|
|
108
|
-
<path fill="none" stroke="black" d="
|
|
109
|
-
<polygon fill="black" stroke="black" points="
|
|
108
|
+
<path fill="none" stroke="black" d="M202.43,-104C207.86,-104 211.39,-104 211.39,-104 211.39,-104 211.39,-140.89 211.39,-140.89"/>
|
|
109
|
+
<polygon fill="black" stroke="black" points="207.89,-140.89 211.39,-150.89 214.89,-140.89 207.89,-140.89"/>
|
|
110
110
|
</g>
|
|
111
111
|
<!-- Tooltip -->
|
|
112
112
|
<g id="node5" class="node">
|
|
113
113
|
<title>Tooltip </title>
|
|
114
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
115
|
-
<text text-anchor="middle" x="
|
|
114
|
+
<polygon fill="#fb8072" stroke="black" points="335.23,-252 274.77,-252 274.77,-216 335.23,-216 335.23,-252"/>
|
|
115
|
+
<text text-anchor="middle" x="305" y="-229.8" font-family="Times,serif" font-size="14.00">Tooltip </text>
|
|
116
116
|
</g>
|
|
117
117
|
<!-- TooltipModule->Tooltip -->
|
|
118
118
|
<g id="edge4" class="edge">
|
|
119
119
|
<title>TooltipModule->Tooltip </title>
|
|
120
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
121
|
-
<polygon fill="black" stroke="black" points="
|
|
120
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M287.01,-187.11C287.01,-187.11 287.01,-205.99 287.01,-205.99"/>
|
|
121
|
+
<polygon fill="black" stroke="black" points="283.51,-205.99 287.01,-215.99 290.51,-205.99 283.51,-205.99"/>
|
|
122
122
|
</g>
|
|
123
123
|
<!-- TooltipDefinition -->
|
|
124
124
|
<g id="node6" class="node">
|
|
125
125
|
<title>TooltipDefinition </title>
|
|
126
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
127
|
-
<text text-anchor="middle" x="
|
|
126
|
+
<polygon fill="#fb8072" stroke="black" points="257.27,-252 138.73,-252 138.73,-216 257.27,-216 257.27,-252"/>
|
|
127
|
+
<text text-anchor="middle" x="198" y="-229.8" font-family="Times,serif" font-size="14.00">TooltipDefinition </text>
|
|
128
128
|
</g>
|
|
129
129
|
<!-- TooltipModule->TooltipDefinition -->
|
|
130
130
|
<g id="edge5" class="edge">
|
|
131
131
|
<title>TooltipModule->TooltipDefinition </title>
|
|
132
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
133
|
-
<polygon fill="black" stroke="black" points="
|
|
132
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.87,-187.11C227.87,-187.11 227.87,-205.99 227.87,-205.99"/>
|
|
133
|
+
<polygon fill="black" stroke="black" points="224.37,-205.99 227.87,-215.99 231.37,-205.99 224.37,-205.99"/>
|
|
134
134
|
</g>
|
|
135
135
|
<!-- PopoverModule -->
|
|
136
136
|
<g id="node4" class="node">
|
|
137
137
|
<title>PopoverModule</title>
|
|
138
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
139
|
-
<text text-anchor="middle" x="
|
|
138
|
+
<polygon fill="#8dd3c7" stroke="black" points="408.21,-122 405.21,-126 384.21,-126 381.21,-122 301.79,-122 301.79,-86 408.21,-86 408.21,-122"/>
|
|
139
|
+
<text text-anchor="middle" x="355" y="-99.8" font-family="Times,serif" font-size="14.00">PopoverModule</text>
|
|
140
140
|
</g>
|
|
141
141
|
<!-- PopoverModule->TooltipModule -->
|
|
142
142
|
<g id="edge3" class="edge">
|
|
143
143
|
<title>PopoverModule->TooltipModule</title>
|
|
144
|
-
<path fill="none" stroke="black" d="
|
|
145
|
-
<polygon fill="black" stroke="black" points="
|
|
144
|
+
<path fill="none" stroke="black" d="M301.64,-104C293.91,-104 288.5,-104 288.5,-104 288.5,-104 288.5,-140.89 288.5,-140.89"/>
|
|
145
|
+
<polygon fill="black" stroke="black" points="285,-140.89 288.5,-150.89 292,-140.89 285,-140.89"/>
|
|
146
146
|
</g>
|
|
147
147
|
</g>
|
|
148
148
|
</svg>
|
package/docs/documentation.json
CHANGED
|
@@ -23351,7 +23351,7 @@
|
|
|
23351
23351
|
},
|
|
23352
23352
|
{
|
|
23353
23353
|
"name": "ContainedListItem",
|
|
23354
|
-
"id": "component-ContainedListItem-
|
|
23354
|
+
"id": "component-ContainedListItem-31943b9af4d83104929b28de8b28b09104361b72f05f905750cf9301124d6621db5639b7b6c7f3f5342e45600a7fbbbc58607fc3024802c289c196a3ca1b551b",
|
|
23355
23355
|
"file": "src/contained-list/contained-list-item.component.ts",
|
|
23356
23356
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
23357
23357
|
"encapsulation": [],
|
|
@@ -23362,7 +23362,7 @@
|
|
|
23362
23362
|
"selector": "cds-contained-list-item, ibm-contained-list-item",
|
|
23363
23363
|
"styleUrls": [],
|
|
23364
23364
|
"styles": [],
|
|
23365
|
-
"template": "<ng-container *ngIf=\"clickable\">\n\t<button\n\t\tclass=\"cds--contained-list-item__content\"\n\t\ttype=\"button\"\n\t\t[disabled]=\"disabled\"\n\t\t(click)=\"onClick()\">\n\t\t<ng-content select=\"[ibmContainedListItemButton]\"></ng-content>\n\t</button>\n</ng-container>\n<ng-container *ngIf=\"!clickable\">\n\t<div class=\"cds--contained-list-item__content\">\n\t\t<div *ngIf=\"icon\" class=\"cds--contained-list-item__icon\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(icon)\"><svg [ibmIcon]=\"icon\" size=\"16\"></svg></ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</div>\n</ng-container>\n<div class=\"cds--contained-list-item__action\" *ngIf=\"action\">\n\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n</div>\n\t",
|
|
23365
|
+
"template": "<ng-container *ngIf=\"clickable\">\n\t<button\n\t\tclass=\"cds--contained-list-item__content\"\n\t\ttype=\"button\"\n\t\t[disabled]=\"disabled\"\n\t\t(click)=\"onClick()\">\n\t\t<ng-content select=\"[cdsContainedListItemButton],[ibmContainedListItemButton]\"></ng-content>\n\t</button>\n</ng-container>\n<ng-container *ngIf=\"!clickable\">\n\t<div class=\"cds--contained-list-item__content\">\n\t\t<div *ngIf=\"icon\" class=\"cds--contained-list-item__icon\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(icon)\"><svg [ibmIcon]=\"icon\" size=\"16\"></svg></ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</div>\n</ng-container>\n<div class=\"cds--contained-list-item__action\" *ngIf=\"action\">\n\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n</div>\n\t",
|
|
23366
23366
|
"templateUrl": [],
|
|
23367
23367
|
"viewProviders": [],
|
|
23368
23368
|
"hostDirectives": [],
|
|
@@ -23561,7 +23561,7 @@
|
|
|
23561
23561
|
"description": "",
|
|
23562
23562
|
"rawdescription": "\n",
|
|
23563
23563
|
"type": "component",
|
|
23564
|
-
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tTemplateRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-contained-list-item, ibm-contained-list-item\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"clickable\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--contained-list-item__content\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(click)=\"onClick()\">\n\t\t\t\t<ng-content select=\"[ibmContainedListItemButton]\"></ng-content>\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngIf=\"!clickable\">\n\t\t\t<div class=\"cds--contained-list-item__content\">\n\t\t\t\t<div *ngIf=\"icon\" class=\"cds--contained-list-item__icon\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(icon)\"><svg [ibmIcon]=\"icon\" size=\"16\"></svg></ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<div class=\"cds--contained-list-item__action\" *ngIf=\"action\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedListItem {\n\t/**\n\t * A slot for a possible interactive element to render within the item.\n\t */\n\t@Input() action: TemplateRef<any>;\n\n\t/**\n\t * Whether this item is disabled.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Whether this item is clickable.\n\t */\n\t@Input() clickable: boolean;\n\n\t/**\n\t * Provide an optional icon to render in front of the item's content.\n\t *\n\t * Note that if you intend to use this as a string ref, it's important to remember\n\t * to register the icon that you wish to add. In this case, it's also worth noting\n\t * that only icons with a size of 16 are currently supported.\n\t */\n\t@Input() icon: TemplateRef<any> | string;\n\n\t/**\n\t * Emits click event.\n\t */\n\t@Output() click = new EventEmitter<void>();\n\n\t/**\n\t * Host binding item class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item\") itemClass = true;\n\n\t/**\n\t * Host binding item role attribute\n\t */\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t/**\n\t * Host binding clickable item class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item--clickable\") get itemClickableClass() {\n\t\treturn this.clickable;\n\t}\n\n\t/**\n\t * Host binding item with icon class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item--with-icon\") get itemWithIconClass() {\n\t\treturn !!this.icon;\n\t}\n\n\tpublic onClick() {\n\t\tthis.click.emit();\n\t}\n\n\tpublic isTemplate(value: string | TemplateRef<any>) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
23564
|
+
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tTemplateRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-contained-list-item, ibm-contained-list-item\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"clickable\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--contained-list-item__content\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(click)=\"onClick()\">\n\t\t\t\t<ng-content select=\"[cdsContainedListItemButton],[ibmContainedListItemButton]\"></ng-content>\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngIf=\"!clickable\">\n\t\t\t<div class=\"cds--contained-list-item__content\">\n\t\t\t\t<div *ngIf=\"icon\" class=\"cds--contained-list-item__icon\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(icon)\"><svg [ibmIcon]=\"icon\" size=\"16\"></svg></ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<div class=\"cds--contained-list-item__action\" *ngIf=\"action\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedListItem {\n\t/**\n\t * A slot for a possible interactive element to render within the item.\n\t */\n\t@Input() action: TemplateRef<any>;\n\n\t/**\n\t * Whether this item is disabled.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Whether this item is clickable.\n\t */\n\t@Input() clickable: boolean;\n\n\t/**\n\t * Provide an optional icon to render in front of the item's content.\n\t *\n\t * Note that if you intend to use this as a string ref, it's important to remember\n\t * to register the icon that you wish to add. In this case, it's also worth noting\n\t * that only icons with a size of 16 are currently supported.\n\t */\n\t@Input() icon: TemplateRef<any> | string;\n\n\t/**\n\t * Emits click event.\n\t */\n\t@Output() click = new EventEmitter<void>();\n\n\t/**\n\t * Host binding item class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item\") itemClass = true;\n\n\t/**\n\t * Host binding item role attribute\n\t */\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t/**\n\t * Host binding clickable item class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item--clickable\") get itemClickableClass() {\n\t\treturn this.clickable;\n\t}\n\n\t/**\n\t * Host binding item with icon class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item--with-icon\") get itemWithIconClass() {\n\t\treturn !!this.icon;\n\t}\n\n\tpublic onClick() {\n\t\tthis.click.emit();\n\t}\n\n\tpublic isTemplate(value: string | TemplateRef<any>) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
23565
23565
|
"assetsDirs": [],
|
|
23566
23566
|
"styleUrlsData": "",
|
|
23567
23567
|
"stylesData": "",
|
|
@@ -31509,7 +31509,7 @@
|
|
|
31509
31509
|
},
|
|
31510
31510
|
{
|
|
31511
31511
|
"name": "Header",
|
|
31512
|
-
"id": "component-Header-
|
|
31512
|
+
"id": "component-Header-930a61521b927a898b9ca6f9dce213bc8ec54e57c3feb940a8bdb589b75370b852704027839a2361b8ccadecc20f7fe213d26ecadc872d4841b6df7dde919842",
|
|
31513
31513
|
"file": "src/ui-shell/header/header.component.ts",
|
|
31514
31514
|
"encapsulation": [],
|
|
31515
31515
|
"entryComponents": [],
|
|
@@ -31519,7 +31519,7 @@
|
|
|
31519
31519
|
"selector": "cds-header, ibm-header",
|
|
31520
31520
|
"styleUrls": [],
|
|
31521
31521
|
"styles": [],
|
|
31522
|
-
"template": "<header\n\tclass=\"cds--header\"\n\t[attr.aria-label]=\"brand + ' ' + name\">\n\t<a\n\t\t*ngIf=\"skipTo\"\n\t\tclass=\"cds--skip-to-content\"\n\t\t[href]=\"skipTo\"\n\t\ttabindex=\"0\">\n\t\t{{ i18n.get(\"UI_SHELL.SKIP_TO\") | async }}\n\t</a>\n\t<ng-content select=\"cds-hamburger\"></ng-content>\n\t<ng-template\n\t\t*ngIf=\"isTemplate(brand)\"\n\t\t[ngTemplateOutlet]=\"brand\">\n\t</ng-template>\n\t<ng-container *ngIf=\"!isTemplate(brand)\" [ngSwitch]=\"useRouter\">\n\t\t<a\n\t\t\t*ngSwitchCase=\"false\"\n\t\t\tclass=\"cds--header__name\"\n\t\t\t[href]=\"href\"\n\t\t\t(click)=\"navigate($event)\">\n\t\t\t<span class=\"cds--header__name--prefix\">{{brand}} </span>\n\t\t\t{{name}}\n\t\t</a>\n\t\t<a\n\t\t\t*ngSwitchCase=\"true\"\n\t\t\tclass=\"cds--header__name\"\n\t\t\t[routerLink]=\"route\">\n\t\t\t<span class=\"cds--header__name--prefix\">{{brand}} </span>\n\t\t\t{{name}}\n\t\t</a>\n\t</ng-container>\n\t<ng-content></ng-content>\n</header>\n\t",
|
|
31522
|
+
"template": "<header\n\tclass=\"cds--header\"\n\t[attr.aria-label]=\"brand + ' ' + name\">\n\t<a\n\t\t*ngIf=\"skipTo\"\n\t\tclass=\"cds--skip-to-content\"\n\t\t[href]=\"skipTo\"\n\t\ttabindex=\"0\">\n\t\t{{ i18n.get(\"UI_SHELL.SKIP_TO\") | async }}\n\t</a>\n\t<ng-content select=\"cds-hamburger,ibm-hamburger\"></ng-content>\n\t<ng-template\n\t\t*ngIf=\"isTemplate(brand)\"\n\t\t[ngTemplateOutlet]=\"brand\">\n\t</ng-template>\n\t<ng-container *ngIf=\"!isTemplate(brand)\" [ngSwitch]=\"useRouter\">\n\t\t<a\n\t\t\t*ngSwitchCase=\"false\"\n\t\t\tclass=\"cds--header__name\"\n\t\t\t[href]=\"href\"\n\t\t\t(click)=\"navigate($event)\">\n\t\t\t<span class=\"cds--header__name--prefix\">{{brand}} </span>\n\t\t\t{{name}}\n\t\t</a>\n\t\t<a\n\t\t\t*ngSwitchCase=\"true\"\n\t\t\tclass=\"cds--header__name\"\n\t\t\t[routerLink]=\"route\">\n\t\t\t<span class=\"cds--header__name--prefix\">{{brand}} </span>\n\t\t\t{{name}}\n\t\t</a>\n\t</ng-container>\n\t<ng-content></ng-content>\n</header>\n\t",
|
|
31523
31523
|
"templateUrl": [],
|
|
31524
31524
|
"viewProviders": [],
|
|
31525
31525
|
"hostDirectives": [],
|
|
@@ -31693,7 +31693,7 @@
|
|
|
31693
31693
|
"description": "<p>A fixed header and navigation.\nHeader may contain a Hamburger menu to toggle the side navigation, navigation actions,\nand global actions (generally in the form of <code>Panel</code>s).</p>\n<p><a href=\"../../?path=/story/components-ui-shell--header\">See demo</a></p>\n",
|
|
31694
31694
|
"rawdescription": "\n\nA fixed header and navigation.\nHeader may contain a Hamburger menu to toggle the side navigation, navigation actions,\nand global actions (generally in the form of `Panel`s).\n\n[See demo](../../?path=/story/components-ui-shell--header)\n",
|
|
31695
31695
|
"type": "component",
|
|
31696
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A fixed header and navigation.\n * Header may contain a Hamburger menu to toggle the side navigation, navigation actions,\n * and global actions (generally in the form of `Panel`s).\n *\n * [See demo](../../?path=/story/components-ui-shell--header)\n */\n@Component({\n\tselector: \"cds-header, ibm-header\",\n\ttemplate: `\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\"></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}} </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}} </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`\n})\nexport class Header {\n\t/**\n\t * ID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content.\n\t */\n\t@Input() skipTo: string;\n\t/**\n\t * Label that shows to the right of the `brand` text. Generally a product name.\n\t */\n\t@Input() name: string;\n\t/**\n\t * Top level branding. Defaults to \"IBM\"\n\t */\n\t@Input() brand: string | TemplateRef<any> = \"IBM\";\n\t/**\n\t * Optional link for the header\n\t */\n\t@Input() set href(v: string) {\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\tprotected _href = \"#\";\n\n\tconstructor(\n\t\tpublic i18n: I18n,\n\t\tprotected domSanitizer: DomSanitizer,\n\t\t@Optional() protected router: Router) { }\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
|
|
31696
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A fixed header and navigation.\n * Header may contain a Hamburger menu to toggle the side navigation, navigation actions,\n * and global actions (generally in the form of `Panel`s).\n *\n * [See demo](../../?path=/story/components-ui-shell--header)\n */\n@Component({\n\tselector: \"cds-header, ibm-header\",\n\ttemplate: `\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}} </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}} </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`\n})\nexport class Header {\n\t/**\n\t * ID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content.\n\t */\n\t@Input() skipTo: string;\n\t/**\n\t * Label that shows to the right of the `brand` text. Generally a product name.\n\t */\n\t@Input() name: string;\n\t/**\n\t * Top level branding. Defaults to \"IBM\"\n\t */\n\t@Input() brand: string | TemplateRef<any> = \"IBM\";\n\t/**\n\t * Optional link for the header\n\t */\n\t@Input() set href(v: string) {\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\tprotected _href = \"#\";\n\n\tconstructor(\n\t\tpublic i18n: I18n,\n\t\tprotected domSanitizer: DomSanitizer,\n\t\t@Optional() protected router: Router) { }\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
|
|
31697
31697
|
"assetsDirs": [],
|
|
31698
31698
|
"styleUrlsData": "",
|
|
31699
31699
|
"stylesData": "",
|
|
@@ -46812,7 +46812,7 @@
|
|
|
46812
46812
|
},
|
|
46813
46813
|
{
|
|
46814
46814
|
"name": "SideNav",
|
|
46815
|
-
"id": "component-SideNav-
|
|
46815
|
+
"id": "component-SideNav-971427ecce046bab5c1bdd9e2f7411e3be9f461ffba908ae1c2a5321187f6178a1de8d126c1af993ad111ea2371d09751394ffda32787aa5a36762a98a5e6a72",
|
|
46816
46816
|
"file": "src/ui-shell/sidenav/sidenav.component.ts",
|
|
46817
46817
|
"encapsulation": [
|
|
46818
46818
|
"ViewEncapsulation.None"
|
|
@@ -46824,7 +46824,7 @@
|
|
|
46824
46824
|
"selector": "cds-sidenav, ibm-sidenav",
|
|
46825
46825
|
"styleUrls": [],
|
|
46826
46826
|
"styles": [],
|
|
46827
|
-
"template": "<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t<ng-content select=\"cds-sidenav-header\"></ng-content>\n\t<div role=\"list\">\n\t\t<div class=\"cds--side-nav__header-navigation cds--side-nav__header-divider\">\n\t\t\t<ng-container *ngFor=\"let navigationItem of navigationItems\">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'item'\"\n\t\t\t\t\t[href]=\"navigationItem.href\"\n\t\t\t\t\t[route]=\"navigationItem.route\"\n\t\t\t\t\t[routeExtras]=\"navigationItem.routeExtras\"\n\t\t\t\t\t[title]=\"navigationItem.title\">\n\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'menu'\"\n\t\t\t\t\t[title]=\"navigationItem.title\"\n\t\t\t\t\t[menuItems]=\"navigationItem.menuItems\">\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<footer class=\"cds--side-nav__footer\">\n\t\t<button\n\t\t\t*ngIf=\"allowExpansion\"\n\t\t\tclass=\"cds--side-nav__toggle\"\n\t\t\ttype=\"button\"\n\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(click)=\"toggle()\">\n\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"expanded\"\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=\"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</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!expanded\"\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=\"M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--assistive-text\">\n\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</span>\n\t\t</button>\n\t</footer>\n</nav>\n\t",
|
|
46827
|
+
"template": "<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t<ng-content select=\"cds-sidenav-header,ibm-sidenav-header\"></ng-content>\n\t<div role=\"list\">\n\t\t<div class=\"cds--side-nav__header-navigation cds--side-nav__header-divider\">\n\t\t\t<ng-container *ngFor=\"let navigationItem of navigationItems\">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'item'\"\n\t\t\t\t\t[href]=\"navigationItem.href\"\n\t\t\t\t\t[route]=\"navigationItem.route\"\n\t\t\t\t\t[routeExtras]=\"navigationItem.routeExtras\"\n\t\t\t\t\t[title]=\"navigationItem.title\">\n\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'menu'\"\n\t\t\t\t\t[title]=\"navigationItem.title\"\n\t\t\t\t\t[menuItems]=\"navigationItem.menuItems\">\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<footer class=\"cds--side-nav__footer\">\n\t\t<button\n\t\t\t*ngIf=\"allowExpansion\"\n\t\t\tclass=\"cds--side-nav__toggle\"\n\t\t\ttype=\"button\"\n\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(click)=\"toggle()\">\n\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"expanded\"\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=\"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</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!expanded\"\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=\"M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--assistive-text\">\n\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</span>\n\t\t</button>\n\t</footer>\n</nav>\n\t",
|
|
46828
46828
|
"templateUrl": [],
|
|
46829
46829
|
"viewProviders": [],
|
|
46830
46830
|
"hostDirectives": [],
|
|
@@ -46982,7 +46982,7 @@
|
|
|
46982
46982
|
"description": "<p><code>Sidenav</code> is a fixed left navigation that may contain <code>SideNavItem</code>s or <code>SideNavMenu</code>s</p>\n<p><a href=\"../../?path=/story/components-ui-shell--side-navigation\">See demo</a></p>\n",
|
|
46983
46983
|
"rawdescription": "\n\n`Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n\n[See demo](../../?path=/story/components-ui-shell--side-navigation)\n",
|
|
46984
46984
|
"type": "component",
|
|
46985
|
-
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NavigationItem } from \"../header/header-navigation-items.interface\";\n\n/**\n * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n *\n * [See demo](../../?path=/story/components-ui-shell--side-navigation)\n */\n@Component({\n\tselector: \"cds-sidenav, ibm-sidenav\",\n\ttemplate: `\n\t\t<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t\t\t<ng-content select=\"cds-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`,\n\tencapsulation: ViewEncapsulation.None\n})\nexport class SideNav {\n\t@HostBinding(\"class.cds--side-nav\") hostClass = true;\n\t@Input() ariaLabel = \"Side navigation\";\n\t/**\n\t * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n\t */\n\t@HostBinding(\"class.cds--side-nav--expanded\") @Input() expanded = true;\n\t/**\n\t * Controls the hidden (`true`) or visible (`false`) state\n\t */\n\t@HostBinding(\"class.cds--side-nav--hidden\") @Input() hidden = false;\n\t@HostBinding(\"class.cds--side-nav--rail\") @Input() rail = false;\n\t@HostBinding(\"class.cds--side-nav__navigation\") ux = true;\n\t@Input() allowExpansion = false;\n\n\t/**\n\t * NavigationItems from the header navigation component which are displayed on the sidenav when the window\n\t * innerWidth is small enough. Sidenav items and menus are created using the model used to create header\n\t * navigation items.\n\t */\n\t@Input() navigationItems: NavigationItem[];\n\n\tconstructor(public i18n: I18n) { }\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n}\n",
|
|
46985
|
+
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NavigationItem } from \"../header/header-navigation-items.interface\";\n\n/**\n * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n *\n * [See demo](../../?path=/story/components-ui-shell--side-navigation)\n */\n@Component({\n\tselector: \"cds-sidenav, ibm-sidenav\",\n\ttemplate: `\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`,\n\tencapsulation: ViewEncapsulation.None\n})\nexport class SideNav {\n\t@HostBinding(\"class.cds--side-nav\") hostClass = true;\n\t@Input() ariaLabel = \"Side navigation\";\n\t/**\n\t * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n\t */\n\t@HostBinding(\"class.cds--side-nav--expanded\") @Input() expanded = true;\n\t/**\n\t * Controls the hidden (`true`) or visible (`false`) state\n\t */\n\t@HostBinding(\"class.cds--side-nav--hidden\") @Input() hidden = false;\n\t@HostBinding(\"class.cds--side-nav--rail\") @Input() rail = false;\n\t@HostBinding(\"class.cds--side-nav__navigation\") ux = true;\n\t@Input() allowExpansion = false;\n\n\t/**\n\t * NavigationItems from the header navigation component which are displayed on the sidenav when the window\n\t * innerWidth is small enough. Sidenav items and menus are created using the model used to create header\n\t * navigation items.\n\t */\n\t@Input() navigationItems: NavigationItem[];\n\n\tconstructor(public i18n: I18n) { }\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n}\n",
|
|
46986
46986
|
"assetsDirs": [],
|
|
46987
46987
|
"styleUrlsData": "",
|
|
46988
46988
|
"stylesData": "",
|
|
@@ -48973,7 +48973,7 @@
|
|
|
48973
48973
|
},
|
|
48974
48974
|
{
|
|
48975
48975
|
"name": "StructuredList",
|
|
48976
|
-
"id": "component-StructuredList-
|
|
48976
|
+
"id": "component-StructuredList-35858076e94e3f5438c7c28e0f9ea82cc5ee1115d7062b3524bd912c21c5c5f4f8efc4c37947e917f24ba8f5b587b502e4229182fabf43829e7f11d15b0fcaf2",
|
|
48977
48977
|
"file": "src/structured-list/structured-list.component.ts",
|
|
48978
48978
|
"encapsulation": [],
|
|
48979
48979
|
"entryComponents": [],
|
|
@@ -48987,7 +48987,7 @@
|
|
|
48987
48987
|
"selector": "cds-structured-list, ibm-structured-list",
|
|
48988
48988
|
"styleUrls": [],
|
|
48989
48989
|
"styles": [],
|
|
48990
|
-
"template": "<div\n\tclass=\"cds--structured-list\"\n\trole=\"table\"\n\t[ngClass]=\"{\n\t\t'cds--structured-list--flush': flushed,\n\t\t'cds--structured-list--selection': selection,\n\t\t'cds--structured-list--condensed': condensed,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-content select=\"cds-list-header\"></ng-content>\n\t<div class=\"cds--structured-list-tbody\" role=\"rowgroup\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\t",
|
|
48990
|
+
"template": "<div\n\tclass=\"cds--structured-list\"\n\trole=\"table\"\n\t[ngClass]=\"{\n\t\t'cds--structured-list--flush': flushed,\n\t\t'cds--structured-list--selection': selection,\n\t\t'cds--structured-list--condensed': condensed,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-content select=\"cds-list-header,ibm-list-header\"></ng-content>\n\t<div class=\"cds--structured-list-tbody\" role=\"rowgroup\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\t",
|
|
48991
48991
|
"templateUrl": [],
|
|
48992
48992
|
"viewProviders": [],
|
|
48993
48993
|
"hostDirectives": [],
|
|
@@ -49226,7 +49226,7 @@
|
|
|
49226
49226
|
"description": "<p>Structured Lists represent related tabular data. For larger datasets consider a full <code>Table</code>.</p>\n<p><a href=\"../../?path=/story/components-structured-list--basic\">See demo</a></p>\n<p>See <a href=\"https://www.carbondesignsystem.com/components/structured-list/usage\">structured-list/usage</a> for usage guidance.</p>\n<p>A basic structued list looks something like:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\"> <cds-structured-list>\n <cds-list-header>\n <cds-list-column nowrap="true">Column 1</cds-list-column>\n <cds-list-column nowrap="true">Column 2</cds-list-column>\n <cds-list-column>Column 3</cds-list-column>\n </cds-list-header>\n <cds-list-row>\n <cds-list-column>Row 1</cds-list-column>\n <cds-list-column nowrap="true">Row One</cds-list-column>\n <cds-list-column>\n Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nunc dui magna,\n finibus id tortor sed, aliquet bibendum augue.\n Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n Pellentesque vulputate nisl a porttitor interdum.\n </cds-list-column>\n </cds-list-row>\n <cds-list-row>\n <cds-list-column>Row 2</cds-list-column>\n <cds-list-column nowrap="true">Row Two</cds-list-column>\n <cds-list-column>\n Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nunc dui magna,\n finibus id tortor sed, aliquet bibendum augue.\n Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n Pellentesque vulputate nisl a porttitor interdum.\n </cds-list-column>\n </cds-list-row>\n </cds-structured-list></code></pre></div>",
|
|
49227
49227
|
"rawdescription": "\n\nStructured Lists represent related tabular data. For larger datasets consider a full `Table`.\n\n[See demo](../../?path=/story/components-structured-list--basic)\n\nSee [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n\nA basic structued list looks something like:\n```html\n\t<cds-structured-list>\n\t\t<cds-list-header>\n\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t</cds-list-header>\n\t\t<cds-list-row>\n\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t<cds-list-column>\n\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t</cds-list-column>\n\t\t</cds-list-row>\n\t\t<cds-list-row>\n\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t<cds-list-column>\n\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t</cds-list-column>\n\t\t</cds-list-row>\n\t</cds-structured-list>\n```\n",
|
|
49228
49228
|
"type": "component",
|
|
49229
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { ListRow } from \"./list-row.component\";\nimport { ListHeader } from \"./list-header.component\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n/**\n * Structured Lists represent related tabular data. For larger datasets consider a full `Table`.\n *\n * [See demo](../../?path=/story/components-structured-list--basic)\n *\n * See [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n *\n * A basic structued list looks something like:\n * ```html\n *\t<cds-structured-list>\n *\t\t<cds-list-header>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n *\t\t\t<cds-list-column>Column 3</cds-list-column>\n *\t\t</cds-list-header>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 2</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t</cds-structured-list>\n * ```\n */\n@Component({\n\tselector: \"cds-structured-list, ibm-structured-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--structured-list\"\n\t\t\trole=\"table\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--structured-list--flush': flushed,\n\t\t\t\t'cds--structured-list--selection': selection,\n\t\t\t\t'cds--structured-list--condensed': condensed,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-content select=\"cds-list-header\"></ng-content>\n\t\t\t<div class=\"cds--structured-list-tbody\" role=\"rowgroup\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: StructuredList,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class StructuredList implements AfterContentInit, ControlValueAccessor {\n\t/**\n\t * A counter to provide unique default values.\n\t */\n\tstatic listCount = 0;\n\t/**\n\t * Set to `true` to enable radio like selection of the rows.\n\t */\n\t@Input() selection = false;\n\t/**\n\t * Set to `true` to align content with margin\n\t */\n\t@Input() flushed = false;\n\t/**\n\t * Set to `true` to apply a condensed style to the headers and rows.\n\t */\n\t@Input() condensed = false;\n\t/**\n\t * Used when `selection = true` as the row radio group `name`\n\t */\n\t@Input() name = `structured-list-${StructuredList.listCount++}`;\n\n\t/**\n\t * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n\t */\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `StructuredList` if there is one.\n\t */\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Emits an event when the row selection changes.\n\t *\n\t * Emits an object that looks like:\n\t * ```javascript\n\t * {\n\t * \tvalue: \"something\",\n\t * \tselected: true,\n\t * \tname: \"structured-list-1\"\n\t * }\n\t * ```\n\t */\n\t@Output() selected: EventEmitter<{value: string, selected: boolean, name: string}> = new EventEmitter();\n\n\t@ContentChildren(ListRow) rows: QueryList<ListRow>;\n\t@ContentChildren(ListHeader) headers: QueryList<ListHeader>;\n\n\tprotected _skeleton = false;\n\n\tonChange = (_: any) => { };\n\n\tonTouched = () => { };\n\n\tngAfterContentInit() {\n\t\tconst setSelection = (rowOrHeader: ListRow | ListHeader) => {\n\t\t\trowOrHeader.selection = this.selection;\n\t\t};\n\n\t\tthis.headers.forEach(setSelection);\n\t\tthis.rows.forEach(row => {\n\t\t\tsetSelection(row);\n\t\t\trow.name = this.name;\n\t\t\trow.tabindex = this.selection ? \"0\" : null;\n\t\t\trow.change.subscribe(() => {\n\t\t\t\tthis.selected.emit({\n\t\t\t\t\tvalue: row.value,\n\t\t\t\t\tselected: row.selected,\n\t\t\t\t\tname: this.name\n\t\t\t\t});\n\t\t\t\tthis.onChange(row.value);\n\t\t\t});\n\t\t});\n\t\tthis.updateChildren();\n\t}\n\n\twriteValue(value: any) {\n\t\tif (!this.rows) { return; }\n\t\tthis.rows.forEach(row => {\n\t\t\tif (row.value === value) {\n\t\t\t\trow.selected = true;\n\t\t\t} else {\n\t\t\t\trow.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.headers) {\n\t\t\tthis.headers.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n",
|
|
49229
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { ListRow } from \"./list-row.component\";\nimport { ListHeader } from \"./list-header.component\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n/**\n * Structured Lists represent related tabular data. For larger datasets consider a full `Table`.\n *\n * [See demo](../../?path=/story/components-structured-list--basic)\n *\n * See [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n *\n * A basic structued list looks something like:\n * ```html\n *\t<cds-structured-list>\n *\t\t<cds-list-header>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n *\t\t\t<cds-list-column>Column 3</cds-list-column>\n *\t\t</cds-list-header>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 2</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t</cds-structured-list>\n * ```\n */\n@Component({\n\tselector: \"cds-structured-list, ibm-structured-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--structured-list\"\n\t\t\trole=\"table\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--structured-list--flush': flushed,\n\t\t\t\t'cds--structured-list--selection': selection,\n\t\t\t\t'cds--structured-list--condensed': condensed,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-content select=\"cds-list-header,ibm-list-header\"></ng-content>\n\t\t\t<div class=\"cds--structured-list-tbody\" role=\"rowgroup\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: StructuredList,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class StructuredList implements AfterContentInit, ControlValueAccessor {\n\t/**\n\t * A counter to provide unique default values.\n\t */\n\tstatic listCount = 0;\n\t/**\n\t * Set to `true` to enable radio like selection of the rows.\n\t */\n\t@Input() selection = false;\n\t/**\n\t * Set to `true` to align content with margin\n\t */\n\t@Input() flushed = false;\n\t/**\n\t * Set to `true` to apply a condensed style to the headers and rows.\n\t */\n\t@Input() condensed = false;\n\t/**\n\t * Used when `selection = true` as the row radio group `name`\n\t */\n\t@Input() name = `structured-list-${StructuredList.listCount++}`;\n\n\t/**\n\t * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n\t */\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `StructuredList` if there is one.\n\t */\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Emits an event when the row selection changes.\n\t *\n\t * Emits an object that looks like:\n\t * ```javascript\n\t * {\n\t * \tvalue: \"something\",\n\t * \tselected: true,\n\t * \tname: \"structured-list-1\"\n\t * }\n\t * ```\n\t */\n\t@Output() selected: EventEmitter<{value: string, selected: boolean, name: string}> = new EventEmitter();\n\n\t@ContentChildren(ListRow) rows: QueryList<ListRow>;\n\t@ContentChildren(ListHeader) headers: QueryList<ListHeader>;\n\n\tprotected _skeleton = false;\n\n\tonChange = (_: any) => { };\n\n\tonTouched = () => { };\n\n\tngAfterContentInit() {\n\t\tconst setSelection = (rowOrHeader: ListRow | ListHeader) => {\n\t\t\trowOrHeader.selection = this.selection;\n\t\t};\n\n\t\tthis.headers.forEach(setSelection);\n\t\tthis.rows.forEach(row => {\n\t\t\tsetSelection(row);\n\t\t\trow.name = this.name;\n\t\t\trow.tabindex = this.selection ? \"0\" : null;\n\t\t\trow.change.subscribe(() => {\n\t\t\t\tthis.selected.emit({\n\t\t\t\t\tvalue: row.value,\n\t\t\t\t\tselected: row.selected,\n\t\t\t\t\tname: this.name\n\t\t\t\t});\n\t\t\t\tthis.onChange(row.value);\n\t\t\t});\n\t\t});\n\t\tthis.updateChildren();\n\t}\n\n\twriteValue(value: any) {\n\t\tif (!this.rows) { return; }\n\t\tthis.rows.forEach(row => {\n\t\t\tif (row.value === value) {\n\t\t\t\trow.selected = true;\n\t\t\t} else {\n\t\t\t\trow.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.headers) {\n\t\t\tthis.headers.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n",
|
|
49230
49230
|
"assetsDirs": [],
|
|
49231
49231
|
"styleUrlsData": "",
|
|
49232
49232
|
"stylesData": "",
|
|
@@ -56284,7 +56284,7 @@
|
|
|
56284
56284
|
},
|
|
56285
56285
|
{
|
|
56286
56286
|
"name": "TableToolbar",
|
|
56287
|
-
"id": "component-TableToolbar-
|
|
56287
|
+
"id": "component-TableToolbar-b51a195903743b90515552a8518515496e7298d569376537cc98797bb76cd26331b4c3215b71fb17ed1e35713861a906315cd526c97a9cb131c13f43068de8f9",
|
|
56288
56288
|
"file": "src/table/toolbar/table-toolbar.component.ts",
|
|
56289
56289
|
"encapsulation": [],
|
|
56290
56290
|
"entryComponents": [],
|
|
@@ -56294,7 +56294,7 @@
|
|
|
56294
56294
|
"selector": "cds-table-toolbar, ibm-table-toolbar",
|
|
56295
56295
|
"styleUrls": [],
|
|
56296
56296
|
"styles": [],
|
|
56297
|
-
"template": "<section\n\tclass=\"cds--table-toolbar\"\n\t[ngClass]=\"{'cds--table-toolbar--sm' : size === 'sm'}\"\n\t[attr.aria-label]=\"actionBarLabel.subject | async\">\n\t<div\n\t\t*ngIf=\"model\"\n\t\tclass=\"cds--batch-actions\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--batch-actions--active': selected\n\t\t}\">\n\t\t<div class=\"cds--batch-summary\">\n\t\t\t<p class=\"cds--batch-summary__para\" *ngIf=\"count as n\">\n\t\t\t\t<ng-container *ngIf=\"_batchTextLegacy.subject | async as legacyText; else batchTextBlock\">\n\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t<span *ngIf=\"n === 1\">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t<span *ngIf=\"n !== 1\">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t</ng-template>\n\t\t\t</p>\n\t\t</div>\n\t\t<div class=\"cds--action-list\">\n\t\t\t<ng-content select=\"cds-table-toolbar-actions\"></ng-content>\n\t\t\t<button\n\t\t\t\tcdsButton=\"primary\"\n\t\t\t\tclass=\"cds--batch-summary__cancel\"\n\t\t\t\t[tabindex]=\"selected ? 0 : -1\"\n\t\t\t\t(click)=\"onCancel()\">\n\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t<ng-content></ng-content>\n</section>\n",
|
|
56297
|
+
"template": "<section\n\tclass=\"cds--table-toolbar\"\n\t[ngClass]=\"{'cds--table-toolbar--sm' : size === 'sm'}\"\n\t[attr.aria-label]=\"actionBarLabel.subject | async\">\n\t<div\n\t\t*ngIf=\"model\"\n\t\tclass=\"cds--batch-actions\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--batch-actions--active': selected\n\t\t}\">\n\t\t<div class=\"cds--batch-summary\">\n\t\t\t<p class=\"cds--batch-summary__para\" *ngIf=\"count as n\">\n\t\t\t\t<ng-container *ngIf=\"_batchTextLegacy.subject | async as legacyText; else batchTextBlock\">\n\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t<span *ngIf=\"n === 1\">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t<span *ngIf=\"n !== 1\">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t</ng-template>\n\t\t\t</p>\n\t\t</div>\n\t\t<div class=\"cds--action-list\">\n\t\t\t<ng-content select=\"cds-table-toolbar-actions,ibm-table-toolbar-actions\"></ng-content>\n\t\t\t<button\n\t\t\t\tcdsButton=\"primary\"\n\t\t\t\tclass=\"cds--batch-summary__cancel\"\n\t\t\t\t[tabindex]=\"selected ? 0 : -1\"\n\t\t\t\t(click)=\"onCancel()\">\n\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t<ng-content></ng-content>\n</section>\n",
|
|
56298
56298
|
"templateUrl": [],
|
|
56299
56299
|
"viewProviders": [],
|
|
56300
56300
|
"hostDirectives": [],
|
|
@@ -56424,7 +56424,7 @@
|
|
|
56424
56424
|
"description": "<p>The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.</p>\n<h2>Basic usage</h2>\n<div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-table-toolbar [model]="model">\n <cds-table-toolbar-actions>\n <button cdsButton="primary">\n Delete\n <svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>\n </button>\n <button cdsButton="primary">\n Save\n <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n </button>\n <button cdsButton="primary">\n Download\n <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n </button>\n </cds-table-toolbar-actions>\n <cds-table-toolbar-content>\n <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n <button cdsButton="toolbar-action">\n <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n </button>\n <button cdsButton="primary" size="sm">\n Primary Button\n <svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n </button>\n </cds-table-toolbar-content>\n </cds-table-toolbar></code></pre></div>",
|
|
56425
56425
|
"rawdescription": "\n\nThe table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.\n\n## Basic usage\n\n```html\n<cds-table-toolbar [model]=\"model\">\n\t\t<cds-table-toolbar-actions>\n\t\t\t<button cdsButton=\"primary\">\n\t\t\t\tDelete\n\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t\t<button cdsButton=\"primary\">\n\t\t\t\tSave\n\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t\t<button cdsButton=\"primary\">\n\t\t\t\tDownload\n\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</cds-table-toolbar-actions>\n\t\t\t<cds-table-toolbar-content>\n\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t<button cdsButton=\"toolbar-action\">\n\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t</button>\n\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\tPrimary Button\n\t\t\t\t<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</cds-table-toolbar-content>\n\t</cds-table-toolbar>\n```\n\n",
|
|
56426
56426
|
"type": "component",
|
|
56427
|
-
"sourceCode": "import { TableModel } from \"../table-model.class\";\nimport {\n\tComponent,\n\tEventEmitter,\n\tInput,\n\tOutput\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.\n *\n * ## Basic usage\n *\n * ```html\n * <cds-table-toolbar [model]=\"model\">\n *\t\t<cds-table-toolbar-actions>\n *\t\t\t<button cdsButton=\"primary\">\n *\t\t\t\tDelete\n *\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t\t<button cdsButton=\"primary\">\n *\t\t\t\tSave\n *\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t\t<button cdsButton=\"primary\">\n *\t\t\t\tDownload\n *\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t</cds-table-toolbar-actions>\n *\t\t\t<cds-table-toolbar-content>\n *\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n *\t\t\t<button cdsButton=\"toolbar-action\">\n *\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n *\t\t\t</button>\n *\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n *\t\t\t\tPrimary Button\n *\t\t\t\t<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t</cds-table-toolbar-content>\n *\t</cds-table-toolbar>\n * ```\n *\n */\n@Component({\n\tselector: \"cds-table-toolbar, ibm-table-toolbar\",\n\ttemplate: `\n\t<section\n\t\tclass=\"cds--table-toolbar\"\n\t\t[ngClass]=\"{'cds--table-toolbar--sm' : size === 'sm'}\"\n\t\t[attr.aria-label]=\"actionBarLabel.subject | async\">\n\t\t<div\n\t\t\t*ngIf=\"model\"\n\t\t\tclass=\"cds--batch-actions\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--batch-actions--active': selected\n\t\t\t}\">\n\t\t\t<div class=\"cds--batch-summary\">\n\t\t\t\t<p class=\"cds--batch-summary__para\" *ngIf=\"count as n\">\n\t\t\t\t\t<ng-container *ngIf=\"_batchTextLegacy.subject | async as legacyText; else batchTextBlock\">\n\t\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t\t<span *ngIf=\"n === 1\">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t\t<span *ngIf=\"n !== 1\">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div class=\"cds--action-list\">\n\t\t\t\t<ng-content select=\"cds-table-toolbar-actions\"></ng-content>\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t\tclass=\"cds--batch-summary__cancel\"\n\t\t\t\t\t[tabindex]=\"selected ? 0 : -1\"\n\t\t\t\t\t(click)=\"onCancel()\">\n\t\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</section>\n\t`\n})\nexport class TableToolbar {\n\t@Input() model: TableModel;\n\n\t@Input() set batchText (value: string | { SINGLE: string, MULTIPLE: string }) {\n\t\tif (typeof value === \"object\") {\n\t\t\tthis._batchTextSingle.override(value.SINGLE);\n\t\t\tthis._batchTextMultiple.override(value.MULTIPLE);\n\t\t} else {\n\t\t\t// For compatibility with old code\n\t\t\tthis._batchTextLegacy.override(value);\n\t\t}\n\t}\n\t@Input() set ariaLabel (value: { ACTION_BAR: string }) {\n\t\tthis.actionBarLabel.override(value.ACTION_BAR);\n\t}\n\t@Input() set cancelText(value: { CANCEL: string }) {\n\t\tthis._cancelText.override(value.CANCEL);\n\t}\n\t@Input() size: TableRowSize = \"md\";\n\n\tget cancelText(): { CANCEL: string } {\n\t\treturn { CANCEL: this._cancelText.value as string };\n\t}\n\n\t@Output() cancel = new EventEmitter();\n\n\tactionBarLabel: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.ACTION_BAR\");\n\t_cancelText: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.CANCEL\");\n\t_batchTextLegacy: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT\");\n\t_batchTextSingle: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_SINGLE\");\n\t_batchTextMultiple: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tget count() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;\n\t}\n\tget selected() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;\n\t}\n\n\tonCancel() {\n\t\tthis.model.selectAll(false);\n\t\tthis.cancel.emit();\n\t}\n}\n",
|
|
56427
|
+
"sourceCode": "import { TableModel } from \"../table-model.class\";\nimport {\n\tComponent,\n\tEventEmitter,\n\tInput,\n\tOutput\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.\n *\n * ## Basic usage\n *\n * ```html\n * <cds-table-toolbar [model]=\"model\">\n *\t\t<cds-table-toolbar-actions>\n *\t\t\t<button cdsButton=\"primary\">\n *\t\t\t\tDelete\n *\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t\t<button cdsButton=\"primary\">\n *\t\t\t\tSave\n *\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t\t<button cdsButton=\"primary\">\n *\t\t\t\tDownload\n *\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t</cds-table-toolbar-actions>\n *\t\t\t<cds-table-toolbar-content>\n *\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n *\t\t\t<button cdsButton=\"toolbar-action\">\n *\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n *\t\t\t</button>\n *\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n *\t\t\t\tPrimary Button\n *\t\t\t\t<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n *\t\t\t</button>\n *\t\t</cds-table-toolbar-content>\n *\t</cds-table-toolbar>\n * ```\n *\n */\n@Component({\n\tselector: \"cds-table-toolbar, ibm-table-toolbar\",\n\ttemplate: `\n\t<section\n\t\tclass=\"cds--table-toolbar\"\n\t\t[ngClass]=\"{'cds--table-toolbar--sm' : size === 'sm'}\"\n\t\t[attr.aria-label]=\"actionBarLabel.subject | async\">\n\t\t<div\n\t\t\t*ngIf=\"model\"\n\t\t\tclass=\"cds--batch-actions\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--batch-actions--active': selected\n\t\t\t}\">\n\t\t\t<div class=\"cds--batch-summary\">\n\t\t\t\t<p class=\"cds--batch-summary__para\" *ngIf=\"count as n\">\n\t\t\t\t\t<ng-container *ngIf=\"_batchTextLegacy.subject | async as legacyText; else batchTextBlock\">\n\t\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t\t<span *ngIf=\"n === 1\">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t\t<span *ngIf=\"n !== 1\">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div class=\"cds--action-list\">\n\t\t\t\t<ng-content select=\"cds-table-toolbar-actions,ibm-table-toolbar-actions\"></ng-content>\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t\tclass=\"cds--batch-summary__cancel\"\n\t\t\t\t\t[tabindex]=\"selected ? 0 : -1\"\n\t\t\t\t\t(click)=\"onCancel()\">\n\t\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</section>\n\t`\n})\nexport class TableToolbar {\n\t@Input() model: TableModel;\n\n\t@Input() set batchText (value: string | { SINGLE: string, MULTIPLE: string }) {\n\t\tif (typeof value === \"object\") {\n\t\t\tthis._batchTextSingle.override(value.SINGLE);\n\t\t\tthis._batchTextMultiple.override(value.MULTIPLE);\n\t\t} else {\n\t\t\t// For compatibility with old code\n\t\t\tthis._batchTextLegacy.override(value);\n\t\t}\n\t}\n\t@Input() set ariaLabel (value: { ACTION_BAR: string }) {\n\t\tthis.actionBarLabel.override(value.ACTION_BAR);\n\t}\n\t@Input() set cancelText(value: { CANCEL: string }) {\n\t\tthis._cancelText.override(value.CANCEL);\n\t}\n\t@Input() size: TableRowSize = \"md\";\n\n\tget cancelText(): { CANCEL: string } {\n\t\treturn { CANCEL: this._cancelText.value as string };\n\t}\n\n\t@Output() cancel = new EventEmitter();\n\n\tactionBarLabel: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.ACTION_BAR\");\n\t_cancelText: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.CANCEL\");\n\t_batchTextLegacy: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT\");\n\t_batchTextSingle: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_SINGLE\");\n\t_batchTextMultiple: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tget count() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;\n\t}\n\tget selected() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;\n\t}\n\n\tonCancel() {\n\t\tthis.model.selectAll(false);\n\t\tthis.cancel.emit();\n\t}\n}\n",
|
|
56428
56428
|
"assetsDirs": [],
|
|
56429
56429
|
"styleUrlsData": "",
|
|
56430
56430
|
"stylesData": "",
|
|
@@ -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}} </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}} </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.selected=new core.EventEmitter}doClick(){this.selected.emit(this.active)}};Hamburger.ctorParameters=()=>[{type:i18n.oc}],Hamburger.propDecorators={active:[{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\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'})],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)}}]);
|