@momentum-design/components 0.2.1 → 0.2.2
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,51 +116,27 @@
|
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
"kind": "javascript-module",
|
|
119
|
-
"path": "components/
|
|
119
|
+
"path": "components/badge/badge.component.js",
|
|
120
120
|
"declarations": [
|
|
121
121
|
{
|
|
122
122
|
"kind": "class",
|
|
123
|
-
"description": "
|
|
124
|
-
"name": "
|
|
125
|
-
"
|
|
123
|
+
"description": "",
|
|
124
|
+
"name": "Badge",
|
|
125
|
+
"slots": [
|
|
126
126
|
{
|
|
127
|
-
"description": "
|
|
128
|
-
"name": "
|
|
127
|
+
"description": "This is a default/unnamed slot",
|
|
128
|
+
"name": ""
|
|
129
129
|
}
|
|
130
130
|
],
|
|
131
131
|
"members": [
|
|
132
132
|
{
|
|
133
133
|
"kind": "field",
|
|
134
|
-
"name": "
|
|
135
|
-
"type": {
|
|
136
|
-
"text": "HTMLElement | undefined"
|
|
137
|
-
},
|
|
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",
|
|
134
|
+
"name": "type",
|
|
159
135
|
"type": {
|
|
160
|
-
"text": "
|
|
136
|
+
"text": "BadgeType | undefined"
|
|
161
137
|
},
|
|
162
|
-
"description": "
|
|
163
|
-
"attribute": "
|
|
138
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
139
|
+
"attribute": "type",
|
|
164
140
|
"reflects": true
|
|
165
141
|
},
|
|
166
142
|
{
|
|
@@ -169,7 +145,7 @@
|
|
|
169
145
|
"type": {
|
|
170
146
|
"text": "number | undefined"
|
|
171
147
|
},
|
|
172
|
-
"description": "
|
|
148
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
173
149
|
"attribute": "size"
|
|
174
150
|
},
|
|
175
151
|
{
|
|
@@ -178,74 +154,60 @@
|
|
|
178
154
|
"type": {
|
|
179
155
|
"text": "string | undefined"
|
|
180
156
|
},
|
|
181
|
-
"description": "Length unit attribute for
|
|
157
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
182
158
|
"attribute": "length-unit"
|
|
183
159
|
},
|
|
184
160
|
{
|
|
185
161
|
"kind": "field",
|
|
186
|
-
"name": "
|
|
162
|
+
"name": "iconName",
|
|
187
163
|
"type": {
|
|
188
|
-
"text": "string |
|
|
164
|
+
"text": "string | undefined"
|
|
189
165
|
},
|
|
190
|
-
"
|
|
191
|
-
"
|
|
192
|
-
"attribute": "aria-label"
|
|
166
|
+
"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.",
|
|
167
|
+
"attribute": "icon-name"
|
|
193
168
|
},
|
|
194
169
|
{
|
|
195
170
|
"kind": "field",
|
|
196
|
-
"name": "
|
|
197
|
-
"
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
"
|
|
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"
|
|
171
|
+
"name": "text",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "string | undefined"
|
|
174
|
+
},
|
|
175
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
|
176
|
+
"attribute": "text"
|
|
205
177
|
},
|
|
206
178
|
{
|
|
207
179
|
"kind": "method",
|
|
208
180
|
"name": "updateSize",
|
|
209
|
-
"privacy": "private",
|
|
210
|
-
"description": "Updates the size by setting the width and height"
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
"kind": "method",
|
|
214
|
-
"name": "setRoleOnIcon",
|
|
215
181
|
"privacy": "private"
|
|
216
182
|
},
|
|
217
183
|
{
|
|
218
184
|
"kind": "method",
|
|
219
|
-
"name": "
|
|
220
|
-
"privacy": "private"
|
|
185
|
+
"name": "iconTemplate"
|
|
221
186
|
},
|
|
222
187
|
{
|
|
223
188
|
"kind": "method",
|
|
224
|
-
"name": "
|
|
225
|
-
"privacy": "private"
|
|
189
|
+
"name": "textTemplate"
|
|
226
190
|
},
|
|
227
191
|
{
|
|
228
|
-
"kind": "
|
|
229
|
-
"name": "
|
|
230
|
-
"privacy": "private",
|
|
231
|
-
"readonly": true
|
|
192
|
+
"kind": "method",
|
|
193
|
+
"name": "warningTemplate"
|
|
232
194
|
}
|
|
233
195
|
],
|
|
234
196
|
"attributes": [
|
|
235
197
|
{
|
|
236
|
-
"name": "
|
|
198
|
+
"name": "type",
|
|
237
199
|
"type": {
|
|
238
|
-
"text": "
|
|
200
|
+
"text": "BadgeType | undefined"
|
|
239
201
|
},
|
|
240
|
-
"description": "
|
|
241
|
-
"fieldName": "
|
|
202
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
203
|
+
"fieldName": "type"
|
|
242
204
|
},
|
|
243
205
|
{
|
|
244
206
|
"name": "size",
|
|
245
207
|
"type": {
|
|
246
208
|
"text": "number | undefined"
|
|
247
209
|
},
|
|
248
|
-
"description": "
|
|
210
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
249
211
|
"fieldName": "size"
|
|
250
212
|
},
|
|
251
213
|
{
|
|
@@ -253,25 +215,33 @@
|
|
|
253
215
|
"type": {
|
|
254
216
|
"text": "string | undefined"
|
|
255
217
|
},
|
|
256
|
-
"description": "Length unit attribute for
|
|
218
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
257
219
|
"fieldName": "lengthUnit"
|
|
258
220
|
},
|
|
259
221
|
{
|
|
260
|
-
"name": "
|
|
222
|
+
"name": "icon-name",
|
|
261
223
|
"type": {
|
|
262
|
-
"text": "string |
|
|
224
|
+
"text": "string | undefined"
|
|
263
225
|
},
|
|
264
|
-
"
|
|
265
|
-
"
|
|
266
|
-
|
|
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",
|
|
231
|
+
"type": {
|
|
232
|
+
"text": "string | undefined"
|
|
233
|
+
},
|
|
234
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
|
235
|
+
"fieldName": "text"
|
|
267
236
|
}
|
|
268
237
|
],
|
|
269
238
|
"superclass": {
|
|
270
239
|
"name": "Component",
|
|
271
240
|
"module": "/src/models"
|
|
272
241
|
},
|
|
273
|
-
"tagName": "mdc-
|
|
274
|
-
"
|
|
242
|
+
"tagName": "mdc-badge",
|
|
243
|
+
"summary": "This is MyElement",
|
|
244
|
+
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
|
|
275
245
|
"customElement": true
|
|
276
246
|
}
|
|
277
247
|
],
|
|
@@ -280,35 +250,59 @@
|
|
|
280
250
|
"kind": "js",
|
|
281
251
|
"name": "default",
|
|
282
252
|
"declaration": {
|
|
283
|
-
"name": "
|
|
284
|
-
"module": "components/
|
|
253
|
+
"name": "Badge",
|
|
254
|
+
"module": "components/badge/badge.component.js"
|
|
285
255
|
}
|
|
286
256
|
}
|
|
287
257
|
]
|
|
288
258
|
},
|
|
289
259
|
{
|
|
290
260
|
"kind": "javascript-module",
|
|
291
|
-
"path": "components/
|
|
261
|
+
"path": "components/icon/icon.component.js",
|
|
292
262
|
"declarations": [
|
|
293
263
|
{
|
|
294
264
|
"kind": "class",
|
|
295
|
-
"description": "",
|
|
296
|
-
"name": "
|
|
297
|
-
"
|
|
265
|
+
"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.",
|
|
266
|
+
"name": "Icon",
|
|
267
|
+
"cssProperties": [
|
|
298
268
|
{
|
|
299
|
-
"description": "
|
|
300
|
-
"name": ""
|
|
269
|
+
"description": "Allows customization of the default fill color.",
|
|
270
|
+
"name": "--mdc-icon-fill-color"
|
|
301
271
|
}
|
|
302
272
|
],
|
|
303
273
|
"members": [
|
|
304
274
|
{
|
|
305
275
|
"kind": "field",
|
|
306
|
-
"name": "
|
|
276
|
+
"name": "iconData",
|
|
307
277
|
"type": {
|
|
308
|
-
"text": "
|
|
278
|
+
"text": "HTMLElement | undefined"
|
|
309
279
|
},
|
|
310
|
-
"
|
|
311
|
-
|
|
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",
|
|
301
|
+
"type": {
|
|
302
|
+
"text": "string | undefined"
|
|
303
|
+
},
|
|
304
|
+
"description": "Name of the icon (= filename)",
|
|
305
|
+
"attribute": "name",
|
|
312
306
|
"reflects": true
|
|
313
307
|
},
|
|
314
308
|
{
|
|
@@ -317,7 +311,7 @@
|
|
|
317
311
|
"type": {
|
|
318
312
|
"text": "number | undefined"
|
|
319
313
|
},
|
|
320
|
-
"description": "
|
|
314
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
321
315
|
"attribute": "size"
|
|
322
316
|
},
|
|
323
317
|
{
|
|
@@ -326,60 +320,74 @@
|
|
|
326
320
|
"type": {
|
|
327
321
|
"text": "string | undefined"
|
|
328
322
|
},
|
|
329
|
-
"description": "Length unit attribute for
|
|
323
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
330
324
|
"attribute": "length-unit"
|
|
331
325
|
},
|
|
332
326
|
{
|
|
333
327
|
"kind": "field",
|
|
334
|
-
"name": "
|
|
328
|
+
"name": "ariaLabel",
|
|
335
329
|
"type": {
|
|
336
|
-
"text": "string |
|
|
330
|
+
"text": "string | null"
|
|
337
331
|
},
|
|
338
|
-
"
|
|
339
|
-
"
|
|
332
|
+
"default": "null",
|
|
333
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
334
|
+
"attribute": "aria-label"
|
|
340
335
|
},
|
|
341
336
|
{
|
|
342
337
|
"kind": "field",
|
|
343
|
-
"name": "
|
|
344
|
-
"
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
"
|
|
338
|
+
"name": "iconProviderContext",
|
|
339
|
+
"privacy": "private",
|
|
340
|
+
"readonly": true
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"kind": "method",
|
|
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"
|
|
349
347
|
},
|
|
350
348
|
{
|
|
351
349
|
"kind": "method",
|
|
352
350
|
"name": "updateSize",
|
|
353
|
-
"privacy": "private"
|
|
351
|
+
"privacy": "private",
|
|
352
|
+
"description": "Updates the size by setting the width and height"
|
|
354
353
|
},
|
|
355
354
|
{
|
|
356
355
|
"kind": "method",
|
|
357
|
-
"name": "
|
|
356
|
+
"name": "setRoleOnIcon",
|
|
357
|
+
"privacy": "private"
|
|
358
358
|
},
|
|
359
359
|
{
|
|
360
360
|
"kind": "method",
|
|
361
|
-
"name": "
|
|
361
|
+
"name": "setAriaHiddenOnIcon",
|
|
362
|
+
"privacy": "private"
|
|
362
363
|
},
|
|
363
364
|
{
|
|
364
365
|
"kind": "method",
|
|
365
|
-
"name": "
|
|
366
|
+
"name": "setAriaLabelOnIcon",
|
|
367
|
+
"privacy": "private"
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"kind": "field",
|
|
371
|
+
"name": "computedIconSize",
|
|
372
|
+
"privacy": "private",
|
|
373
|
+
"readonly": true
|
|
366
374
|
}
|
|
367
375
|
],
|
|
368
376
|
"attributes": [
|
|
369
377
|
{
|
|
370
|
-
"name": "
|
|
378
|
+
"name": "name",
|
|
371
379
|
"type": {
|
|
372
|
-
"text": "
|
|
380
|
+
"text": "string | undefined"
|
|
373
381
|
},
|
|
374
|
-
"description": "
|
|
375
|
-
"fieldName": "
|
|
382
|
+
"description": "Name of the icon (= filename)",
|
|
383
|
+
"fieldName": "name"
|
|
376
384
|
},
|
|
377
385
|
{
|
|
378
386
|
"name": "size",
|
|
379
387
|
"type": {
|
|
380
388
|
"text": "number | undefined"
|
|
381
389
|
},
|
|
382
|
-
"description": "
|
|
390
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
383
391
|
"fieldName": "size"
|
|
384
392
|
},
|
|
385
393
|
{
|
|
@@ -387,33 +395,25 @@
|
|
|
387
395
|
"type": {
|
|
388
396
|
"text": "string | undefined"
|
|
389
397
|
},
|
|
390
|
-
"description": "Length unit attribute for
|
|
398
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
391
399
|
"fieldName": "lengthUnit"
|
|
392
400
|
},
|
|
393
401
|
{
|
|
394
|
-
"name": "
|
|
395
|
-
"type": {
|
|
396
|
-
"text": "string | undefined"
|
|
397
|
-
},
|
|
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",
|
|
402
|
+
"name": "aria-label",
|
|
403
403
|
"type": {
|
|
404
|
-
"text": "string |
|
|
404
|
+
"text": "string | null"
|
|
405
405
|
},
|
|
406
|
-
"
|
|
407
|
-
"
|
|
406
|
+
"default": "null",
|
|
407
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
408
|
+
"fieldName": "ariaLabel"
|
|
408
409
|
}
|
|
409
410
|
],
|
|
410
411
|
"superclass": {
|
|
411
412
|
"name": "Component",
|
|
412
413
|
"module": "/src/models"
|
|
413
414
|
},
|
|
414
|
-
"tagName": "mdc-
|
|
415
|
-
"
|
|
416
|
-
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
|
|
415
|
+
"tagName": "mdc-icon",
|
|
416
|
+
"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 */",
|
|
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": "Icon",
|
|
426
|
+
"module": "components/icon/icon.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 Icon } from './icon';
|
|
3
2
|
export { default as Badge } from './badge';
|
|
3
|
+
export { default as Icon } from './icon';
|
|
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.Icon = exports.Badge = 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 icon_1 = require("./icon");
|
|
10
|
-
Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
|
|
11
9
|
var badge_1 = require("./badge");
|
|
12
10
|
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
|
|
11
|
+
var icon_1 = require("./icon");
|
|
12
|
+
Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_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