@momentum-design/components 0.0.26 → 0.0.27
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/dist/browser/index.js.map +2 -2
- package/dist/custom-elements.json +117 -117
- package/dist/models/component/component.component.d.ts +3 -0
- package/dist/models/component/component.component.js +3 -0
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -116,27 +116,37 @@
|
|
|
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
|
-
"slots": [
|
|
126
|
-
{
|
|
127
|
-
"description": "This is a default/unnamed slot",
|
|
128
|
-
"name": ""
|
|
129
|
-
}
|
|
130
|
-
],
|
|
123
|
+
"description": "Icon component, which has to be mounted inside of a `IconProvider`\ncomponent.\n\nThe `IconProvider` component defines where icons should be consumed from (`url`).\nThis `Icon` component accepts the `name` attribute, which will be\nthe file name of the icon to be loaded from the given `url`.\n\nOnce fetched, the icon will be mounted. If fetching wasn't successful,\nnothing will be shown.\n\nThe `scale` attribute allows scaling the icon based on the provided\n`length-unit` attribute (which will either come from the IconProvider or\ncould be overridden per icon). For example:\nif `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n`width: 1em; height: 1em`.\n\nFor accessibility the `role` and `aria-label` of the icon can be set.",
|
|
124
|
+
"name": "Icon",
|
|
131
125
|
"members": [
|
|
132
126
|
{
|
|
133
127
|
"kind": "field",
|
|
134
|
-
"name": "
|
|
128
|
+
"name": "iconData",
|
|
135
129
|
"type": {
|
|
136
|
-
"text": "
|
|
130
|
+
"text": "HTMLElement | undefined"
|
|
137
131
|
},
|
|
138
|
-
"
|
|
139
|
-
|
|
132
|
+
"privacy": "private"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"kind": "field",
|
|
136
|
+
"name": "lengthUnitFromContext",
|
|
137
|
+
"type": {
|
|
138
|
+
"text": "string | undefined"
|
|
139
|
+
},
|
|
140
|
+
"privacy": "private"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "field",
|
|
144
|
+
"name": "name",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "string | undefined"
|
|
147
|
+
},
|
|
148
|
+
"description": "Name of the icon (= filename)",
|
|
149
|
+
"attribute": "name",
|
|
140
150
|
"reflects": true
|
|
141
151
|
},
|
|
142
152
|
{
|
|
@@ -145,7 +155,7 @@
|
|
|
145
155
|
"type": {
|
|
146
156
|
"text": "number | undefined"
|
|
147
157
|
},
|
|
148
|
-
"description": "Scale of the
|
|
158
|
+
"description": "Scale of the icon (works in combination with length unit)",
|
|
149
159
|
"attribute": "scale"
|
|
150
160
|
},
|
|
151
161
|
{
|
|
@@ -154,60 +164,72 @@
|
|
|
154
164
|
"type": {
|
|
155
165
|
"text": "string | undefined"
|
|
156
166
|
},
|
|
157
|
-
"description": "Length unit attribute for
|
|
167
|
+
"description": "Length unit attribute for overridding length-unit from `IconProvider`",
|
|
158
168
|
"attribute": "length-unit"
|
|
159
169
|
},
|
|
160
170
|
{
|
|
161
171
|
"kind": "field",
|
|
162
|
-
"name": "
|
|
172
|
+
"name": "role",
|
|
163
173
|
"type": {
|
|
164
|
-
"text": "string |
|
|
174
|
+
"text": "string | null"
|
|
165
175
|
},
|
|
166
|
-
"
|
|
167
|
-
"
|
|
176
|
+
"default": "null",
|
|
177
|
+
"description": "Role attribute to be set for accessibility",
|
|
178
|
+
"attribute": "role"
|
|
168
179
|
},
|
|
169
180
|
{
|
|
170
181
|
"kind": "field",
|
|
171
|
-
"name": "
|
|
182
|
+
"name": "ariaLabel",
|
|
172
183
|
"type": {
|
|
173
|
-
"text": "string |
|
|
184
|
+
"text": "string | null"
|
|
174
185
|
},
|
|
175
|
-
"
|
|
176
|
-
"
|
|
186
|
+
"default": "null",
|
|
187
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
188
|
+
"attribute": "aria-label"
|
|
177
189
|
},
|
|
178
190
|
{
|
|
179
|
-
"kind": "
|
|
180
|
-
"name": "
|
|
191
|
+
"kind": "field",
|
|
192
|
+
"name": "iconProviderContext",
|
|
181
193
|
"privacy": "private"
|
|
182
194
|
},
|
|
183
195
|
{
|
|
184
196
|
"kind": "method",
|
|
185
|
-
"name": "
|
|
197
|
+
"name": "getIconData",
|
|
198
|
+
"privacy": "private",
|
|
199
|
+
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
186
200
|
},
|
|
187
201
|
{
|
|
188
202
|
"kind": "method",
|
|
189
|
-
"name": "
|
|
203
|
+
"name": "updateSize",
|
|
204
|
+
"privacy": "private",
|
|
205
|
+
"description": "Updates the size by setting the width and height"
|
|
190
206
|
},
|
|
191
207
|
{
|
|
192
208
|
"kind": "method",
|
|
193
|
-
"name": "
|
|
209
|
+
"name": "setRoleOnIcon",
|
|
210
|
+
"privacy": "private"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"kind": "method",
|
|
214
|
+
"name": "setAriaLabelOnIcon",
|
|
215
|
+
"privacy": "private"
|
|
194
216
|
}
|
|
195
217
|
],
|
|
196
218
|
"attributes": [
|
|
197
219
|
{
|
|
198
|
-
"name": "
|
|
220
|
+
"name": "name",
|
|
199
221
|
"type": {
|
|
200
|
-
"text": "
|
|
222
|
+
"text": "string | undefined"
|
|
201
223
|
},
|
|
202
|
-
"description": "
|
|
203
|
-
"fieldName": "
|
|
224
|
+
"description": "Name of the icon (= filename)",
|
|
225
|
+
"fieldName": "name"
|
|
204
226
|
},
|
|
205
227
|
{
|
|
206
228
|
"name": "scale",
|
|
207
229
|
"type": {
|
|
208
230
|
"text": "number | undefined"
|
|
209
231
|
},
|
|
210
|
-
"description": "Scale of the
|
|
232
|
+
"description": "Scale of the icon (works in combination with length unit)",
|
|
211
233
|
"fieldName": "scale"
|
|
212
234
|
},
|
|
213
235
|
{
|
|
@@ -215,33 +237,34 @@
|
|
|
215
237
|
"type": {
|
|
216
238
|
"text": "string | undefined"
|
|
217
239
|
},
|
|
218
|
-
"description": "Length unit attribute for
|
|
240
|
+
"description": "Length unit attribute for overridding length-unit from `IconProvider`",
|
|
219
241
|
"fieldName": "lengthUnit"
|
|
220
242
|
},
|
|
221
243
|
{
|
|
222
|
-
"name": "
|
|
244
|
+
"name": "role",
|
|
223
245
|
"type": {
|
|
224
|
-
"text": "string |
|
|
246
|
+
"text": "string | null"
|
|
225
247
|
},
|
|
226
|
-
"
|
|
227
|
-
"
|
|
248
|
+
"default": "null",
|
|
249
|
+
"description": "Role attribute to be set for accessibility",
|
|
250
|
+
"fieldName": "role"
|
|
228
251
|
},
|
|
229
252
|
{
|
|
230
|
-
"name": "
|
|
253
|
+
"name": "aria-label",
|
|
231
254
|
"type": {
|
|
232
|
-
"text": "string |
|
|
255
|
+
"text": "string | null"
|
|
233
256
|
},
|
|
234
|
-
"
|
|
235
|
-
"
|
|
257
|
+
"default": "null",
|
|
258
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
259
|
+
"fieldName": "ariaLabel"
|
|
236
260
|
}
|
|
237
261
|
],
|
|
238
262
|
"superclass": {
|
|
239
263
|
"name": "Component",
|
|
240
264
|
"module": "/src/models"
|
|
241
265
|
},
|
|
242
|
-
"tagName": "mdc-
|
|
243
|
-
"
|
|
244
|
-
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tag mdc-badge\n * @tagname mdc-badge\n */",
|
|
266
|
+
"tagName": "mdc-icon",
|
|
267
|
+
"jsDoc": "/**\n * Icon component, which has to be mounted inside of a `IconProvider`\n * component.\n *\n * The `IconProvider` component defines where icons should be consumed from (`url`).\n * This `Icon` component accepts the `name` attribute, which will be\n * the file name of the icon to be loaded from the given `url`.\n *\n * Once fetched, the icon will be mounted. If fetching wasn't successful,\n * nothing will be shown.\n *\n * The `scale` attribute allows scaling the icon based on the provided\n * `length-unit` attribute (which will either come from the IconProvider or\n * could be overridden per icon). For example:\n * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n * `width: 1em; height: 1em`.\n *\n * For accessibility the `role` and `aria-label` of the icon can be set.\n *\n * @tag mdc-icon\n * @tagname mdc-icon\n */",
|
|
245
268
|
"customElement": true
|
|
246
269
|
}
|
|
247
270
|
],
|
|
@@ -250,45 +273,35 @@
|
|
|
250
273
|
"kind": "js",
|
|
251
274
|
"name": "default",
|
|
252
275
|
"declaration": {
|
|
253
|
-
"name": "
|
|
254
|
-
"module": "components/
|
|
276
|
+
"name": "Icon",
|
|
277
|
+
"module": "components/icon/icon.component.js"
|
|
255
278
|
}
|
|
256
279
|
}
|
|
257
280
|
]
|
|
258
281
|
},
|
|
259
282
|
{
|
|
260
283
|
"kind": "javascript-module",
|
|
261
|
-
"path": "components/
|
|
284
|
+
"path": "components/badge/badge.component.js",
|
|
262
285
|
"declarations": [
|
|
263
286
|
{
|
|
264
287
|
"kind": "class",
|
|
265
|
-
"description": "
|
|
266
|
-
"name": "
|
|
267
|
-
"
|
|
268
|
-
{
|
|
269
|
-
"kind": "field",
|
|
270
|
-
"name": "iconData",
|
|
271
|
-
"type": {
|
|
272
|
-
"text": "HTMLElement | undefined"
|
|
273
|
-
},
|
|
274
|
-
"privacy": "private"
|
|
275
|
-
},
|
|
288
|
+
"description": "",
|
|
289
|
+
"name": "Badge",
|
|
290
|
+
"slots": [
|
|
276
291
|
{
|
|
277
|
-
"
|
|
278
|
-
"name": "
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
"privacy": "private"
|
|
283
|
-
},
|
|
292
|
+
"description": "This is a default/unnamed slot",
|
|
293
|
+
"name": ""
|
|
294
|
+
}
|
|
295
|
+
],
|
|
296
|
+
"members": [
|
|
284
297
|
{
|
|
285
298
|
"kind": "field",
|
|
286
|
-
"name": "
|
|
299
|
+
"name": "type",
|
|
287
300
|
"type": {
|
|
288
|
-
"text": "
|
|
301
|
+
"text": "BadgeType | undefined"
|
|
289
302
|
},
|
|
290
|
-
"description": "
|
|
291
|
-
"attribute": "
|
|
303
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
304
|
+
"attribute": "type",
|
|
292
305
|
"reflects": true
|
|
293
306
|
},
|
|
294
307
|
{
|
|
@@ -297,7 +310,7 @@
|
|
|
297
310
|
"type": {
|
|
298
311
|
"text": "number | undefined"
|
|
299
312
|
},
|
|
300
|
-
"description": "Scale of the
|
|
313
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
301
314
|
"attribute": "scale"
|
|
302
315
|
},
|
|
303
316
|
{
|
|
@@ -306,72 +319,60 @@
|
|
|
306
319
|
"type": {
|
|
307
320
|
"text": "string | undefined"
|
|
308
321
|
},
|
|
309
|
-
"description": "Length unit attribute for
|
|
322
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
310
323
|
"attribute": "length-unit"
|
|
311
324
|
},
|
|
312
325
|
{
|
|
313
326
|
"kind": "field",
|
|
314
|
-
"name": "
|
|
327
|
+
"name": "iconName",
|
|
315
328
|
"type": {
|
|
316
|
-
"text": "string |
|
|
329
|
+
"text": "string | undefined"
|
|
317
330
|
},
|
|
318
|
-
"
|
|
319
|
-
"
|
|
320
|
-
"attribute": "role"
|
|
331
|
+
"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.",
|
|
332
|
+
"attribute": "icon-name"
|
|
321
333
|
},
|
|
322
334
|
{
|
|
323
335
|
"kind": "field",
|
|
324
|
-
"name": "
|
|
336
|
+
"name": "text",
|
|
325
337
|
"type": {
|
|
326
|
-
"text": "string |
|
|
338
|
+
"text": "string | undefined"
|
|
327
339
|
},
|
|
328
|
-
"
|
|
329
|
-
"
|
|
330
|
-
"attribute": "aria-label"
|
|
331
|
-
},
|
|
332
|
-
{
|
|
333
|
-
"kind": "field",
|
|
334
|
-
"name": "iconProviderContext",
|
|
335
|
-
"privacy": "private"
|
|
340
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
|
341
|
+
"attribute": "text"
|
|
336
342
|
},
|
|
337
343
|
{
|
|
338
344
|
"kind": "method",
|
|
339
|
-
"name": "
|
|
340
|
-
"privacy": "private"
|
|
341
|
-
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
345
|
+
"name": "updateSize",
|
|
346
|
+
"privacy": "private"
|
|
342
347
|
},
|
|
343
348
|
{
|
|
344
349
|
"kind": "method",
|
|
345
|
-
"name": "
|
|
346
|
-
"privacy": "private",
|
|
347
|
-
"description": "Updates the size by setting the width and height"
|
|
350
|
+
"name": "iconTemplate"
|
|
348
351
|
},
|
|
349
352
|
{
|
|
350
353
|
"kind": "method",
|
|
351
|
-
"name": "
|
|
352
|
-
"privacy": "private"
|
|
354
|
+
"name": "textTemplate"
|
|
353
355
|
},
|
|
354
356
|
{
|
|
355
357
|
"kind": "method",
|
|
356
|
-
"name": "
|
|
357
|
-
"privacy": "private"
|
|
358
|
+
"name": "warningTemplate"
|
|
358
359
|
}
|
|
359
360
|
],
|
|
360
361
|
"attributes": [
|
|
361
362
|
{
|
|
362
|
-
"name": "
|
|
363
|
+
"name": "type",
|
|
363
364
|
"type": {
|
|
364
|
-
"text": "
|
|
365
|
+
"text": "BadgeType | undefined"
|
|
365
366
|
},
|
|
366
|
-
"description": "
|
|
367
|
-
"fieldName": "
|
|
367
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
368
|
+
"fieldName": "type"
|
|
368
369
|
},
|
|
369
370
|
{
|
|
370
371
|
"name": "scale",
|
|
371
372
|
"type": {
|
|
372
373
|
"text": "number | undefined"
|
|
373
374
|
},
|
|
374
|
-
"description": "Scale of the
|
|
375
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
375
376
|
"fieldName": "scale"
|
|
376
377
|
},
|
|
377
378
|
{
|
|
@@ -379,34 +380,33 @@
|
|
|
379
380
|
"type": {
|
|
380
381
|
"text": "string | undefined"
|
|
381
382
|
},
|
|
382
|
-
"description": "Length unit attribute for
|
|
383
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
383
384
|
"fieldName": "lengthUnit"
|
|
384
385
|
},
|
|
385
386
|
{
|
|
386
|
-
"name": "
|
|
387
|
+
"name": "icon-name",
|
|
387
388
|
"type": {
|
|
388
|
-
"text": "string |
|
|
389
|
+
"text": "string | undefined"
|
|
389
390
|
},
|
|
390
|
-
"
|
|
391
|
-
"
|
|
392
|
-
"fieldName": "role"
|
|
391
|
+
"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.",
|
|
392
|
+
"fieldName": "iconName"
|
|
393
393
|
},
|
|
394
394
|
{
|
|
395
|
-
"name": "
|
|
395
|
+
"name": "text",
|
|
396
396
|
"type": {
|
|
397
|
-
"text": "string |
|
|
397
|
+
"text": "string | undefined"
|
|
398
398
|
},
|
|
399
|
-
"
|
|
400
|
-
"
|
|
401
|
-
"fieldName": "ariaLabel"
|
|
399
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
|
400
|
+
"fieldName": "text"
|
|
402
401
|
}
|
|
403
402
|
],
|
|
404
403
|
"superclass": {
|
|
405
404
|
"name": "Component",
|
|
406
405
|
"module": "/src/models"
|
|
407
406
|
},
|
|
408
|
-
"tagName": "mdc-
|
|
409
|
-
"
|
|
407
|
+
"tagName": "mdc-badge",
|
|
408
|
+
"summary": "This is MyElement",
|
|
409
|
+
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tag mdc-badge\n * @tagname mdc-badge\n */",
|
|
410
410
|
"customElement": true
|
|
411
411
|
}
|
|
412
412
|
],
|
|
@@ -415,8 +415,8 @@
|
|
|
415
415
|
"kind": "js",
|
|
416
416
|
"name": "default",
|
|
417
417
|
"declaration": {
|
|
418
|
-
"name": "
|
|
419
|
-
"module": "components/
|
|
418
|
+
"name": "Badge",
|
|
419
|
+
"module": "components/badge/badge.component.js"
|
|
420
420
|
}
|
|
421
421
|
}
|
|
422
422
|
]
|
|
@@ -3,6 +3,9 @@ import { LitElement } from 'lit';
|
|
|
3
3
|
* Core Component class to ultimately be inherited by all Web Components within
|
|
4
4
|
* this package.
|
|
5
5
|
*
|
|
6
|
+
* LitElement defines class and style automatically to allow passing in styling
|
|
7
|
+
* overrides. We are keeping those to allow for further customization.
|
|
8
|
+
*
|
|
6
9
|
* @public
|
|
7
10
|
*/
|
|
8
11
|
declare class Component extends LitElement {
|
|
@@ -5,6 +5,9 @@ const lit_1 = require("lit");
|
|
|
5
5
|
* Core Component class to ultimately be inherited by all Web Components within
|
|
6
6
|
* this package.
|
|
7
7
|
*
|
|
8
|
+
* LitElement defines class and style automatically to allow passing in styling
|
|
9
|
+
* overrides. We are keeping those to allow for further customization.
|
|
10
|
+
*
|
|
8
11
|
* @public
|
|
9
12
|
*/
|
|
10
13
|
class Component extends lit_1.LitElement {
|
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