@momentum-design/components 0.1.6 → 0.1.8

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,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: import("lit").CSSResult;
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/badge/badge.component.js",
119
+ "path": "components/icon/icon.component.js",
120
120
  "declarations": [
121
121
  {
122
122
  "kind": "class",
123
- "description": "",
124
- "name": "Badge",
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": "type",
128
+ "name": "iconData",
135
129
  "type": {
136
- "text": "BadgeType | undefined"
130
+ "text": "HTMLElement | undefined"
137
131
  },
138
- "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
139
- "attribute": "type",
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": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
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 scale\n\nDefault: `rem`",
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": "iconName",
180
+ "name": "role",
163
181
  "type": {
164
- "text": "string | undefined"
182
+ "text": "string | null"
165
183
  },
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"
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": "text",
190
+ "name": "ariaLabel",
172
191
  "type": {
173
- "text": "string | undefined"
192
+ "text": "string | null"
174
193
  },
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"
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": "updateSize",
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": "iconTemplate"
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": "textTemplate"
218
+ "name": "setRoleOnIcon",
219
+ "privacy": "private"
190
220
  },
191
221
  {
192
222
  "kind": "method",
193
- "name": "warningTemplate"
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": "type",
235
+ "name": "name",
199
236
  "type": {
200
- "text": "BadgeType | undefined"
237
+ "text": "string | undefined"
201
238
  },
202
- "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
203
- "fieldName": "type"
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": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
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 scale\n\nDefault: `rem`",
255
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
219
256
  "fieldName": "lengthUnit"
220
257
  },
221
258
  {
222
- "name": "icon-name",
259
+ "name": "role",
223
260
  "type": {
224
- "text": "string | undefined"
261
+ "text": "string | null"
225
262
  },
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"
263
+ "default": "null",
264
+ "description": "Role attribute to be set for accessibility",
265
+ "fieldName": "role"
228
266
  },
229
267
  {
230
- "name": "text",
268
+ "name": "aria-label",
231
269
  "type": {
232
- "text": "string | undefined"
270
+ "text": "string | null"
233
271
  },
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"
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-badge",
243
- "summary": "This is MyElement",
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": "Badge",
254
- "module": "components/badge/badge.component.js"
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/icon/icon.component.js",
299
+ "path": "components/badge/badge.component.js",
262
300
  "declarations": [
263
301
  {
264
302
  "kind": "class",
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",
267
- "members": [
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
- "kind": "field",
286
- "name": "sizeFromContext",
287
- "type": {
288
- "text": "number | undefined"
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": "name",
314
+ "name": "type",
295
315
  "type": {
296
- "text": "string | undefined"
316
+ "text": "BadgeType | undefined"
297
317
  },
298
- "description": "Name of the icon (= filename)",
299
- "attribute": "name",
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": "Size of the icon (works in combination with length unit)",
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 overriding length-unit from `IconProvider`",
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": "role",
342
+ "name": "iconName",
323
343
  "type": {
324
- "text": "string | null"
344
+ "text": "string | undefined"
325
345
  },
326
- "default": "null",
327
- "description": "Role attribute to be set for accessibility",
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": "ariaLabel",
351
+ "name": "text",
333
352
  "type": {
334
- "text": "string | null"
353
+ "text": "string | undefined"
335
354
  },
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
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": "setRoleOnIcon",
361
- "privacy": "private"
365
+ "name": "iconTemplate"
362
366
  },
363
367
  {
364
368
  "kind": "method",
365
- "name": "setAriaLabelOnIcon",
366
- "privacy": "private"
369
+ "name": "textTemplate"
367
370
  },
368
371
  {
369
- "kind": "field",
370
- "name": "computedIconSize",
371
- "privacy": "private",
372
- "readonly": true
372
+ "kind": "method",
373
+ "name": "warningTemplate"
373
374
  }
374
375
  ],
375
376
  "attributes": [
376
377
  {
377
- "name": "name",
378
+ "name": "type",
378
379
  "type": {
379
- "text": "string | undefined"
380
+ "text": "BadgeType | undefined"
380
381
  },
381
- "description": "Name of the icon (= filename)",
382
- "fieldName": "name"
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": "Size of the icon (works in combination with length unit)",
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 overriding length-unit from `IconProvider`",
398
+ "description": "Length unit attribute for scale\n\nDefault: `rem`",
398
399
  "fieldName": "lengthUnit"
399
400
  },
400
401
  {
401
- "name": "role",
402
+ "name": "icon-name",
402
403
  "type": {
403
- "text": "string | null"
404
+ "text": "string | undefined"
404
405
  },
405
- "default": "null",
406
- "description": "Role attribute to be set for accessibility",
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": "aria-label",
410
+ "name": "text",
411
411
  "type": {
412
- "text": "string | null"
412
+ "text": "string | undefined"
413
413
  },
414
- "default": "null",
415
- "description": "Aria-label attribute to be set for accessibility",
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-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 * @tagname mdc-icon\n */",
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": "Icon",
434
- "module": "components/icon/icon.component.js"
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: CSSResult | Array<CSSResult>;
46
+ static styles: Array<CSSResult>;
47
47
  /**
48
48
  * Update the context of this Provider and trigger its consumers to update.
49
49
  *
@@ -52,5 +52,5 @@ class Provider extends component_1.default {
52
52
  /**
53
53
  * Styles associated with this Provider Component.
54
54
  */
55
- Provider.styles = provider_styles_1.default;
55
+ Provider.styles = [provider_styles_1.default];
56
56
  exports.default = Provider;
@@ -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
- border: 0;
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;
@@ -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';
@@ -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.Icon = exports.Badge = exports.Avatar = void 0;
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
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.1.6"
40
+ "version": "0.1.8"
41
41
  }