@momentum-design/components 0.9.0 → 0.9.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/custom-elements.json +172 -172
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -114,6 +114,178 @@
|
|
|
114
114
|
}
|
|
115
115
|
]
|
|
116
116
|
},
|
|
117
|
+
{
|
|
118
|
+
"kind": "javascript-module",
|
|
119
|
+
"path": "components/icon/icon.component.js",
|
|
120
|
+
"declarations": [
|
|
121
|
+
{
|
|
122
|
+
"kind": "class",
|
|
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
|
+
{
|
|
127
|
+
"description": "Allows customization of the default fill color.",
|
|
128
|
+
"name": "--mdc-icon-fill-color"
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"members": [
|
|
132
|
+
{
|
|
133
|
+
"kind": "field",
|
|
134
|
+
"name": "iconData",
|
|
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",
|
|
159
|
+
"type": {
|
|
160
|
+
"text": "IconNames | undefined"
|
|
161
|
+
},
|
|
162
|
+
"description": "Name of the icon (= filename)",
|
|
163
|
+
"attribute": "name",
|
|
164
|
+
"reflects": true
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "size",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "number | undefined"
|
|
171
|
+
},
|
|
172
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
173
|
+
"attribute": "size"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"kind": "field",
|
|
177
|
+
"name": "lengthUnit",
|
|
178
|
+
"type": {
|
|
179
|
+
"text": "string | undefined"
|
|
180
|
+
},
|
|
181
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
182
|
+
"attribute": "length-unit"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"kind": "field",
|
|
186
|
+
"name": "ariaLabel",
|
|
187
|
+
"type": {
|
|
188
|
+
"text": "string | null"
|
|
189
|
+
},
|
|
190
|
+
"default": "null",
|
|
191
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
192
|
+
"attribute": "aria-label"
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"kind": "field",
|
|
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"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"kind": "method",
|
|
208
|
+
"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
|
+
"privacy": "private"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"kind": "method",
|
|
219
|
+
"name": "setAriaHiddenOnIcon",
|
|
220
|
+
"privacy": "private"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "method",
|
|
224
|
+
"name": "setAriaLabelOnIcon",
|
|
225
|
+
"privacy": "private"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"kind": "field",
|
|
229
|
+
"name": "computedIconSize",
|
|
230
|
+
"privacy": "private",
|
|
231
|
+
"readonly": true
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"attributes": [
|
|
235
|
+
{
|
|
236
|
+
"name": "name",
|
|
237
|
+
"type": {
|
|
238
|
+
"text": "IconNames | undefined"
|
|
239
|
+
},
|
|
240
|
+
"description": "Name of the icon (= filename)",
|
|
241
|
+
"fieldName": "name"
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"name": "size",
|
|
245
|
+
"type": {
|
|
246
|
+
"text": "number | undefined"
|
|
247
|
+
},
|
|
248
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
249
|
+
"fieldName": "size"
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"name": "length-unit",
|
|
253
|
+
"type": {
|
|
254
|
+
"text": "string | undefined"
|
|
255
|
+
},
|
|
256
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
257
|
+
"fieldName": "lengthUnit"
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "aria-label",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "string | null"
|
|
263
|
+
},
|
|
264
|
+
"default": "null",
|
|
265
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
266
|
+
"fieldName": "ariaLabel"
|
|
267
|
+
}
|
|
268
|
+
],
|
|
269
|
+
"superclass": {
|
|
270
|
+
"name": "Component",
|
|
271
|
+
"module": "/src/models"
|
|
272
|
+
},
|
|
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 */",
|
|
275
|
+
"customElement": true
|
|
276
|
+
}
|
|
277
|
+
],
|
|
278
|
+
"exports": [
|
|
279
|
+
{
|
|
280
|
+
"kind": "js",
|
|
281
|
+
"name": "default",
|
|
282
|
+
"declaration": {
|
|
283
|
+
"name": "Icon",
|
|
284
|
+
"module": "components/icon/icon.component.js"
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
]
|
|
288
|
+
},
|
|
117
289
|
{
|
|
118
290
|
"kind": "javascript-module",
|
|
119
291
|
"path": "components/badge/badge.component.js",
|
|
@@ -375,178 +547,6 @@
|
|
|
375
547
|
}
|
|
376
548
|
]
|
|
377
549
|
},
|
|
378
|
-
{
|
|
379
|
-
"kind": "javascript-module",
|
|
380
|
-
"path": "components/icon/icon.component.js",
|
|
381
|
-
"declarations": [
|
|
382
|
-
{
|
|
383
|
-
"kind": "class",
|
|
384
|
-
"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.",
|
|
385
|
-
"name": "Icon",
|
|
386
|
-
"cssProperties": [
|
|
387
|
-
{
|
|
388
|
-
"description": "Allows customization of the default fill color.",
|
|
389
|
-
"name": "--mdc-icon-fill-color"
|
|
390
|
-
}
|
|
391
|
-
],
|
|
392
|
-
"members": [
|
|
393
|
-
{
|
|
394
|
-
"kind": "field",
|
|
395
|
-
"name": "iconData",
|
|
396
|
-
"type": {
|
|
397
|
-
"text": "HTMLElement | undefined"
|
|
398
|
-
},
|
|
399
|
-
"privacy": "private"
|
|
400
|
-
},
|
|
401
|
-
{
|
|
402
|
-
"kind": "field",
|
|
403
|
-
"name": "lengthUnitFromContext",
|
|
404
|
-
"type": {
|
|
405
|
-
"text": "string | undefined"
|
|
406
|
-
},
|
|
407
|
-
"privacy": "private"
|
|
408
|
-
},
|
|
409
|
-
{
|
|
410
|
-
"kind": "field",
|
|
411
|
-
"name": "sizeFromContext",
|
|
412
|
-
"type": {
|
|
413
|
-
"text": "number | undefined"
|
|
414
|
-
},
|
|
415
|
-
"privacy": "private"
|
|
416
|
-
},
|
|
417
|
-
{
|
|
418
|
-
"kind": "field",
|
|
419
|
-
"name": "name",
|
|
420
|
-
"type": {
|
|
421
|
-
"text": "IconNames | undefined"
|
|
422
|
-
},
|
|
423
|
-
"description": "Name of the icon (= filename)",
|
|
424
|
-
"attribute": "name",
|
|
425
|
-
"reflects": true
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
"kind": "field",
|
|
429
|
-
"name": "size",
|
|
430
|
-
"type": {
|
|
431
|
-
"text": "number | undefined"
|
|
432
|
-
},
|
|
433
|
-
"description": "Size of the icon (works in combination with length unit)",
|
|
434
|
-
"attribute": "size"
|
|
435
|
-
},
|
|
436
|
-
{
|
|
437
|
-
"kind": "field",
|
|
438
|
-
"name": "lengthUnit",
|
|
439
|
-
"type": {
|
|
440
|
-
"text": "string | undefined"
|
|
441
|
-
},
|
|
442
|
-
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
443
|
-
"attribute": "length-unit"
|
|
444
|
-
},
|
|
445
|
-
{
|
|
446
|
-
"kind": "field",
|
|
447
|
-
"name": "ariaLabel",
|
|
448
|
-
"type": {
|
|
449
|
-
"text": "string | null"
|
|
450
|
-
},
|
|
451
|
-
"default": "null",
|
|
452
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
453
|
-
"attribute": "aria-label"
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
"kind": "field",
|
|
457
|
-
"name": "iconProviderContext",
|
|
458
|
-
"privacy": "private",
|
|
459
|
-
"readonly": true
|
|
460
|
-
},
|
|
461
|
-
{
|
|
462
|
-
"kind": "method",
|
|
463
|
-
"name": "getIconData",
|
|
464
|
-
"privacy": "private",
|
|
465
|
-
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
466
|
-
},
|
|
467
|
-
{
|
|
468
|
-
"kind": "method",
|
|
469
|
-
"name": "updateSize",
|
|
470
|
-
"privacy": "private",
|
|
471
|
-
"description": "Updates the size by setting the width and height"
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"kind": "method",
|
|
475
|
-
"name": "setRoleOnIcon",
|
|
476
|
-
"privacy": "private"
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
"kind": "method",
|
|
480
|
-
"name": "setAriaHiddenOnIcon",
|
|
481
|
-
"privacy": "private"
|
|
482
|
-
},
|
|
483
|
-
{
|
|
484
|
-
"kind": "method",
|
|
485
|
-
"name": "setAriaLabelOnIcon",
|
|
486
|
-
"privacy": "private"
|
|
487
|
-
},
|
|
488
|
-
{
|
|
489
|
-
"kind": "field",
|
|
490
|
-
"name": "computedIconSize",
|
|
491
|
-
"privacy": "private",
|
|
492
|
-
"readonly": true
|
|
493
|
-
}
|
|
494
|
-
],
|
|
495
|
-
"attributes": [
|
|
496
|
-
{
|
|
497
|
-
"name": "name",
|
|
498
|
-
"type": {
|
|
499
|
-
"text": "IconNames | undefined"
|
|
500
|
-
},
|
|
501
|
-
"description": "Name of the icon (= filename)",
|
|
502
|
-
"fieldName": "name"
|
|
503
|
-
},
|
|
504
|
-
{
|
|
505
|
-
"name": "size",
|
|
506
|
-
"type": {
|
|
507
|
-
"text": "number | undefined"
|
|
508
|
-
},
|
|
509
|
-
"description": "Size of the icon (works in combination with length unit)",
|
|
510
|
-
"fieldName": "size"
|
|
511
|
-
},
|
|
512
|
-
{
|
|
513
|
-
"name": "length-unit",
|
|
514
|
-
"type": {
|
|
515
|
-
"text": "string | undefined"
|
|
516
|
-
},
|
|
517
|
-
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
518
|
-
"fieldName": "lengthUnit"
|
|
519
|
-
},
|
|
520
|
-
{
|
|
521
|
-
"name": "aria-label",
|
|
522
|
-
"type": {
|
|
523
|
-
"text": "string | null"
|
|
524
|
-
},
|
|
525
|
-
"default": "null",
|
|
526
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
527
|
-
"fieldName": "ariaLabel"
|
|
528
|
-
}
|
|
529
|
-
],
|
|
530
|
-
"superclass": {
|
|
531
|
-
"name": "Component",
|
|
532
|
-
"module": "/src/models"
|
|
533
|
-
},
|
|
534
|
-
"tagName": "mdc-icon",
|
|
535
|
-
"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 */",
|
|
536
|
-
"customElement": true
|
|
537
|
-
}
|
|
538
|
-
],
|
|
539
|
-
"exports": [
|
|
540
|
-
{
|
|
541
|
-
"kind": "js",
|
|
542
|
-
"name": "default",
|
|
543
|
-
"declaration": {
|
|
544
|
-
"name": "Icon",
|
|
545
|
-
"module": "components/icon/icon.component.js"
|
|
546
|
-
}
|
|
547
|
-
}
|
|
548
|
-
]
|
|
549
|
-
},
|
|
550
550
|
{
|
|
551
551
|
"kind": "javascript-module",
|
|
552
552
|
"path": "components/iconprovider/iconprovider.component.js",
|
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 Presence } from './presence';
|
|
6
6
|
export { default as Text } from './text';
|
package/dist/react/index.js
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 Presence } from './presence';
|
|
6
6
|
export { default as Text } from './text';
|
package/package.json
CHANGED