@momentum-design/components 0.1.7 → 0.1.8

Sign up to get free protection for your applications and to get access to all the features.
@@ -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.7"
40
+ "version": "0.1.8"
41
41
  }