@momentum-design/components 0.1.11 → 0.1.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/custom-elements.json +128 -128
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -116,27 +116,51 @@
|
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
"kind": "javascript-module",
|
|
119
|
-
"path": "components/
|
|
119
|
+
"path": "components/icon/icon.component.js",
|
|
120
120
|
"declarations": [
|
|
121
121
|
{
|
|
122
122
|
"kind": "class",
|
|
123
|
-
"description": "",
|
|
124
|
-
"name": "
|
|
125
|
-
"
|
|
123
|
+
"description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
|
|
124
|
+
"name": "Icon",
|
|
125
|
+
"cssProperties": [
|
|
126
126
|
{
|
|
127
|
-
"description": "
|
|
128
|
-
"name": ""
|
|
127
|
+
"description": "Allows customization of the default fill color.",
|
|
128
|
+
"name": "--mdc-icon-fill-color"
|
|
129
129
|
}
|
|
130
130
|
],
|
|
131
131
|
"members": [
|
|
132
132
|
{
|
|
133
133
|
"kind": "field",
|
|
134
|
-
"name": "
|
|
134
|
+
"name": "iconData",
|
|
135
135
|
"type": {
|
|
136
|
-
"text": "
|
|
136
|
+
"text": "HTMLElement | undefined"
|
|
137
137
|
},
|
|
138
|
-
"
|
|
139
|
-
|
|
138
|
+
"privacy": "private"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"kind": "field",
|
|
142
|
+
"name": "lengthUnitFromContext",
|
|
143
|
+
"type": {
|
|
144
|
+
"text": "string | undefined"
|
|
145
|
+
},
|
|
146
|
+
"privacy": "private"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"kind": "field",
|
|
150
|
+
"name": "sizeFromContext",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "number | undefined"
|
|
153
|
+
},
|
|
154
|
+
"privacy": "private"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"kind": "field",
|
|
158
|
+
"name": "name",
|
|
159
|
+
"type": {
|
|
160
|
+
"text": "string | undefined"
|
|
161
|
+
},
|
|
162
|
+
"description": "Name of the icon (= filename)",
|
|
163
|
+
"attribute": "name",
|
|
140
164
|
"reflects": true
|
|
141
165
|
},
|
|
142
166
|
{
|
|
@@ -145,7 +169,7 @@
|
|
|
145
169
|
"type": {
|
|
146
170
|
"text": "number | undefined"
|
|
147
171
|
},
|
|
148
|
-
"description": "
|
|
172
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
149
173
|
"attribute": "size"
|
|
150
174
|
},
|
|
151
175
|
{
|
|
@@ -154,60 +178,74 @@
|
|
|
154
178
|
"type": {
|
|
155
179
|
"text": "string | undefined"
|
|
156
180
|
},
|
|
157
|
-
"description": "Length unit attribute for
|
|
181
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
158
182
|
"attribute": "length-unit"
|
|
159
183
|
},
|
|
160
184
|
{
|
|
161
185
|
"kind": "field",
|
|
162
|
-
"name": "
|
|
186
|
+
"name": "ariaLabel",
|
|
163
187
|
"type": {
|
|
164
|
-
"text": "string |
|
|
188
|
+
"text": "string | null"
|
|
165
189
|
},
|
|
166
|
-
"
|
|
167
|
-
"
|
|
190
|
+
"default": "null",
|
|
191
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
192
|
+
"attribute": "aria-label"
|
|
168
193
|
},
|
|
169
194
|
{
|
|
170
195
|
"kind": "field",
|
|
171
|
-
"name": "
|
|
172
|
-
"
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
"
|
|
196
|
+
"name": "iconProviderContext",
|
|
197
|
+
"privacy": "private",
|
|
198
|
+
"readonly": true
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"kind": "method",
|
|
202
|
+
"name": "getIconData",
|
|
203
|
+
"privacy": "private",
|
|
204
|
+
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
177
205
|
},
|
|
178
206
|
{
|
|
179
207
|
"kind": "method",
|
|
180
208
|
"name": "updateSize",
|
|
181
|
-
"privacy": "private"
|
|
209
|
+
"privacy": "private",
|
|
210
|
+
"description": "Updates the size by setting the width and height"
|
|
182
211
|
},
|
|
183
212
|
{
|
|
184
213
|
"kind": "method",
|
|
185
|
-
"name": "
|
|
214
|
+
"name": "setRoleOnIcon",
|
|
215
|
+
"privacy": "private"
|
|
186
216
|
},
|
|
187
217
|
{
|
|
188
218
|
"kind": "method",
|
|
189
|
-
"name": "
|
|
219
|
+
"name": "setAriaHiddenOnIcon",
|
|
220
|
+
"privacy": "private"
|
|
190
221
|
},
|
|
191
222
|
{
|
|
192
223
|
"kind": "method",
|
|
193
|
-
"name": "
|
|
224
|
+
"name": "setAriaLabelOnIcon",
|
|
225
|
+
"privacy": "private"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"kind": "field",
|
|
229
|
+
"name": "computedIconSize",
|
|
230
|
+
"privacy": "private",
|
|
231
|
+
"readonly": true
|
|
194
232
|
}
|
|
195
233
|
],
|
|
196
234
|
"attributes": [
|
|
197
235
|
{
|
|
198
|
-
"name": "
|
|
236
|
+
"name": "name",
|
|
199
237
|
"type": {
|
|
200
|
-
"text": "
|
|
238
|
+
"text": "string | undefined"
|
|
201
239
|
},
|
|
202
|
-
"description": "
|
|
203
|
-
"fieldName": "
|
|
240
|
+
"description": "Name of the icon (= filename)",
|
|
241
|
+
"fieldName": "name"
|
|
204
242
|
},
|
|
205
243
|
{
|
|
206
244
|
"name": "size",
|
|
207
245
|
"type": {
|
|
208
246
|
"text": "number | undefined"
|
|
209
247
|
},
|
|
210
|
-
"description": "
|
|
248
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
211
249
|
"fieldName": "size"
|
|
212
250
|
},
|
|
213
251
|
{
|
|
@@ -215,33 +253,25 @@
|
|
|
215
253
|
"type": {
|
|
216
254
|
"text": "string | undefined"
|
|
217
255
|
},
|
|
218
|
-
"description": "Length unit attribute for
|
|
256
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
219
257
|
"fieldName": "lengthUnit"
|
|
220
258
|
},
|
|
221
259
|
{
|
|
222
|
-
"name": "
|
|
223
|
-
"type": {
|
|
224
|
-
"text": "string | undefined"
|
|
225
|
-
},
|
|
226
|
-
"description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
|
|
227
|
-
"fieldName": "iconName"
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"name": "text",
|
|
260
|
+
"name": "aria-label",
|
|
231
261
|
"type": {
|
|
232
|
-
"text": "string |
|
|
262
|
+
"text": "string | null"
|
|
233
263
|
},
|
|
234
|
-
"
|
|
235
|
-
"
|
|
264
|
+
"default": "null",
|
|
265
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
266
|
+
"fieldName": "ariaLabel"
|
|
236
267
|
}
|
|
237
268
|
],
|
|
238
269
|
"superclass": {
|
|
239
270
|
"name": "Component",
|
|
240
271
|
"module": "/src/models"
|
|
241
272
|
},
|
|
242
|
-
"tagName": "mdc-
|
|
243
|
-
"
|
|
244
|
-
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
|
|
273
|
+
"tagName": "mdc-icon",
|
|
274
|
+
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
|
|
245
275
|
"customElement": true
|
|
246
276
|
}
|
|
247
277
|
],
|
|
@@ -250,59 +280,35 @@
|
|
|
250
280
|
"kind": "js",
|
|
251
281
|
"name": "default",
|
|
252
282
|
"declaration": {
|
|
253
|
-
"name": "
|
|
254
|
-
"module": "components/
|
|
283
|
+
"name": "Icon",
|
|
284
|
+
"module": "components/icon/icon.component.js"
|
|
255
285
|
}
|
|
256
286
|
}
|
|
257
287
|
]
|
|
258
288
|
},
|
|
259
289
|
{
|
|
260
290
|
"kind": "javascript-module",
|
|
261
|
-
"path": "components/
|
|
291
|
+
"path": "components/badge/badge.component.js",
|
|
262
292
|
"declarations": [
|
|
263
293
|
{
|
|
264
294
|
"kind": "class",
|
|
265
|
-
"description": "
|
|
266
|
-
"name": "
|
|
267
|
-
"
|
|
295
|
+
"description": "",
|
|
296
|
+
"name": "Badge",
|
|
297
|
+
"slots": [
|
|
268
298
|
{
|
|
269
|
-
"description": "
|
|
270
|
-
"name": "
|
|
299
|
+
"description": "This is a default/unnamed slot",
|
|
300
|
+
"name": ""
|
|
271
301
|
}
|
|
272
302
|
],
|
|
273
303
|
"members": [
|
|
274
304
|
{
|
|
275
305
|
"kind": "field",
|
|
276
|
-
"name": "
|
|
277
|
-
"type": {
|
|
278
|
-
"text": "HTMLElement | undefined"
|
|
279
|
-
},
|
|
280
|
-
"privacy": "private"
|
|
281
|
-
},
|
|
282
|
-
{
|
|
283
|
-
"kind": "field",
|
|
284
|
-
"name": "lengthUnitFromContext",
|
|
285
|
-
"type": {
|
|
286
|
-
"text": "string | undefined"
|
|
287
|
-
},
|
|
288
|
-
"privacy": "private"
|
|
289
|
-
},
|
|
290
|
-
{
|
|
291
|
-
"kind": "field",
|
|
292
|
-
"name": "sizeFromContext",
|
|
293
|
-
"type": {
|
|
294
|
-
"text": "number | undefined"
|
|
295
|
-
},
|
|
296
|
-
"privacy": "private"
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
"kind": "field",
|
|
300
|
-
"name": "name",
|
|
306
|
+
"name": "type",
|
|
301
307
|
"type": {
|
|
302
|
-
"text": "
|
|
308
|
+
"text": "BadgeType | undefined"
|
|
303
309
|
},
|
|
304
|
-
"description": "
|
|
305
|
-
"attribute": "
|
|
310
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
311
|
+
"attribute": "type",
|
|
306
312
|
"reflects": true
|
|
307
313
|
},
|
|
308
314
|
{
|
|
@@ -311,7 +317,7 @@
|
|
|
311
317
|
"type": {
|
|
312
318
|
"text": "number | undefined"
|
|
313
319
|
},
|
|
314
|
-
"description": "
|
|
320
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
315
321
|
"attribute": "size"
|
|
316
322
|
},
|
|
317
323
|
{
|
|
@@ -320,74 +326,60 @@
|
|
|
320
326
|
"type": {
|
|
321
327
|
"text": "string | undefined"
|
|
322
328
|
},
|
|
323
|
-
"description": "Length unit attribute for
|
|
329
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
324
330
|
"attribute": "length-unit"
|
|
325
331
|
},
|
|
326
332
|
{
|
|
327
333
|
"kind": "field",
|
|
328
|
-
"name": "
|
|
334
|
+
"name": "iconName",
|
|
329
335
|
"type": {
|
|
330
|
-
"text": "string |
|
|
336
|
+
"text": "string | undefined"
|
|
331
337
|
},
|
|
332
|
-
"
|
|
333
|
-
"
|
|
334
|
-
"attribute": "aria-label"
|
|
338
|
+
"description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
|
|
339
|
+
"attribute": "icon-name"
|
|
335
340
|
},
|
|
336
341
|
{
|
|
337
342
|
"kind": "field",
|
|
338
|
-
"name": "
|
|
339
|
-
"
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
"
|
|
344
|
-
"name": "getIconData",
|
|
345
|
-
"privacy": "private",
|
|
346
|
-
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
343
|
+
"name": "text",
|
|
344
|
+
"type": {
|
|
345
|
+
"text": "string | undefined"
|
|
346
|
+
},
|
|
347
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
|
348
|
+
"attribute": "text"
|
|
347
349
|
},
|
|
348
350
|
{
|
|
349
351
|
"kind": "method",
|
|
350
352
|
"name": "updateSize",
|
|
351
|
-
"privacy": "private",
|
|
352
|
-
"description": "Updates the size by setting the width and height"
|
|
353
|
-
},
|
|
354
|
-
{
|
|
355
|
-
"kind": "method",
|
|
356
|
-
"name": "setRoleOnIcon",
|
|
357
353
|
"privacy": "private"
|
|
358
354
|
},
|
|
359
355
|
{
|
|
360
356
|
"kind": "method",
|
|
361
|
-
"name": "
|
|
362
|
-
"privacy": "private"
|
|
357
|
+
"name": "iconTemplate"
|
|
363
358
|
},
|
|
364
359
|
{
|
|
365
360
|
"kind": "method",
|
|
366
|
-
"name": "
|
|
367
|
-
"privacy": "private"
|
|
361
|
+
"name": "textTemplate"
|
|
368
362
|
},
|
|
369
363
|
{
|
|
370
|
-
"kind": "
|
|
371
|
-
"name": "
|
|
372
|
-
"privacy": "private",
|
|
373
|
-
"readonly": true
|
|
364
|
+
"kind": "method",
|
|
365
|
+
"name": "warningTemplate"
|
|
374
366
|
}
|
|
375
367
|
],
|
|
376
368
|
"attributes": [
|
|
377
369
|
{
|
|
378
|
-
"name": "
|
|
370
|
+
"name": "type",
|
|
379
371
|
"type": {
|
|
380
|
-
"text": "
|
|
372
|
+
"text": "BadgeType | undefined"
|
|
381
373
|
},
|
|
382
|
-
"description": "
|
|
383
|
-
"fieldName": "
|
|
374
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
375
|
+
"fieldName": "type"
|
|
384
376
|
},
|
|
385
377
|
{
|
|
386
378
|
"name": "size",
|
|
387
379
|
"type": {
|
|
388
380
|
"text": "number | undefined"
|
|
389
381
|
},
|
|
390
|
-
"description": "
|
|
382
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
391
383
|
"fieldName": "size"
|
|
392
384
|
},
|
|
393
385
|
{
|
|
@@ -395,25 +387,33 @@
|
|
|
395
387
|
"type": {
|
|
396
388
|
"text": "string | undefined"
|
|
397
389
|
},
|
|
398
|
-
"description": "Length unit attribute for
|
|
390
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
399
391
|
"fieldName": "lengthUnit"
|
|
400
392
|
},
|
|
401
393
|
{
|
|
402
|
-
"name": "
|
|
394
|
+
"name": "icon-name",
|
|
403
395
|
"type": {
|
|
404
|
-
"text": "string |
|
|
396
|
+
"text": "string | undefined"
|
|
405
397
|
},
|
|
406
|
-
"
|
|
407
|
-
"
|
|
408
|
-
|
|
398
|
+
"description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
|
|
399
|
+
"fieldName": "iconName"
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "text",
|
|
403
|
+
"type": {
|
|
404
|
+
"text": "string | undefined"
|
|
405
|
+
},
|
|
406
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
|
407
|
+
"fieldName": "text"
|
|
409
408
|
}
|
|
410
409
|
],
|
|
411
410
|
"superclass": {
|
|
412
411
|
"name": "Component",
|
|
413
412
|
"module": "/src/models"
|
|
414
413
|
},
|
|
415
|
-
"tagName": "mdc-
|
|
416
|
-
"
|
|
414
|
+
"tagName": "mdc-badge",
|
|
415
|
+
"summary": "This is MyElement",
|
|
416
|
+
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
|
|
417
417
|
"customElement": true
|
|
418
418
|
}
|
|
419
419
|
],
|
|
@@ -422,8 +422,8 @@
|
|
|
422
422
|
"kind": "js",
|
|
423
423
|
"name": "default",
|
|
424
424
|
"declaration": {
|
|
425
|
-
"name": "
|
|
426
|
-
"module": "components/
|
|
425
|
+
"name": "Badge",
|
|
426
|
+
"module": "components/badge/badge.component.js"
|
|
427
427
|
}
|
|
428
428
|
}
|
|
429
429
|
]
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as Avatar } from './avatar';
|
|
2
|
-
export { default as Badge } from './badge';
|
|
3
2
|
export { default as Icon } from './icon';
|
|
3
|
+
export { default as Badge } from './badge';
|
|
4
4
|
export { default as IconProvider } from './iconprovider';
|
|
5
5
|
export { default as Text } from './text';
|
|
6
6
|
export { default as ThemeProvider } from './themeprovider';
|
package/dist/react/index.js
CHANGED
|
@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ThemeProvider = exports.Text = exports.IconProvider = exports.
|
|
6
|
+
exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Badge = exports.Icon = exports.Avatar = void 0;
|
|
7
7
|
var avatar_1 = require("./avatar");
|
|
8
8
|
Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
|
|
9
|
-
var badge_1 = require("./badge");
|
|
10
|
-
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
|
|
11
9
|
var icon_1 = require("./icon");
|
|
12
10
|
Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
|
|
11
|
+
var badge_1 = require("./badge");
|
|
12
|
+
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
|
|
13
13
|
var iconprovider_1 = require("./iconprovider");
|
|
14
14
|
Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
|
|
15
15
|
var text_1 = require("./text");
|
package/package.json
CHANGED