@momentum-design/components 0.1.1 → 0.1.2
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.
|
@@ -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