@momentum-design/components 0.1.6 → 0.1.8
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/dist/browser/index.js +7 -12
- package/dist/browser/index.js.map +2 -2
- package/dist/components/themeprovider/themeprovider.component.d.ts +2 -1
- package/dist/components/themeprovider/themeprovider.component.js +1 -1
- package/dist/custom-elements.json +132 -132
- package/dist/models/provider/provider.component.d.ts +1 -1
- package/dist/models/provider/provider.component.js +1 -1
- package/dist/models/provider/provider.styles.js +1 -6
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -1,3 +1,4 @@
|
|
1
|
+
import { CSSResult } from 'lit';
|
1
2
|
import { Provider } from '../../models';
|
2
3
|
import ThemeProviderContext from './themeprovider.context';
|
3
4
|
/**
|
@@ -55,6 +56,6 @@ declare class ThemeProvider extends Provider<ThemeProviderContext> {
|
|
55
56
|
* as CSS variables on the web component.
|
56
57
|
*/
|
57
58
|
private setThemeInClassList;
|
58
|
-
static styles:
|
59
|
+
static styles: Array<CSSResult>;
|
59
60
|
}
|
60
61
|
export default ThemeProvider;
|
@@ -83,7 +83,7 @@ class ThemeProvider extends models_1.Provider {
|
|
83
83
|
}
|
84
84
|
}
|
85
85
|
}
|
86
|
-
ThemeProvider.styles = themeprovider_styles_1.default;
|
86
|
+
ThemeProvider.styles = [...models_1.Provider.styles, themeprovider_styles_1.default];
|
87
87
|
tslib_1.__decorate([
|
88
88
|
(0, decorators_js_1.state)(),
|
89
89
|
tslib_1.__metadata("design:type", String)
|
@@ -116,27 +116,45 @@
|
|
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 `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.",
|
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": "sizeFromContext",
|
145
|
+
"type": {
|
146
|
+
"text": "number | undefined"
|
147
|
+
},
|
148
|
+
"privacy": "private"
|
149
|
+
},
|
150
|
+
{
|
151
|
+
"kind": "field",
|
152
|
+
"name": "name",
|
153
|
+
"type": {
|
154
|
+
"text": "string | undefined"
|
155
|
+
},
|
156
|
+
"description": "Name of the icon (= filename)",
|
157
|
+
"attribute": "name",
|
140
158
|
"reflects": true
|
141
159
|
},
|
142
160
|
{
|
@@ -145,7 +163,7 @@
|
|
145
163
|
"type": {
|
146
164
|
"text": "number | undefined"
|
147
165
|
},
|
148
|
-
"description": "
|
166
|
+
"description": "Size of the icon (works in combination with length unit)",
|
149
167
|
"attribute": "size"
|
150
168
|
},
|
151
169
|
{
|
@@ -154,60 +172,79 @@
|
|
154
172
|
"type": {
|
155
173
|
"text": "string | undefined"
|
156
174
|
},
|
157
|
-
"description": "Length unit attribute for
|
175
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
158
176
|
"attribute": "length-unit"
|
159
177
|
},
|
160
178
|
{
|
161
179
|
"kind": "field",
|
162
|
-
"name": "
|
180
|
+
"name": "role",
|
163
181
|
"type": {
|
164
|
-
"text": "string |
|
182
|
+
"text": "string | null"
|
165
183
|
},
|
166
|
-
"
|
167
|
-
"
|
184
|
+
"default": "null",
|
185
|
+
"description": "Role attribute to be set for accessibility",
|
186
|
+
"attribute": "role"
|
168
187
|
},
|
169
188
|
{
|
170
189
|
"kind": "field",
|
171
|
-
"name": "
|
190
|
+
"name": "ariaLabel",
|
172
191
|
"type": {
|
173
|
-
"text": "string |
|
192
|
+
"text": "string | null"
|
174
193
|
},
|
175
|
-
"
|
176
|
-
"
|
194
|
+
"default": "null",
|
195
|
+
"description": "Aria-label attribute to be set for accessibility",
|
196
|
+
"attribute": "aria-label"
|
197
|
+
},
|
198
|
+
{
|
199
|
+
"kind": "field",
|
200
|
+
"name": "iconProviderContext",
|
201
|
+
"privacy": "private",
|
202
|
+
"readonly": true
|
177
203
|
},
|
178
204
|
{
|
179
205
|
"kind": "method",
|
180
|
-
"name": "
|
181
|
-
"privacy": "private"
|
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"
|
182
209
|
},
|
183
210
|
{
|
184
211
|
"kind": "method",
|
185
|
-
"name": "
|
212
|
+
"name": "updateSize",
|
213
|
+
"privacy": "private",
|
214
|
+
"description": "Updates the size by setting the width and height"
|
186
215
|
},
|
187
216
|
{
|
188
217
|
"kind": "method",
|
189
|
-
"name": "
|
218
|
+
"name": "setRoleOnIcon",
|
219
|
+
"privacy": "private"
|
190
220
|
},
|
191
221
|
{
|
192
222
|
"kind": "method",
|
193
|
-
"name": "
|
223
|
+
"name": "setAriaLabelOnIcon",
|
224
|
+
"privacy": "private"
|
225
|
+
},
|
226
|
+
{
|
227
|
+
"kind": "field",
|
228
|
+
"name": "computedIconSize",
|
229
|
+
"privacy": "private",
|
230
|
+
"readonly": true
|
194
231
|
}
|
195
232
|
],
|
196
233
|
"attributes": [
|
197
234
|
{
|
198
|
-
"name": "
|
235
|
+
"name": "name",
|
199
236
|
"type": {
|
200
|
-
"text": "
|
237
|
+
"text": "string | undefined"
|
201
238
|
},
|
202
|
-
"description": "
|
203
|
-
"fieldName": "
|
239
|
+
"description": "Name of the icon (= filename)",
|
240
|
+
"fieldName": "name"
|
204
241
|
},
|
205
242
|
{
|
206
243
|
"name": "size",
|
207
244
|
"type": {
|
208
245
|
"text": "number | undefined"
|
209
246
|
},
|
210
|
-
"description": "
|
247
|
+
"description": "Size of the icon (works in combination with length unit)",
|
211
248
|
"fieldName": "size"
|
212
249
|
},
|
213
250
|
{
|
@@ -215,33 +252,34 @@
|
|
215
252
|
"type": {
|
216
253
|
"text": "string | undefined"
|
217
254
|
},
|
218
|
-
"description": "Length unit attribute for
|
255
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
219
256
|
"fieldName": "lengthUnit"
|
220
257
|
},
|
221
258
|
{
|
222
|
-
"name": "
|
259
|
+
"name": "role",
|
223
260
|
"type": {
|
224
|
-
"text": "string |
|
261
|
+
"text": "string | null"
|
225
262
|
},
|
226
|
-
"
|
227
|
-
"
|
263
|
+
"default": "null",
|
264
|
+
"description": "Role attribute to be set for accessibility",
|
265
|
+
"fieldName": "role"
|
228
266
|
},
|
229
267
|
{
|
230
|
-
"name": "
|
268
|
+
"name": "aria-label",
|
231
269
|
"type": {
|
232
|
-
"text": "string |
|
270
|
+
"text": "string | null"
|
233
271
|
},
|
234
|
-
"
|
235
|
-
"
|
272
|
+
"default": "null",
|
273
|
+
"description": "Aria-label attribute to be set for accessibility",
|
274
|
+
"fieldName": "ariaLabel"
|
236
275
|
}
|
237
276
|
],
|
238
277
|
"superclass": {
|
239
278
|
"name": "Component",
|
240
279
|
"module": "/src/models"
|
241
280
|
},
|
242
|
-
"tagName": "mdc-
|
243
|
-
"
|
244
|
-
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
|
281
|
+
"tagName": "mdc-icon",
|
282
|
+
"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 * @tagname mdc-icon\n */",
|
245
283
|
"customElement": true
|
246
284
|
}
|
247
285
|
],
|
@@ -250,53 +288,35 @@
|
|
250
288
|
"kind": "js",
|
251
289
|
"name": "default",
|
252
290
|
"declaration": {
|
253
|
-
"name": "
|
254
|
-
"module": "components/
|
291
|
+
"name": "Icon",
|
292
|
+
"module": "components/icon/icon.component.js"
|
255
293
|
}
|
256
294
|
}
|
257
295
|
]
|
258
296
|
},
|
259
297
|
{
|
260
298
|
"kind": "javascript-module",
|
261
|
-
"path": "components/
|
299
|
+
"path": "components/badge/badge.component.js",
|
262
300
|
"declarations": [
|
263
301
|
{
|
264
302
|
"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
|
-
},
|
276
|
-
{
|
277
|
-
"kind": "field",
|
278
|
-
"name": "lengthUnitFromContext",
|
279
|
-
"type": {
|
280
|
-
"text": "string | undefined"
|
281
|
-
},
|
282
|
-
"privacy": "private"
|
283
|
-
},
|
303
|
+
"description": "",
|
304
|
+
"name": "Badge",
|
305
|
+
"slots": [
|
284
306
|
{
|
285
|
-
"
|
286
|
-
"name": "
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
"privacy": "private"
|
291
|
-
},
|
307
|
+
"description": "This is a default/unnamed slot",
|
308
|
+
"name": ""
|
309
|
+
}
|
310
|
+
],
|
311
|
+
"members": [
|
292
312
|
{
|
293
313
|
"kind": "field",
|
294
|
-
"name": "
|
314
|
+
"name": "type",
|
295
315
|
"type": {
|
296
|
-
"text": "
|
316
|
+
"text": "BadgeType | undefined"
|
297
317
|
},
|
298
|
-
"description": "
|
299
|
-
"attribute": "
|
318
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
319
|
+
"attribute": "type",
|
300
320
|
"reflects": true
|
301
321
|
},
|
302
322
|
{
|
@@ -305,7 +325,7 @@
|
|
305
325
|
"type": {
|
306
326
|
"text": "number | undefined"
|
307
327
|
},
|
308
|
-
"description": "
|
328
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
309
329
|
"attribute": "size"
|
310
330
|
},
|
311
331
|
{
|
@@ -314,79 +334,60 @@
|
|
314
334
|
"type": {
|
315
335
|
"text": "string | undefined"
|
316
336
|
},
|
317
|
-
"description": "Length unit attribute for
|
337
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
318
338
|
"attribute": "length-unit"
|
319
339
|
},
|
320
340
|
{
|
321
341
|
"kind": "field",
|
322
|
-
"name": "
|
342
|
+
"name": "iconName",
|
323
343
|
"type": {
|
324
|
-
"text": "string |
|
344
|
+
"text": "string | undefined"
|
325
345
|
},
|
326
|
-
"
|
327
|
-
"
|
328
|
-
"attribute": "role"
|
346
|
+
"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.",
|
347
|
+
"attribute": "icon-name"
|
329
348
|
},
|
330
349
|
{
|
331
350
|
"kind": "field",
|
332
|
-
"name": "
|
351
|
+
"name": "text",
|
333
352
|
"type": {
|
334
|
-
"text": "string |
|
353
|
+
"text": "string | undefined"
|
335
354
|
},
|
336
|
-
"
|
337
|
-
"
|
338
|
-
"attribute": "aria-label"
|
339
|
-
},
|
340
|
-
{
|
341
|
-
"kind": "field",
|
342
|
-
"name": "iconProviderContext",
|
343
|
-
"privacy": "private",
|
344
|
-
"readonly": true
|
345
|
-
},
|
346
|
-
{
|
347
|
-
"kind": "method",
|
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"
|
355
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
356
|
+
"attribute": "text"
|
351
357
|
},
|
352
358
|
{
|
353
359
|
"kind": "method",
|
354
360
|
"name": "updateSize",
|
355
|
-
"privacy": "private"
|
356
|
-
"description": "Updates the size by setting the width and height"
|
361
|
+
"privacy": "private"
|
357
362
|
},
|
358
363
|
{
|
359
364
|
"kind": "method",
|
360
|
-
"name": "
|
361
|
-
"privacy": "private"
|
365
|
+
"name": "iconTemplate"
|
362
366
|
},
|
363
367
|
{
|
364
368
|
"kind": "method",
|
365
|
-
"name": "
|
366
|
-
"privacy": "private"
|
369
|
+
"name": "textTemplate"
|
367
370
|
},
|
368
371
|
{
|
369
|
-
"kind": "
|
370
|
-
"name": "
|
371
|
-
"privacy": "private",
|
372
|
-
"readonly": true
|
372
|
+
"kind": "method",
|
373
|
+
"name": "warningTemplate"
|
373
374
|
}
|
374
375
|
],
|
375
376
|
"attributes": [
|
376
377
|
{
|
377
|
-
"name": "
|
378
|
+
"name": "type",
|
378
379
|
"type": {
|
379
|
-
"text": "
|
380
|
+
"text": "BadgeType | undefined"
|
380
381
|
},
|
381
|
-
"description": "
|
382
|
-
"fieldName": "
|
382
|
+
"description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
|
383
|
+
"fieldName": "type"
|
383
384
|
},
|
384
385
|
{
|
385
386
|
"name": "size",
|
386
387
|
"type": {
|
387
388
|
"text": "number | undefined"
|
388
389
|
},
|
389
|
-
"description": "
|
390
|
+
"description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
|
390
391
|
"fieldName": "size"
|
391
392
|
},
|
392
393
|
{
|
@@ -394,34 +395,33 @@
|
|
394
395
|
"type": {
|
395
396
|
"text": "string | undefined"
|
396
397
|
},
|
397
|
-
"description": "Length unit attribute for
|
398
|
+
"description": "Length unit attribute for scale\n\nDefault: `rem`",
|
398
399
|
"fieldName": "lengthUnit"
|
399
400
|
},
|
400
401
|
{
|
401
|
-
"name": "
|
402
|
+
"name": "icon-name",
|
402
403
|
"type": {
|
403
|
-
"text": "string |
|
404
|
+
"text": "string | undefined"
|
404
405
|
},
|
405
|
-
"
|
406
|
-
"
|
407
|
-
"fieldName": "role"
|
406
|
+
"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.",
|
407
|
+
"fieldName": "iconName"
|
408
408
|
},
|
409
409
|
{
|
410
|
-
"name": "
|
410
|
+
"name": "text",
|
411
411
|
"type": {
|
412
|
-
"text": "string |
|
412
|
+
"text": "string | undefined"
|
413
413
|
},
|
414
|
-
"
|
415
|
-
"
|
416
|
-
"fieldName": "ariaLabel"
|
414
|
+
"description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
|
415
|
+
"fieldName": "text"
|
417
416
|
}
|
418
417
|
],
|
419
418
|
"superclass": {
|
420
419
|
"name": "Component",
|
421
420
|
"module": "/src/models"
|
422
421
|
},
|
423
|
-
"tagName": "mdc-
|
424
|
-
"
|
422
|
+
"tagName": "mdc-badge",
|
423
|
+
"summary": "This is MyElement",
|
424
|
+
"jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\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": "Badge",
|
434
|
+
"module": "components/badge/badge.component.js"
|
435
435
|
}
|
436
436
|
}
|
437
437
|
]
|
@@ -43,7 +43,7 @@ declare abstract class Provider<C> extends Component {
|
|
43
43
|
/**
|
44
44
|
* Styles associated with this Provider Component.
|
45
45
|
*/
|
46
|
-
static styles:
|
46
|
+
static styles: Array<CSSResult>;
|
47
47
|
/**
|
48
48
|
* Update the context of this Provider and trigger its consumers to update.
|
49
49
|
*
|
@@ -3,12 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const lit_1 = require("lit");
|
4
4
|
const styles = (0, lit_1.css) `
|
5
5
|
:host {
|
6
|
-
|
7
|
-
display: block;
|
8
|
-
height: 100%;
|
9
|
-
margin: 0;
|
10
|
-
padding: 0;
|
11
|
-
width: 100%;
|
6
|
+
display: contents;
|
12
7
|
}
|
13
8
|
`;
|
14
9
|
exports.default = styles;
|
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