carbon-components-angular 5.27.0 → 5.27.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/docs/documentation/components/ContainedList.html +22 -14
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
- package/docs/documentation/modules/CodeSnippetModule.html +4 -4
- package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ComboBoxModule.html +4 -4
- package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +20 -20
- package/docs/documentation/modules/DatePickerInputModule.html +20 -20
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +46 -50
- package/docs/documentation/modules/DatePickerModule.html +46 -50
- package/docs/documentation/modules/FileUploaderModule/dependencies.svg +58 -58
- package/docs/documentation/modules/FileUploaderModule.html +58 -58
- package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NumberModule.html +4 -4
- package/docs/documentation/modules/PanelModule/dependencies.svg +36 -36
- package/docs/documentation/modules/PanelModule.html +36 -36
- package/docs/documentation/modules/RadioModule/dependencies.svg +47 -43
- package/docs/documentation/modules/RadioModule.html +47 -43
- package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SearchModule.html +4 -4
- package/docs/documentation/modules/SelectModule/dependencies.svg +34 -34
- package/docs/documentation/modules/SelectModule.html +34 -34
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/TagModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TagModule.html +28 -28
- package/docs/documentation/modules/ThemeModule/dependencies.svg +15 -15
- package/docs/documentation/modules/ThemeModule.html +15 -15
- package/docs/documentation/modules/TilesModule/dependencies.svg +98 -98
- package/docs/documentation/modules/TilesModule.html +98 -98
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +41 -45
- package/docs/documentation/modules/TimePickerModule.html +41 -45
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +45 -49
- package/docs/documentation/modules/TimePickerSelectModule.html +45 -49
- package/docs/documentation/modules/ToggleModule/dependencies.svg +37 -41
- package/docs/documentation/modules/ToggleModule.html +37 -41
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
- package/docs/documentation/modules/ToggletipModule.html +37 -37
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
- package/docs/documentation/modules/TreeviewModule.html +34 -34
- package/docs/documentation.json +16 -16
- package/docs/storybook/{contained-list-contained-list-stories.118968ad.iframe.bundle.js → contained-list-contained-list-stories.b0377336.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.830d907f.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.8c077096.iframe.bundle.js → runtime~main.719f5f81.iframe.bundle.js} +1 -1
- package/esm2020/contained-list/contained-list.component.mjs +11 -3
- package/fesm2015/carbon-components-angular-contained-list.mjs +10 -2
- package/fesm2015/carbon-components-angular-contained-list.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-contained-list.mjs +10 -2
- package/fesm2020/carbon-components-angular-contained-list.mjs.map +1 -1
- package/package.json +1 -1
- package/docs/storybook/main.19e797ce.iframe.bundle.js +0 -1
|
@@ -115,101 +115,101 @@
|
|
|
115
115
|
<text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
|
|
116
116
|
<g id="clust1" class="cluster">
|
|
117
117
|
<title>cluster_TreeviewModule</title>
|
|
118
|
-
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="
|
|
118
|
+
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="18,-70 18,-333 478,-333 478,-70 18,-70"/>
|
|
119
|
+
</g>
|
|
120
|
+
<g id="clust4" class="cluster">
|
|
121
|
+
<title>cluster_TreeviewModule_TreeViewComponent_providers</title>
|
|
122
|
+
<polygon fill="none" stroke="black" points="296,-78 296,-195 470,-195 470,-78 296,-78"/>
|
|
119
123
|
</g>
|
|
120
124
|
<g id="clust5" class="cluster">
|
|
121
125
|
<title>cluster_TreeviewModule_imports</title>
|
|
122
|
-
<polygon fill="none" stroke="black" points="
|
|
126
|
+
<polygon fill="none" stroke="black" points="188,-143 188,-195 288,-195 288,-143 188,-143"/>
|
|
123
127
|
</g>
|
|
124
128
|
<g id="clust2" class="cluster">
|
|
125
129
|
<title>cluster_TreeviewModule_declarations</title>
|
|
126
|
-
<polygon fill="none" stroke="black" points="
|
|
130
|
+
<polygon fill="none" stroke="black" points="26,-143 26,-195 180,-195 180,-143 26,-143"/>
|
|
127
131
|
</g>
|
|
128
132
|
<g id="clust6" class="cluster">
|
|
129
133
|
<title>cluster_TreeviewModule_exports</title>
|
|
130
|
-
<polygon fill="none" stroke="black" points="
|
|
131
|
-
</g>
|
|
132
|
-
<g id="clust4" class="cluster">
|
|
133
|
-
<title>cluster_TreeviewModule_TreeViewComponent_providers</title>
|
|
134
|
-
<polygon fill="none" stroke="black" points="39.5,-78 39.5,-130 213.5,-130 213.5,-78 39.5,-78"/>
|
|
134
|
+
<polygon fill="none" stroke="black" points="91,-273 91,-325 406,-325 406,-273 91,-273"/>
|
|
135
135
|
</g>
|
|
136
136
|
<!-- TreeNodeComponent -->
|
|
137
137
|
<g id="node1" class="node">
|
|
138
138
|
<title>TreeNodeComponent</title>
|
|
139
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
140
|
-
<text text-anchor="middle" x="
|
|
139
|
+
<polygon fill="#ffffb3" stroke="black" points="171.8,-187 34.2,-187 34.2,-151 171.8,-151 171.8,-187"/>
|
|
140
|
+
<text text-anchor="middle" x="103" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
|
|
141
141
|
</g>
|
|
142
142
|
<!-- TreeviewModule -->
|
|
143
143
|
<g id="node3" class="node">
|
|
144
144
|
<title>TreeviewModule</title>
|
|
145
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
146
|
-
<text text-anchor="middle" x="
|
|
145
|
+
<polygon fill="#8dd3c7" stroke="black" points="294.4,-252 291.4,-256 270.4,-256 267.4,-252 181.6,-252 181.6,-216 294.4,-216 294.4,-252"/>
|
|
146
|
+
<text text-anchor="middle" x="238" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
|
|
147
147
|
</g>
|
|
148
148
|
<!-- TreeNodeComponent->TreeviewModule -->
|
|
149
149
|
<g id="edge1" class="edge">
|
|
150
150
|
<title>TreeNodeComponent->TreeviewModule</title>
|
|
151
|
-
<path fill="none" stroke="black" d="
|
|
152
|
-
<polygon fill="black" stroke="black" points="
|
|
151
|
+
<path fill="none" stroke="black" d="M171.84,-169C181.82,-169 188.79,-169 188.79,-169 188.79,-169 188.79,-205.89 188.79,-205.89"/>
|
|
152
|
+
<polygon fill="black" stroke="black" points="185.29,-205.89 188.79,-215.89 192.29,-205.89 185.29,-205.89"/>
|
|
153
153
|
</g>
|
|
154
154
|
<!-- TreeViewComponent -->
|
|
155
155
|
<g id="node2" class="node">
|
|
156
156
|
<title>TreeViewComponent</title>
|
|
157
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
158
|
-
<text text-anchor="middle" x="
|
|
157
|
+
<polygon fill="#ffffb3" stroke="black" points="446.79,-187 309.21,-187 309.21,-151 446.79,-151 446.79,-187"/>
|
|
158
|
+
<text text-anchor="middle" x="378" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
|
|
159
159
|
</g>
|
|
160
160
|
<!-- TreeViewComponent->TreeviewModule -->
|
|
161
161
|
<g id="edge2" class="edge">
|
|
162
162
|
<title>TreeViewComponent->TreeviewModule</title>
|
|
163
|
-
<path fill="none" stroke="black" d="
|
|
164
|
-
<polygon fill="black" stroke="black" points="
|
|
163
|
+
<path fill="none" stroke="black" d="M309.19,-169C296.52,-169 287.21,-169 287.21,-169 287.21,-169 287.21,-205.89 287.21,-205.89"/>
|
|
164
|
+
<polygon fill="black" stroke="black" points="283.71,-205.89 287.21,-215.89 290.71,-205.89 283.71,-205.89"/>
|
|
165
165
|
</g>
|
|
166
166
|
<!-- TreeNodeComponent -->
|
|
167
167
|
<g id="node6" class="node">
|
|
168
168
|
<title>TreeNodeComponent </title>
|
|
169
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
170
|
-
<text text-anchor="middle" x="
|
|
169
|
+
<polygon fill="#fb8072" stroke="black" points="398.3,-317 257.7,-317 257.7,-281 398.3,-281 398.3,-317"/>
|
|
170
|
+
<text text-anchor="middle" x="328" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
|
|
171
171
|
</g>
|
|
172
172
|
<!-- TreeviewModule->TreeNodeComponent -->
|
|
173
173
|
<g id="edge5" class="edge">
|
|
174
174
|
<title>TreeviewModule->TreeNodeComponent </title>
|
|
175
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
176
|
-
<polygon fill="black" stroke="black" points="
|
|
175
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M275.9,-252.11C275.9,-252.11 275.9,-270.99 275.9,-270.99"/>
|
|
176
|
+
<polygon fill="black" stroke="black" points="272.4,-270.99 275.9,-280.99 279.4,-270.99 272.4,-270.99"/>
|
|
177
177
|
</g>
|
|
178
178
|
<!-- TreeViewComponent -->
|
|
179
179
|
<g id="node7" class="node">
|
|
180
180
|
<title>TreeViewComponent </title>
|
|
181
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
182
|
-
<text text-anchor="middle" x="
|
|
181
|
+
<polygon fill="#fb8072" stroke="black" points="239.29,-317 98.71,-317 98.71,-281 239.29,-281 239.29,-317"/>
|
|
182
|
+
<text text-anchor="middle" x="169" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
|
|
183
183
|
</g>
|
|
184
184
|
<!-- TreeviewModule->TreeViewComponent -->
|
|
185
185
|
<g id="edge6" class="edge">
|
|
186
186
|
<title>TreeviewModule->TreeViewComponent </title>
|
|
187
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
188
|
-
<polygon fill="black" stroke="black" points="
|
|
187
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M210.6,-252.11C210.6,-252.11 210.6,-270.99 210.6,-270.99"/>
|
|
188
|
+
<polygon fill="black" stroke="black" points="207.1,-270.99 210.6,-280.99 214.1,-270.99 207.1,-270.99"/>
|
|
189
189
|
</g>
|
|
190
190
|
<!-- TreeViewService -->
|
|
191
191
|
<g id="node4" class="node">
|
|
192
192
|
<title>TreeViewService</title>
|
|
193
|
-
<ellipse fill="#fdb462" stroke="black" cx="
|
|
194
|
-
<text text-anchor="middle" x="
|
|
193
|
+
<ellipse fill="#fdb462" stroke="black" cx="383" cy="-104" rx="78.69" ry="18"/>
|
|
194
|
+
<text text-anchor="middle" x="383" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
|
|
195
195
|
</g>
|
|
196
196
|
<!-- TreeViewService->TreeViewComponent -->
|
|
197
197
|
<g id="edge3" class="edge">
|
|
198
198
|
<title>TreeViewService->TreeViewComponent</title>
|
|
199
|
-
<path fill="none" stroke="black" d="
|
|
200
|
-
<polygon fill="black" stroke="black" points="
|
|
199
|
+
<path fill="none" stroke="black" d="M378,-122.11C378,-122.11 378,-140.99 378,-140.99"/>
|
|
200
|
+
<polygon fill="black" stroke="black" points="374.5,-140.99 378,-150.99 381.5,-140.99 374.5,-140.99"/>
|
|
201
201
|
</g>
|
|
202
202
|
<!-- IconModule -->
|
|
203
203
|
<g id="node5" class="node">
|
|
204
204
|
<title>IconModule</title>
|
|
205
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
206
|
-
<text text-anchor="middle" x="
|
|
205
|
+
<polygon fill="#8dd3c7" stroke="black" points="280.43,-187 277.43,-191 256.43,-191 253.43,-187 195.57,-187 195.57,-151 280.43,-151 280.43,-187"/>
|
|
206
|
+
<text text-anchor="middle" x="238" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
|
|
207
207
|
</g>
|
|
208
208
|
<!-- IconModule->TreeviewModule -->
|
|
209
209
|
<g id="edge4" class="edge">
|
|
210
210
|
<title>IconModule->TreeviewModule</title>
|
|
211
|
-
<path fill="none" stroke="black" d="
|
|
212
|
-
<polygon fill="black" stroke="black" points="
|
|
211
|
+
<path fill="none" stroke="black" d="M238,-187.11C238,-187.11 238,-205.99 238,-205.99"/>
|
|
212
|
+
<polygon fill="black" stroke="black" points="234.5,-205.99 238,-215.99 241.5,-205.99 234.5,-205.99"/>
|
|
213
213
|
</g>
|
|
214
214
|
</g>
|
|
215
215
|
</svg>
|
package/docs/documentation.json
CHANGED
|
@@ -24032,7 +24032,7 @@
|
|
|
24032
24032
|
},
|
|
24033
24033
|
{
|
|
24034
24034
|
"name": "ContainedList",
|
|
24035
|
-
"id": "component-ContainedList-
|
|
24035
|
+
"id": "component-ContainedList-1c5ffbaef841f69f00060fb737ec1c6de87711ca940bb0ee583f6f72a622bbd432d83b7a108c206bf6be21d76cbb9eba927f19cd6a805717037baf59af9656dd",
|
|
24036
24036
|
"file": "src/contained-list/contained-list.component.ts",
|
|
24037
24037
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
24038
24038
|
"encapsulation": [],
|
|
@@ -24043,7 +24043,7 @@
|
|
|
24043
24043
|
"selector": "cds-contained-list, ibm-contained-list",
|
|
24044
24044
|
"styleUrls": [],
|
|
24045
24045
|
"styles": [],
|
|
24046
|
-
"template": "<div\n\tclass=\"cds--contained-list\"\n\t[ngClass]=\"{\n\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge\n\t}\">\n\t<div class=\"cds--contained-list__header\">\n\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</div>\n\n\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t</div>\n\t</div>\n\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\t",
|
|
24046
|
+
"template": "<div\n\tclass=\"cds--contained-list\"\n\t[ngClass]=\"{\n\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge,\n\t\t'cds--layout--size-sm': size === ContainedListSize.Small,\n\t\t'cds--layout--size-md': size === ContainedListSize.Medium,\n\t\t'cds--layout--size-lg': size === ContainedListSize.Large,\n\t\t'cds--layout--size-xl': size === ContainedListSize.ExtraLarge\n\t}\">\n\t<div class=\"cds--contained-list__header\">\n\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</div>\n\n\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t</div>\n\t</div>\n\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\t",
|
|
24047
24047
|
"templateUrl": [],
|
|
24048
24048
|
"viewProviders": [],
|
|
24049
24049
|
"hostDirectives": [],
|
|
@@ -24054,7 +24054,7 @@
|
|
|
24054
24054
|
"deprecationMessage": "",
|
|
24055
24055
|
"rawdescription": "\n\nA slot for a possible interactive element to render within the list header.\n",
|
|
24056
24056
|
"description": "<p>A slot for a possible interactive element to render within the list header.</p>\n",
|
|
24057
|
-
"line":
|
|
24057
|
+
"line": 61,
|
|
24058
24058
|
"type": "TemplateRef<any>",
|
|
24059
24059
|
"decorators": []
|
|
24060
24060
|
},
|
|
@@ -24065,7 +24065,7 @@
|
|
|
24065
24065
|
"deprecationMessage": "",
|
|
24066
24066
|
"rawdescription": "\n\nSpecify whether the dividing lines in between list items should be inset.\n",
|
|
24067
24067
|
"description": "<p>Specify whether the dividing lines in between list items should be inset.</p>\n",
|
|
24068
|
-
"line":
|
|
24068
|
+
"line": 66,
|
|
24069
24069
|
"type": "boolean",
|
|
24070
24070
|
"decorators": []
|
|
24071
24071
|
},
|
|
@@ -24076,7 +24076,7 @@
|
|
|
24076
24076
|
"deprecationMessage": "",
|
|
24077
24077
|
"rawdescription": "\n\nThe kind of ContainedList you want to display.\n",
|
|
24078
24078
|
"description": "<p>The kind of ContainedList you want to display.</p>\n",
|
|
24079
|
-
"line":
|
|
24079
|
+
"line": 71,
|
|
24080
24080
|
"type": "ContainedListKind",
|
|
24081
24081
|
"decorators": []
|
|
24082
24082
|
},
|
|
@@ -24086,7 +24086,7 @@
|
|
|
24086
24086
|
"deprecationMessage": "",
|
|
24087
24087
|
"rawdescription": "\n\nA label describing the contained list.\n",
|
|
24088
24088
|
"description": "<p>A label describing the contained list.</p>\n",
|
|
24089
|
-
"line":
|
|
24089
|
+
"line": 76,
|
|
24090
24090
|
"type": "string | TemplateRef<any>",
|
|
24091
24091
|
"decorators": []
|
|
24092
24092
|
},
|
|
@@ -24097,7 +24097,7 @@
|
|
|
24097
24097
|
"deprecationMessage": "",
|
|
24098
24098
|
"rawdescription": "\n\nLabel id for the contained list.\n",
|
|
24099
24099
|
"description": "<p>Label id for the contained list.</p>\n",
|
|
24100
|
-
"line":
|
|
24100
|
+
"line": 86,
|
|
24101
24101
|
"type": "string",
|
|
24102
24102
|
"decorators": []
|
|
24103
24103
|
},
|
|
@@ -24108,7 +24108,7 @@
|
|
|
24108
24108
|
"deprecationMessage": "",
|
|
24109
24109
|
"rawdescription": "\n\nSpecify the size of the contained list.\n",
|
|
24110
24110
|
"description": "<p>Specify the size of the contained list.</p>\n",
|
|
24111
|
-
"line":
|
|
24111
|
+
"line": 81,
|
|
24112
24112
|
"type": "ContainedListSize",
|
|
24113
24113
|
"decorators": []
|
|
24114
24114
|
}
|
|
@@ -24123,7 +24123,7 @@
|
|
|
24123
24123
|
"type": "",
|
|
24124
24124
|
"optional": false,
|
|
24125
24125
|
"description": "<p>Exposing ContainedListKind enum to the template</p>\n",
|
|
24126
|
-
"line":
|
|
24126
|
+
"line": 96,
|
|
24127
24127
|
"rawdescription": "\n\nExposing ContainedListKind enum to the template\n",
|
|
24128
24128
|
"modifierKind": [
|
|
24129
24129
|
125
|
|
@@ -24137,7 +24137,7 @@
|
|
|
24137
24137
|
"type": "",
|
|
24138
24138
|
"optional": false,
|
|
24139
24139
|
"description": "<p>Exposing ContainedListSize enum to the template</p>\n",
|
|
24140
|
-
"line":
|
|
24140
|
+
"line": 91,
|
|
24141
24141
|
"rawdescription": "\n\nExposing ContainedListSize enum to the template\n",
|
|
24142
24142
|
"modifierKind": [
|
|
24143
24143
|
125
|
|
@@ -24158,7 +24158,7 @@
|
|
|
24158
24158
|
"optional": false,
|
|
24159
24159
|
"returnType": "boolean",
|
|
24160
24160
|
"typeParameters": [],
|
|
24161
|
-
"line":
|
|
24161
|
+
"line": 98,
|
|
24162
24162
|
"deprecated": false,
|
|
24163
24163
|
"deprecationMessage": "",
|
|
24164
24164
|
"modifierKind": [
|
|
@@ -24186,7 +24186,7 @@
|
|
|
24186
24186
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ContainedListModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-contained-list--basic\">See demo</a></p>\n",
|
|
24187
24187
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ContainedListModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-contained-list--basic)\n",
|
|
24188
24188
|
"type": "component",
|
|
24189
|
-
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ContainedListKind, ContainedListSize } from \"./contained-list.enums\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContainedListModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-contained-list--basic)\n */\n@Component({\n\tselector: \"cds-contained-list, ibm-contained-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--contained-list\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge\n\t\t\t}\">\n\t\t\t<div class=\"cds--contained-list__header\">\n\t\t\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedList {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/**\n\t * A slot for a possible interactive element to render within the list header.\n\t */\n\t@Input() action: TemplateRef<any>;\n\n\t/**\n\t * Specify whether the dividing lines in between list items should be inset.\n\t */\n\t@Input() isInset = false;\n\n\t/**\n\t * The kind of ContainedList you want to display.\n\t */\n\t@Input() kind: ContainedListKind = ContainedListKind.OnPage;\n\n\t/**\n\t * A label describing the contained list.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\n\t/**\n\t * Specify the size of the contained list.\n\t */\n\t@Input() size: ContainedListSize = ContainedListSize.Large;\n\n\t/**\n\t * Label id for the contained list.\n\t */\n\t@Input() labelId = `contained-list-${ContainedList.count++}-header`;\n\n\t/**\n\t * Exposing ContainedListSize enum to the template\n\t */\n\tpublic ContainedListSize: typeof ContainedListSize = ContainedListSize;\n\n\t/**\n\t * Exposing ContainedListKind enum to the template\n\t */\n\tpublic ContainedListKind: typeof ContainedListKind = ContainedListKind;\n\n\tpublic isTemplate(value: string | TemplateRef<any>) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
24189
|
+
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ContainedListKind, ContainedListSize } from \"./contained-list.enums\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContainedListModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-contained-list--basic)\n */\n@Component({\n\tselector: \"cds-contained-list, ibm-contained-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--contained-list\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge,\n\t\t\t\t'cds--layout--size-sm': size === ContainedListSize.Small,\n\t\t\t\t'cds--layout--size-md': size === ContainedListSize.Medium,\n\t\t\t\t'cds--layout--size-lg': size === ContainedListSize.Large,\n\t\t\t\t'cds--layout--size-xl': size === ContainedListSize.ExtraLarge\n\t\t\t}\">\n\t\t\t<div class=\"cds--contained-list__header\">\n\t\t\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedList {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/**\n\t * A slot for a possible interactive element to render within the list header.\n\t */\n\t@Input() action: TemplateRef<any>;\n\n\t/**\n\t * Specify whether the dividing lines in between list items should be inset.\n\t */\n\t@Input() isInset = false;\n\n\t/**\n\t * The kind of ContainedList you want to display.\n\t */\n\t@Input() kind: ContainedListKind = ContainedListKind.OnPage;\n\n\t/**\n\t * A label describing the contained list.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\n\t/**\n\t * Specify the size of the contained list.\n\t */\n\t@Input() size: ContainedListSize = ContainedListSize.Large;\n\n\t/**\n\t * Label id for the contained list.\n\t */\n\t@Input() labelId = `contained-list-${ContainedList.count++}-header`;\n\n\t/**\n\t * Exposing ContainedListSize enum to the template\n\t */\n\tpublic ContainedListSize: typeof ContainedListSize = ContainedListSize;\n\n\t/**\n\t * Exposing ContainedListKind enum to the template\n\t */\n\tpublic ContainedListKind: typeof ContainedListKind = ContainedListKind;\n\n\tpublic isTemplate(value: string | TemplateRef<any>) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
24190
24190
|
"assetsDirs": [],
|
|
24191
24191
|
"styleUrlsData": "",
|
|
24192
24192
|
"stylesData": "",
|
|
@@ -74394,7 +74394,7 @@
|
|
|
74394
74394
|
"deprecated": false,
|
|
74395
74395
|
"deprecationMessage": "",
|
|
74396
74396
|
"type": "",
|
|
74397
|
-
"defaultValue": "(args) => {\n\targs = {\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\
|
|
74397
|
+
"defaultValue": "(args) => {\n\targs = {\n\t\t...args,\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\t\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t\t<cds-contained-list-item\n\t\t\t\t\t*ngFor=\"let item of items\"\n\t\t\t\t\t[action]=\"actionWithClick\"\n\t\t\t\t\t[actionData]=\"item\">\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t</cds-contained-list-item>\n\t\t\t</cds-contained-list>\n\t\t`\n\t};\n}"
|
|
74398
74398
|
},
|
|
74399
74399
|
{
|
|
74400
74400
|
"name": "withActionsTemplate",
|
|
@@ -74404,7 +74404,7 @@
|
|
|
74404
74404
|
"deprecated": false,
|
|
74405
74405
|
"deprecationMessage": "",
|
|
74406
74406
|
"type": "",
|
|
74407
|
-
"defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<cds-contained-list label=\"List title\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
|
|
74407
|
+
"defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\n\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
|
|
74408
74408
|
},
|
|
74409
74409
|
{
|
|
74410
74410
|
"name": "WithAutoAlign",
|
|
@@ -77263,7 +77263,7 @@
|
|
|
77263
77263
|
"deprecated": false,
|
|
77264
77264
|
"deprecationMessage": "",
|
|
77265
77265
|
"type": "",
|
|
77266
|
-
"defaultValue": "(args) => {\n\targs = {\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\
|
|
77266
|
+
"defaultValue": "(args) => {\n\targs = {\n\t\t...args,\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\t\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t\t<cds-contained-list-item\n\t\t\t\t\t*ngFor=\"let item of items\"\n\t\t\t\t\t[action]=\"actionWithClick\"\n\t\t\t\t\t[actionData]=\"item\">\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t</cds-contained-list-item>\n\t\t\t</cds-contained-list>\n\t\t`\n\t};\n}"
|
|
77267
77267
|
},
|
|
77268
77268
|
{
|
|
77269
77269
|
"name": "withActionsTemplate",
|
|
@@ -77273,7 +77273,7 @@
|
|
|
77273
77273
|
"deprecated": false,
|
|
77274
77274
|
"deprecationMessage": "",
|
|
77275
77275
|
"type": "",
|
|
77276
|
-
"defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<cds-contained-list label=\"List title\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
|
|
77276
|
+
"defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\n\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
|
|
77277
77277
|
},
|
|
77278
77278
|
{
|
|
77279
77279
|
"name": "withIcons",
|