@momentum-design/components 0.0.25 → 0.0.27
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +15 -15
- package/dist/browser/index.js.map +3 -3
- 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