@momentum-design/components 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const lit_1 = require("lit");
|
|
4
|
+
// todo: use type tokens once the full set with fallbacks is available
|
|
4
5
|
const styles = (0, lit_1.css) `
|
|
5
6
|
:host {
|
|
6
|
-
// todo: use type tokens once the full set with fallbacks is available
|
|
7
7
|
--mdc-themeprovider-font-family: "Momentum";
|
|
8
8
|
--mdc-themeprovider-color-default: var(--mds-color-theme-text-primary-normal);
|
|
9
9
|
|
|
@@ -116,45 +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
|
-
"
|
|
126
|
-
{
|
|
127
|
-
"kind": "field",
|
|
128
|
-
"name": "iconData",
|
|
129
|
-
"type": {
|
|
130
|
-
"text": "HTMLElement | undefined"
|
|
131
|
-
},
|
|
132
|
-
"privacy": "private"
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
"kind": "field",
|
|
136
|
-
"name": "lengthUnitFromContext",
|
|
137
|
-
"type": {
|
|
138
|
-
"text": "string | undefined"
|
|
139
|
-
},
|
|
140
|
-
"privacy": "private"
|
|
141
|
-
},
|
|
123
|
+
"description": "",
|
|
124
|
+
"name": "Badge",
|
|
125
|
+
"slots": [
|
|
142
126
|
{
|
|
143
|
-
"
|
|
144
|
-
"name": "
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
"privacy": "private"
|
|
149
|
-
},
|
|
127
|
+
"description": "This is a default/unnamed slot",
|
|
128
|
+
"name": ""
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"members": [
|
|
150
132
|
{
|
|
151
133
|
"kind": "field",
|
|
152
|
-
"name": "
|
|
134
|
+
"name": "type",
|
|
153
135
|
"type": {
|
|
154
|
-
"text": "
|
|
136
|
+
"text": "BadgeType | undefined"
|
|
155
137
|
},
|
|
156
|
-
"description": "
|
|
157
|
-
"attribute": "
|
|
138
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
139
|
+
"attribute": "type",
|
|
158
140
|
"reflects": true
|
|
159
141
|
},
|
|
160
142
|
{
|
|
@@ -163,7 +145,7 @@
|
|
|
163
145
|
"type": {
|
|
164
146
|
"text": "number | undefined"
|
|
165
147
|
},
|
|
166
|
-
"description": "
|
|
148
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
167
149
|
"attribute": "size"
|
|
168
150
|
},
|
|
169
151
|
{
|
|
@@ -172,79 +154,60 @@
|
|
|
172
154
|
"type": {
|
|
173
155
|
"text": "string | undefined"
|
|
174
156
|
},
|
|
175
|
-
"description": "Length unit attribute for
|
|
157
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
176
158
|
"attribute": "length-unit"
|
|
177
159
|
},
|
|
178
160
|
{
|
|
179
161
|
"kind": "field",
|
|
180
|
-
"name": "
|
|
162
|
+
"name": "iconName",
|
|
181
163
|
"type": {
|
|
182
|
-
"text": "string |
|
|
164
|
+
"text": "string | undefined"
|
|
183
165
|
},
|
|
184
|
-
"
|
|
185
|
-
"
|
|
186
|
-
"attribute": "role"
|
|
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"
|
|
187
168
|
},
|
|
188
169
|
{
|
|
189
170
|
"kind": "field",
|
|
190
|
-
"name": "
|
|
171
|
+
"name": "text",
|
|
191
172
|
"type": {
|
|
192
|
-
"text": "string |
|
|
173
|
+
"text": "string | undefined"
|
|
193
174
|
},
|
|
194
|
-
"
|
|
195
|
-
"
|
|
196
|
-
"attribute": "aria-label"
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
"kind": "field",
|
|
200
|
-
"name": "iconProviderContext",
|
|
201
|
-
"privacy": "private",
|
|
202
|
-
"readonly": true
|
|
203
|
-
},
|
|
204
|
-
{
|
|
205
|
-
"kind": "method",
|
|
206
|
-
"name": "getIconData",
|
|
207
|
-
"privacy": "private",
|
|
208
|
-
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
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"
|
|
209
177
|
},
|
|
210
178
|
{
|
|
211
179
|
"kind": "method",
|
|
212
180
|
"name": "updateSize",
|
|
213
|
-
"privacy": "private"
|
|
214
|
-
"description": "Updates the size by setting the width and height"
|
|
181
|
+
"privacy": "private"
|
|
215
182
|
},
|
|
216
183
|
{
|
|
217
184
|
"kind": "method",
|
|
218
|
-
"name": "
|
|
219
|
-
"privacy": "private"
|
|
185
|
+
"name": "iconTemplate"
|
|
220
186
|
},
|
|
221
187
|
{
|
|
222
188
|
"kind": "method",
|
|
223
|
-
"name": "
|
|
224
|
-
"privacy": "private"
|
|
189
|
+
"name": "textTemplate"
|
|
225
190
|
},
|
|
226
191
|
{
|
|
227
|
-
"kind": "
|
|
228
|
-
"name": "
|
|
229
|
-
"privacy": "private",
|
|
230
|
-
"readonly": true
|
|
192
|
+
"kind": "method",
|
|
193
|
+
"name": "warningTemplate"
|
|
231
194
|
}
|
|
232
195
|
],
|
|
233
196
|
"attributes": [
|
|
234
197
|
{
|
|
235
|
-
"name": "
|
|
198
|
+
"name": "type",
|
|
236
199
|
"type": {
|
|
237
|
-
"text": "
|
|
200
|
+
"text": "BadgeType | undefined"
|
|
238
201
|
},
|
|
239
|
-
"description": "
|
|
240
|
-
"fieldName": "
|
|
202
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
|
203
|
+
"fieldName": "type"
|
|
241
204
|
},
|
|
242
205
|
{
|
|
243
206
|
"name": "size",
|
|
244
207
|
"type": {
|
|
245
208
|
"text": "number | undefined"
|
|
246
209
|
},
|
|
247
|
-
"description": "
|
|
210
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
|
248
211
|
"fieldName": "size"
|
|
249
212
|
},
|
|
250
213
|
{
|
|
@@ -252,34 +215,33 @@
|
|
|
252
215
|
"type": {
|
|
253
216
|
"text": "string | undefined"
|
|
254
217
|
},
|
|
255
|
-
"description": "Length unit attribute for
|
|
218
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
|
256
219
|
"fieldName": "lengthUnit"
|
|
257
220
|
},
|
|
258
221
|
{
|
|
259
|
-
"name": "
|
|
222
|
+
"name": "icon-name",
|
|
260
223
|
"type": {
|
|
261
|
-
"text": "string |
|
|
224
|
+
"text": "string | undefined"
|
|
262
225
|
},
|
|
263
|
-
"
|
|
264
|
-
"
|
|
265
|
-
"fieldName": "role"
|
|
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"
|
|
266
228
|
},
|
|
267
229
|
{
|
|
268
|
-
"name": "
|
|
230
|
+
"name": "text",
|
|
269
231
|
"type": {
|
|
270
|
-
"text": "string |
|
|
232
|
+
"text": "string | undefined"
|
|
271
233
|
},
|
|
272
|
-
"
|
|
273
|
-
"
|
|
274
|
-
"fieldName": "ariaLabel"
|
|
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"
|
|
275
236
|
}
|
|
276
237
|
],
|
|
277
238
|
"superclass": {
|
|
278
239
|
"name": "Component",
|
|
279
240
|
"module": "/src/models"
|
|
280
241
|
},
|
|
281
|
-
"tagName": "mdc-
|
|
282
|
-
"
|
|
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 * @tag mdc-badge\n * @tagname mdc-badge\n */",
|
|
283
245
|
"customElement": true
|
|
284
246
|
}
|
|
285
247
|
],
|
|
@@ -288,35 +250,53 @@
|
|
|
288
250
|
"kind": "js",
|
|
289
251
|
"name": "default",
|
|
290
252
|
"declaration": {
|
|
291
|
-
"name": "
|
|
292
|
-
"module": "components/
|
|
253
|
+
"name": "Badge",
|
|
254
|
+
"module": "components/badge/badge.component.js"
|
|
293
255
|
}
|
|
294
256
|
}
|
|
295
257
|
]
|
|
296
258
|
},
|
|
297
259
|
{
|
|
298
260
|
"kind": "javascript-module",
|
|
299
|
-
"path": "components/
|
|
261
|
+
"path": "components/icon/icon.component.js",
|
|
300
262
|
"declarations": [
|
|
301
263
|
{
|
|
302
264
|
"kind": "class",
|
|
303
|
-
"description": "",
|
|
304
|
-
"name": "
|
|
305
|
-
"slots": [
|
|
306
|
-
{
|
|
307
|
-
"description": "This is a default/unnamed slot",
|
|
308
|
-
"name": ""
|
|
309
|
-
}
|
|
310
|
-
],
|
|
265
|
+
"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 `size` attribute allows sizing 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 `size = 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.",
|
|
266
|
+
"name": "Icon",
|
|
311
267
|
"members": [
|
|
312
268
|
{
|
|
313
269
|
"kind": "field",
|
|
314
|
-
"name": "
|
|
270
|
+
"name": "iconData",
|
|
315
271
|
"type": {
|
|
316
|
-
"text": "
|
|
272
|
+
"text": "HTMLElement | undefined"
|
|
317
273
|
},
|
|
318
|
-
"
|
|
319
|
-
|
|
274
|
+
"privacy": "private"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"kind": "field",
|
|
278
|
+
"name": "lengthUnitFromContext",
|
|
279
|
+
"type": {
|
|
280
|
+
"text": "string | undefined"
|
|
281
|
+
},
|
|
282
|
+
"privacy": "private"
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"kind": "field",
|
|
286
|
+
"name": "sizeFromContext",
|
|
287
|
+
"type": {
|
|
288
|
+
"text": "number | undefined"
|
|
289
|
+
},
|
|
290
|
+
"privacy": "private"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"kind": "field",
|
|
294
|
+
"name": "name",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "string | undefined"
|
|
297
|
+
},
|
|
298
|
+
"description": "Name of the icon (= filename)",
|
|
299
|
+
"attribute": "name",
|
|
320
300
|
"reflects": true
|
|
321
301
|
},
|
|
322
302
|
{
|
|
@@ -325,7 +305,7 @@
|
|
|
325
305
|
"type": {
|
|
326
306
|
"text": "number | undefined"
|
|
327
307
|
},
|
|
328
|
-
"description": "
|
|
308
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
329
309
|
"attribute": "size"
|
|
330
310
|
},
|
|
331
311
|
{
|
|
@@ -334,60 +314,79 @@
|
|
|
334
314
|
"type": {
|
|
335
315
|
"text": "string | undefined"
|
|
336
316
|
},
|
|
337
|
-
"description": "Length unit attribute for
|
|
317
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
338
318
|
"attribute": "length-unit"
|
|
339
319
|
},
|
|
340
320
|
{
|
|
341
321
|
"kind": "field",
|
|
342
|
-
"name": "
|
|
322
|
+
"name": "role",
|
|
343
323
|
"type": {
|
|
344
|
-
"text": "string |
|
|
324
|
+
"text": "string | null"
|
|
345
325
|
},
|
|
346
|
-
"
|
|
347
|
-
"
|
|
326
|
+
"default": "null",
|
|
327
|
+
"description": "Role attribute to be set for accessibility",
|
|
328
|
+
"attribute": "role"
|
|
348
329
|
},
|
|
349
330
|
{
|
|
350
331
|
"kind": "field",
|
|
351
|
-
"name": "
|
|
332
|
+
"name": "ariaLabel",
|
|
352
333
|
"type": {
|
|
353
|
-
"text": "string |
|
|
334
|
+
"text": "string | null"
|
|
354
335
|
},
|
|
355
|
-
"
|
|
356
|
-
"
|
|
336
|
+
"default": "null",
|
|
337
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
338
|
+
"attribute": "aria-label"
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"kind": "field",
|
|
342
|
+
"name": "iconProviderContext",
|
|
343
|
+
"privacy": "private",
|
|
344
|
+
"readonly": true
|
|
357
345
|
},
|
|
358
346
|
{
|
|
359
347
|
"kind": "method",
|
|
360
|
-
"name": "
|
|
361
|
-
"privacy": "private"
|
|
348
|
+
"name": "getIconData",
|
|
349
|
+
"privacy": "private",
|
|
350
|
+
"description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
|
|
362
351
|
},
|
|
363
352
|
{
|
|
364
353
|
"kind": "method",
|
|
365
|
-
"name": "
|
|
354
|
+
"name": "updateSize",
|
|
355
|
+
"privacy": "private",
|
|
356
|
+
"description": "Updates the size by setting the width and height"
|
|
366
357
|
},
|
|
367
358
|
{
|
|
368
359
|
"kind": "method",
|
|
369
|
-
"name": "
|
|
360
|
+
"name": "setRoleOnIcon",
|
|
361
|
+
"privacy": "private"
|
|
370
362
|
},
|
|
371
363
|
{
|
|
372
364
|
"kind": "method",
|
|
373
|
-
"name": "
|
|
365
|
+
"name": "setAriaLabelOnIcon",
|
|
366
|
+
"privacy": "private"
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"kind": "field",
|
|
370
|
+
"name": "computedIconSize",
|
|
371
|
+
"privacy": "private",
|
|
372
|
+
"readonly": true
|
|
374
373
|
}
|
|
375
374
|
],
|
|
376
375
|
"attributes": [
|
|
377
376
|
{
|
|
378
|
-
"name": "
|
|
377
|
+
"name": "name",
|
|
379
378
|
"type": {
|
|
380
|
-
"text": "
|
|
379
|
+
"text": "string | undefined"
|
|
381
380
|
},
|
|
382
|
-
"description": "
|
|
383
|
-
"fieldName": "
|
|
381
|
+
"description": "Name of the icon (= filename)",
|
|
382
|
+
"fieldName": "name"
|
|
384
383
|
},
|
|
385
384
|
{
|
|
386
385
|
"name": "size",
|
|
387
386
|
"type": {
|
|
388
387
|
"text": "number | undefined"
|
|
389
388
|
},
|
|
390
|
-
"description": "
|
|
389
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
391
390
|
"fieldName": "size"
|
|
392
391
|
},
|
|
393
392
|
{
|
|
@@ -395,33 +394,34 @@
|
|
|
395
394
|
"type": {
|
|
396
395
|
"text": "string | undefined"
|
|
397
396
|
},
|
|
398
|
-
"description": "Length unit attribute for
|
|
397
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
399
398
|
"fieldName": "lengthUnit"
|
|
400
399
|
},
|
|
401
400
|
{
|
|
402
|
-
"name": "
|
|
401
|
+
"name": "role",
|
|
403
402
|
"type": {
|
|
404
|
-
"text": "string |
|
|
403
|
+
"text": "string | null"
|
|
405
404
|
},
|
|
406
|
-
"
|
|
407
|
-
"
|
|
405
|
+
"default": "null",
|
|
406
|
+
"description": "Role attribute to be set for accessibility",
|
|
407
|
+
"fieldName": "role"
|
|
408
408
|
},
|
|
409
409
|
{
|
|
410
|
-
"name": "
|
|
410
|
+
"name": "aria-label",
|
|
411
411
|
"type": {
|
|
412
|
-
"text": "string |
|
|
412
|
+
"text": "string | null"
|
|
413
413
|
},
|
|
414
|
-
"
|
|
415
|
-
"
|
|
414
|
+
"default": "null",
|
|
415
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
416
|
+
"fieldName": "ariaLabel"
|
|
416
417
|
}
|
|
417
418
|
],
|
|
418
419
|
"superclass": {
|
|
419
420
|
"name": "Component",
|
|
420
421
|
"module": "/src/models"
|
|
421
422
|
},
|
|
422
|
-
"tagName": "mdc-
|
|
423
|
-
"
|
|
424
|
-
"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 */",
|
|
423
|
+
"tagName": "mdc-icon",
|
|
424
|
+
"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 `size` attribute allows sizing 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 `size = 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 */",
|
|
425
425
|
"customElement": true
|
|
426
426
|
}
|
|
427
427
|
],
|
|
@@ -430,8 +430,8 @@
|
|
|
430
430
|
"kind": "js",
|
|
431
431
|
"name": "default",
|
|
432
432
|
"declaration": {
|
|
433
|
-
"name": "
|
|
434
|
-
"module": "components/
|
|
433
|
+
"name": "Icon",
|
|
434
|
+
"module": "components/icon/icon.component.js"
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
437
|
]
|
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