@momentum-design/components 0.4.14 → 0.4.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/dist/components/avatar/avatar.component.js +38 -32
  2. package/dist/components/avatar/avatar.constants.js +3 -9
  3. package/dist/components/avatar/avatar.styles.js +3 -5
  4. package/dist/components/avatar/avatar.types.js +1 -2
  5. package/dist/components/avatar/index.js +4 -7
  6. package/dist/components/badge/badge.component.js +65 -59
  7. package/dist/components/badge/badge.constants.js +3 -12
  8. package/dist/components/badge/badge.styles.js +5 -7
  9. package/dist/components/badge/index.js +6 -9
  10. package/dist/components/icon/icon.component.js +46 -40
  11. package/dist/components/icon/icon.constants.js +3 -8
  12. package/dist/components/icon/icon.styles.js +5 -7
  13. package/dist/components/icon/icon.utils.js +1 -4
  14. package/dist/components/icon/index.js +4 -7
  15. package/dist/components/iconprovider/iconprovider.component.js +39 -33
  16. package/dist/components/iconprovider/iconprovider.constants.js +3 -10
  17. package/dist/components/iconprovider/iconprovider.context.js +4 -6
  18. package/dist/components/iconprovider/index.js +4 -7
  19. package/dist/components/text/fonts.styles.js +2 -5
  20. package/dist/components/text/index.js +4 -7
  21. package/dist/components/text/text.component.js +35 -29
  22. package/dist/components/text/text.constants.js +3 -9
  23. package/dist/components/text/text.styles.js +5 -7
  24. package/dist/components/text/text.types.js +1 -2
  25. package/dist/components/themeprovider/index.js +4 -7
  26. package/dist/components/themeprovider/themeprovider.component.js +27 -21
  27. package/dist/components/themeprovider/themeprovider.constants.js +3 -8
  28. package/dist/components/themeprovider/themeprovider.context.js +4 -6
  29. package/dist/components/themeprovider/themeprovider.styles.js +3 -5
  30. package/dist/index.js +7 -16
  31. package/dist/models/component/component.component.js +5 -8
  32. package/dist/models/component/component.styles.js +2 -4
  33. package/dist/models/component/component.types.js +1 -2
  34. package/dist/models/component/index.js +2 -5
  35. package/dist/models/index.js +3 -8
  36. package/dist/models/provider/index.js +2 -5
  37. package/dist/models/provider/provider.component.js +9 -12
  38. package/dist/models/provider/provider.styles.js +3 -5
  39. package/dist/react/avatar/index.js +8 -11
  40. package/dist/react/badge/index.js +8 -11
  41. package/dist/react/icon/index.js +8 -11
  42. package/dist/react/iconprovider/index.js +8 -11
  43. package/dist/react/index.js +6 -18
  44. package/dist/react/text/index.js +8 -11
  45. package/dist/react/themeprovider/index.js +8 -11
  46. package/dist/utils/mixins/DisabledMixin.js +14 -10
  47. package/dist/utils/mixins/TabIndexMixin.js +14 -10
  48. package/dist/utils/provider/index.js +3 -5
  49. package/dist/utils/styles/index.js +4 -8
  50. package/dist/utils/tag-name/constants.js +1 -3
  51. package/dist/utils/tag-name/index.js +3 -6
  52. package/dist/utils/types.js +1 -2
  53. package/package.json +1 -1
@@ -1,7 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const icon_component_1 = tslib_1.__importDefault(require("./icon.component"));
5
- const icon_constants_1 = require("./icon.constants");
6
- icon_component_1.default.register(icon_constants_1.TAG_NAME);
7
- exports.default = icon_component_1.default;
1
+ import Icon from './icon.component';
2
+ import { TAG_NAME } from './icon.constants';
3
+ Icon.register(TAG_NAME);
4
+ export default Icon;
@@ -1,10 +1,16 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const decorators_js_1 = require("lit/decorators.js");
5
- const models_1 = require("../../models");
6
- const iconprovider_context_1 = tslib_1.__importDefault(require("./iconprovider.context"));
7
- const iconprovider_constants_1 = require("./iconprovider.constants");
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { property } from 'lit/decorators.js';
11
+ import { Provider } from '../../models';
12
+ import IconProviderContext from './iconprovider.context';
13
+ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconprovider.constants';
8
14
  /**
9
15
  * IconProvider component, which allows to be consumed from sub components
10
16
  * (see `providerUtils.consume` for how to consume)
@@ -17,52 +23,52 @@ const iconprovider_constants_1 = require("./iconprovider.constants");
17
23
  *
18
24
  * @slot - children
19
25
  */
20
- class IconProvider extends models_1.Provider {
26
+ class IconProvider extends Provider {
21
27
  constructor() {
22
28
  // initialise the context by running the Provider constructor:
23
29
  super({
24
- context: iconprovider_context_1.default.context,
25
- initialValue: new iconprovider_context_1.default(),
30
+ context: IconProviderContext.context,
31
+ initialValue: new IconProviderContext(),
26
32
  });
27
33
  /**
28
34
  * File extension of icons, default: 'svg'
29
35
  */
30
- this.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
36
+ this.fileExtension = DEFAULTS.FILE_EXTENSION;
31
37
  /**
32
38
  * Length unit used for sizing of icons, default: 'em'
33
39
  */
34
- this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
40
+ this.lengthUnit = DEFAULTS.LENGTH_UNIT;
35
41
  /**
36
42
  * The default size of the icon.
37
43
  * If not set, it falls back to the size defined by the length unit.
38
44
  */
39
- this.size = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT_SIZE[iconprovider_constants_1.DEFAULTS.LENGTH_UNIT];
45
+ this.size = DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT];
40
46
  }
41
47
  /**
42
48
  * Context object of the IconProvider, to be consumed by child components
43
49
  */
44
50
  static get Context() {
45
- return iconprovider_context_1.default.context;
51
+ return IconProviderContext.context;
46
52
  }
47
53
  updateValuesInContext() {
48
54
  // only update fileExtension on context if its an allowed fileExtension
49
- if (this.fileExtension && iconprovider_constants_1.ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
55
+ if (this.fileExtension && ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
50
56
  this.context.value.fileExtension = this.fileExtension;
51
57
  }
52
58
  else {
53
59
  // Ensure both fileExtension and context are updated to the default if its not an allowed fileExtension
54
- this.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
55
- this.context.value.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
60
+ this.fileExtension = DEFAULTS.FILE_EXTENSION;
61
+ this.context.value.fileExtension = DEFAULTS.FILE_EXTENSION;
56
62
  }
57
63
  this.context.value.url = this.url;
58
64
  this.context.value.size = this.size;
59
- if (this.lengthUnit && iconprovider_constants_1.ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
65
+ if (this.lengthUnit && ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
60
66
  this.context.value.lengthUnit = this.lengthUnit;
61
67
  }
62
68
  else {
63
69
  // Ensure both lengthUnit and context are updated to the default if its not an allowed lengthUnit
64
- this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
65
- this.context.value.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
70
+ this.lengthUnit = DEFAULTS.LENGTH_UNIT;
71
+ this.context.value.lengthUnit = DEFAULTS.LENGTH_UNIT;
66
72
  }
67
73
  }
68
74
  updateContext() {
@@ -75,20 +81,20 @@ class IconProvider extends models_1.Provider {
75
81
  }
76
82
  }
77
83
  }
78
- tslib_1.__decorate([
79
- (0, decorators_js_1.property)({ type: String }),
80
- tslib_1.__metadata("design:type", String)
84
+ __decorate([
85
+ property({ type: String }),
86
+ __metadata("design:type", String)
81
87
  ], IconProvider.prototype, "url", void 0);
82
- tslib_1.__decorate([
83
- (0, decorators_js_1.property)({ type: String, attribute: 'file-extension', reflect: true }),
84
- tslib_1.__metadata("design:type", String)
88
+ __decorate([
89
+ property({ type: String, attribute: 'file-extension', reflect: true }),
90
+ __metadata("design:type", String)
85
91
  ], IconProvider.prototype, "fileExtension", void 0);
86
- tslib_1.__decorate([
87
- (0, decorators_js_1.property)({ type: String, attribute: 'length-unit', reflect: true }),
88
- tslib_1.__metadata("design:type", String)
92
+ __decorate([
93
+ property({ type: String, attribute: 'length-unit', reflect: true }),
94
+ __metadata("design:type", String)
89
95
  ], IconProvider.prototype, "lengthUnit", void 0);
90
- tslib_1.__decorate([
91
- (0, decorators_js_1.property)({ type: Number, reflect: true }),
92
- tslib_1.__metadata("design:type", Number)
96
+ __decorate([
97
+ property({ type: Number, reflect: true }),
98
+ __metadata("design:type", Number)
93
99
  ], IconProvider.prototype, "size", void 0);
94
- exports.default = IconProvider;
100
+ export default IconProvider;
@@ -1,14 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ALLOWED_LENGTH_UNITS = exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
4
- const tslib_1 = require("tslib");
5
- const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
6
- const TAG_NAME = tag_name_1.default.constructTagName('iconprovider');
7
- exports.TAG_NAME = TAG_NAME;
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('iconprovider');
8
3
  const ALLOWED_FILE_EXTENSIONS = ['svg'];
9
- exports.ALLOWED_FILE_EXTENSIONS = ALLOWED_FILE_EXTENSIONS;
10
4
  const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
11
- exports.ALLOWED_LENGTH_UNITS = ALLOWED_LENGTH_UNITS;
12
5
  const DEFAULTS = {
13
6
  FILE_EXTENSION: 'svg',
14
7
  LENGTH_UNIT: 'em',
@@ -18,4 +11,4 @@ const DEFAULTS = {
18
11
  rem: 1,
19
12
  },
20
13
  };
21
- exports.DEFAULTS = DEFAULTS;
14
+ export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
@@ -1,9 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const context_1 = require("@lit/context");
4
- const iconprovider_constants_1 = require("./iconprovider.constants");
1
+ import { createContext } from '@lit/context';
2
+ import { TAG_NAME } from './iconprovider.constants';
5
3
  class IconProviderContext {
6
4
  }
7
5
  // create typed lit context as part of the IconProviderContext
8
- IconProviderContext.context = (0, context_1.createContext)(iconprovider_constants_1.TAG_NAME);
9
- exports.default = IconProviderContext;
6
+ IconProviderContext.context = createContext(TAG_NAME);
7
+ export default IconProviderContext;
@@ -1,7 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const iconprovider_component_1 = tslib_1.__importDefault(require("./iconprovider.component"));
5
- const iconprovider_constants_1 = require("./iconprovider.constants");
6
- iconprovider_component_1.default.register(iconprovider_constants_1.TAG_NAME);
7
- exports.default = iconprovider_component_1.default;
1
+ import IconProvider from './iconprovider.component';
2
+ import { TAG_NAME } from './iconprovider.constants';
3
+ IconProvider.register(TAG_NAME);
4
+ export default IconProvider;
@@ -1,8 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.fontsStyles = void 0;
4
- const lit_1 = require("lit");
5
- exports.fontsStyles = (0, lit_1.css) `
1
+ import { css } from 'lit';
2
+ export const fontsStyles = css `
6
3
  :host([type="headline-small-regular"])::part(text) {
7
4
  font-size: var(--mds-font-apps-headline-small-regular-font-size);
8
5
  font-weight: var(--mds-font-apps-headline-small-regular-font-weight);
@@ -1,7 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const text_component_1 = tslib_1.__importDefault(require("./text.component"));
5
- const text_constants_1 = require("./text.constants");
6
- text_component_1.default.register(text_constants_1.TAG_NAME);
7
- exports.default = text_component_1.default;
1
+ import Text from './text.component';
2
+ import { TAG_NAME } from './text.constants';
3
+ Text.register(TAG_NAME);
4
+ export default Text;
@@ -1,11 +1,17 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const lit_1 = require("lit");
5
- const decorators_js_1 = require("lit/decorators.js");
6
- const text_styles_1 = tslib_1.__importDefault(require("./text.styles"));
7
- const models_1 = require("../../models");
8
- const text_constants_1 = require("./text.constants");
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { html } from 'lit';
11
+ import { property } from 'lit/decorators.js';
12
+ import styles from './text.styles';
13
+ import { Component } from '../../models';
14
+ import { DEFAULTS } from './text.constants';
9
15
  /**
10
16
  * Text component for creating styled text elements.
11
17
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -24,7 +30,7 @@ const text_constants_1 = require("./text.constants");
24
30
  *
25
31
  * @csspart text - The text element
26
32
  */
27
- class Text extends models_1.Component {
33
+ class Text extends Component {
28
34
  constructor() {
29
35
  super(...arguments);
30
36
  /**
@@ -62,7 +68,7 @@ class Text extends models_1.Component {
62
68
  * - 'headline-small-light'
63
69
  * - 'headline-small-regular'
64
70
  */
65
- this.type = text_constants_1.DEFAULTS.TYPE;
71
+ this.type = DEFAULTS.TYPE;
66
72
  /**
67
73
  * Specifies the HTML tag name for the text element. The default tag name is `p`.
68
74
  * This attribute is optional. When set, it changes the tag name of the text element.
@@ -83,33 +89,33 @@ class Text extends models_1.Component {
83
89
  * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
84
90
  * Note that the styling is determined by the `type` attribute.
85
91
  */
86
- this.tagname = text_constants_1.DEFAULTS.TEXT_ELEMENT_TAGNAME;
92
+ this.tagname = DEFAULTS.TEXT_ELEMENT_TAGNAME;
87
93
  }
88
94
  render() {
89
95
  // Lit does not support dynamically changing values for the tag name of a custom element.
90
96
  // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
91
97
  switch (this.tagname) {
92
- case 'h1': return (0, lit_1.html) `<h1 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
93
- case 'h2': return (0, lit_1.html) `<h2 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
94
- case 'h3': return (0, lit_1.html) `<h3 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
95
- case 'h4': return (0, lit_1.html) `<h4 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
96
- case 'h5': return (0, lit_1.html) `<h5 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
97
- case 'h6': return (0, lit_1.html) `<h6 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
98
- case 'div': return (0, lit_1.html) `<div part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
99
- case 'span': return (0, lit_1.html) `<span part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
100
- case 'small': return (0, lit_1.html) `<small part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
98
+ case 'h1': return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
99
+ case 'h2': return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
100
+ case 'h3': return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
101
+ case 'h4': return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
102
+ case 'h5': return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
103
+ case 'h6': return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
104
+ case 'div': return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
105
+ case 'span': return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
106
+ case 'small': return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
101
107
  case 'p':
102
- default: return (0, lit_1.html) `<p part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
108
+ default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
103
109
  }
104
110
  }
105
111
  }
106
- Text.styles = [...models_1.Component.styles, ...text_styles_1.default];
107
- tslib_1.__decorate([
108
- (0, decorators_js_1.property)({ attribute: 'type', reflect: true, type: String }),
109
- tslib_1.__metadata("design:type", String)
112
+ Text.styles = [...Component.styles, ...styles];
113
+ __decorate([
114
+ property({ attribute: 'type', reflect: true, type: String }),
115
+ __metadata("design:type", String)
110
116
  ], Text.prototype, "type", void 0);
111
- tslib_1.__decorate([
112
- (0, decorators_js_1.property)({ attribute: 'tagname', reflect: true, type: String }),
113
- tslib_1.__metadata("design:type", String)
117
+ __decorate([
118
+ property({ attribute: 'tagname', reflect: true, type: String }),
119
+ __metadata("design:type", String)
114
120
  ], Text.prototype, "tagname", void 0);
115
- exports.default = Text;
121
+ export default Text;
@@ -1,10 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
4
- const tslib_1 = require("tslib");
5
- const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
6
- const TAG_NAME = tag_name_1.default.constructTagName('text');
7
- exports.TAG_NAME = TAG_NAME;
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('text');
8
3
  const VALUES = {
9
4
  TYPE: [
10
5
  'body-small-regular',
@@ -50,10 +45,9 @@ const VALUES = {
50
45
  'div',
51
46
  ],
52
47
  };
53
- exports.VALUES = VALUES;
54
48
  const DEFAULTS = {
55
49
  TYPE: 'body-midsize-regular',
56
50
  TEXT_ELEMENT_TAGNAME: 'p',
57
51
  CSS_PART_TEXT: 'text',
58
52
  };
59
- exports.DEFAULTS = DEFAULTS;
53
+ export { TAG_NAME, DEFAULTS, VALUES };
@@ -1,9 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const lit_1 = require("lit");
4
- const fonts_styles_1 = require("./fonts.styles");
1
+ import { css } from 'lit';
2
+ import { fontsStyles } from './fonts.styles';
5
3
  const styles = [
6
- (0, lit_1.css) `
4
+ css `
7
5
  :host {
8
6
  --mdc-text-font-family: var(--mdc-themeprovider-font-family);
9
7
 
@@ -12,6 +10,6 @@ const styles = [
12
10
  }
13
11
  `,
14
12
  // type specific font styles:
15
- fonts_styles_1.fontsStyles,
13
+ fontsStyles,
16
14
  ];
17
- exports.default = styles;
15
+ export default styles;
@@ -1,2 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ export {};
@@ -1,7 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const themeprovider_component_1 = tslib_1.__importDefault(require("./themeprovider.component"));
5
- const themeprovider_constants_1 = require("./themeprovider.constants");
6
- themeprovider_component_1.default.register(themeprovider_constants_1.TAG_NAME);
7
- exports.default = themeprovider_component_1.default;
1
+ import ThemeProvider from './themeprovider.component';
2
+ import { TAG_NAME } from './themeprovider.constants';
3
+ ThemeProvider.register(TAG_NAME);
4
+ export default ThemeProvider;
@@ -1,11 +1,17 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const decorators_js_1 = require("lit/decorators.js");
5
- const themeprovider_constants_1 = require("./themeprovider.constants");
6
- const models_1 = require("../../models");
7
- const themeprovider_context_1 = tslib_1.__importDefault(require("./themeprovider.context"));
8
- const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.styles"));
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { property, state } from 'lit/decorators.js';
11
+ import { DEFAULTS } from './themeprovider.constants';
12
+ import { Provider } from '../../models';
13
+ import ThemeProviderContext from './themeprovider.context';
14
+ import styles from './themeprovider.styles';
9
15
  /**
10
16
  * ThemeProvider component, which sets the passed in themeclass as class.
11
17
  * If the themeclass switches, the existing themeclass will be removed as a class
@@ -30,11 +36,11 @@ const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.
30
36
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
31
37
  * default: `-0.25px` (this is to match the old CiscoSans)
32
38
  */
33
- class ThemeProvider extends models_1.Provider {
39
+ class ThemeProvider extends Provider {
34
40
  constructor() {
35
41
  super({
36
- context: themeprovider_context_1.default.context,
37
- initialValue: new themeprovider_context_1.default(themeprovider_constants_1.DEFAULTS.THEMECLASS),
42
+ context: ThemeProviderContext.context,
43
+ initialValue: new ThemeProviderContext(DEFAULTS.THEMECLASS),
38
44
  });
39
45
  /**
40
46
  * Current theme class
@@ -45,13 +51,13 @@ class ThemeProvider extends models_1.Provider {
45
51
  *
46
52
  * Default: 'mds-theme-stable-darkWebex'
47
53
  */
48
- this.themeclass = themeprovider_constants_1.DEFAULTS.THEMECLASS;
54
+ this.themeclass = DEFAULTS.THEMECLASS;
49
55
  }
50
56
  /**
51
57
  * Context object of the ThemeProvider, to be consumed by child components
52
58
  */
53
59
  static get Context() {
54
- return themeprovider_context_1.default.context;
60
+ return ThemeProviderContext.context;
55
61
  }
56
62
  updated(changedProperties) {
57
63
  super.updated(changedProperties);
@@ -87,13 +93,13 @@ class ThemeProvider extends models_1.Provider {
87
93
  }
88
94
  }
89
95
  }
90
- ThemeProvider.styles = [...models_1.Provider.styles, ...themeprovider_styles_1.default];
91
- tslib_1.__decorate([
92
- (0, decorators_js_1.state)(),
93
- tslib_1.__metadata("design:type", String)
96
+ ThemeProvider.styles = [...Provider.styles, ...styles];
97
+ __decorate([
98
+ state(),
99
+ __metadata("design:type", String)
94
100
  ], ThemeProvider.prototype, "currentThemeClass", void 0);
95
- tslib_1.__decorate([
96
- (0, decorators_js_1.property)({ type: String }),
97
- tslib_1.__metadata("design:type", String)
101
+ __decorate([
102
+ property({ type: String }),
103
+ __metadata("design:type", String)
98
104
  ], ThemeProvider.prototype, "themeclass", void 0);
99
- exports.default = ThemeProvider;
105
+ export default ThemeProvider;
@@ -1,12 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TAG_NAME = exports.DEFAULTS = void 0;
4
- const tslib_1 = require("tslib");
5
1
  /* eslint-disable implicit-arrow-linebreak */
6
- const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
7
- const TAG_NAME = tag_name_1.default.constructTagName('themeprovider');
8
- exports.TAG_NAME = TAG_NAME;
2
+ import utils from '../../utils/tag-name';
3
+ const TAG_NAME = utils.constructTagName('themeprovider');
9
4
  const DEFAULTS = {
10
5
  THEMECLASS: 'mds-theme-stable-darkWebex',
11
6
  };
12
- exports.DEFAULTS = DEFAULTS;
7
+ export { DEFAULTS, TAG_NAME };
@@ -1,7 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const context_1 = require("@lit/context");
4
- const themeprovider_constants_1 = require("./themeprovider.constants");
1
+ import { createContext } from '@lit/context';
2
+ import { TAG_NAME } from './themeprovider.constants';
5
3
  class ThemeProviderContext {
6
4
  // constructor to allow setting the defaultThemeClass
7
5
  constructor(defaultThemeClass) {
@@ -9,5 +7,5 @@ class ThemeProviderContext {
9
7
  }
10
8
  }
11
9
  // create typed lit context as part of the ThemeProviderContext
12
- ThemeProviderContext.context = (0, context_1.createContext)(themeprovider_constants_1.TAG_NAME);
13
- exports.default = ThemeProviderContext;
10
+ ThemeProviderContext.context = createContext(TAG_NAME);
11
+ export default ThemeProviderContext;
@@ -1,7 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const lit_1 = require("lit");
4
- const styles = (0, lit_1.css) `
1
+ import { css } from 'lit';
2
+ const styles = css `
5
3
  :host {
6
4
  --mdc-themeprovider-color-default: var(--mds-color-theme-text-primary-normal);
7
5
  --mdc-themeprovider-font-family: var(--mds-font-family-primary);
@@ -15,4 +13,4 @@ const styles = (0, lit_1.css) `
15
13
  letter-spacing: var(--mdc-themeprovider-letter-spacing-adjustment);
16
14
  }
17
15
  `;
18
- exports.default = [styles];
16
+ export default [styles];
package/dist/index.js CHANGED
@@ -1,16 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Text = exports.Badge = exports.Avatar = exports.IconProvider = exports.Icon = exports.ThemeProvider = void 0;
4
- const tslib_1 = require("tslib");
5
- const themeprovider_1 = tslib_1.__importDefault(require("./components/themeprovider"));
6
- exports.ThemeProvider = themeprovider_1.default;
7
- const icon_1 = tslib_1.__importDefault(require("./components/icon"));
8
- exports.Icon = icon_1.default;
9
- const iconprovider_1 = tslib_1.__importDefault(require("./components/iconprovider"));
10
- exports.IconProvider = iconprovider_1.default;
11
- const avatar_1 = tslib_1.__importDefault(require("./components/avatar"));
12
- exports.Avatar = avatar_1.default;
13
- const badge_1 = tslib_1.__importDefault(require("./components/badge"));
14
- exports.Badge = badge_1.default;
15
- const text_1 = tslib_1.__importDefault(require("./components/text"));
16
- exports.Text = text_1.default;
1
+ import ThemeProvider from './components/themeprovider';
2
+ import Icon from './components/icon';
3
+ import IconProvider from './components/iconprovider';
4
+ import Avatar from './components/avatar';
5
+ import Badge from './components/badge';
6
+ import Text from './components/text';
7
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };
@@ -1,8 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const lit_1 = require("lit");
5
- const component_styles_1 = tslib_1.__importDefault(require("./component.styles"));
1
+ import { LitElement } from 'lit';
2
+ import styles from './component.styles';
6
3
  /**
7
4
  * Core Component class to ultimately be inherited by all Web Components within
8
5
  * this package.
@@ -12,7 +9,7 @@ const component_styles_1 = tslib_1.__importDefault(require("./component.styles")
12
9
  *
13
10
  * @public
14
11
  */
15
- class Component extends lit_1.LitElement {
12
+ class Component extends LitElement {
16
13
  /**
17
14
  * Register `this` extended `Component` Class as a custom element within the
18
15
  * DOM's custom elements registry.
@@ -50,5 +47,5 @@ class Component extends lit_1.LitElement {
50
47
  /**
51
48
  * Styles associated with the Base Component.
52
49
  */
53
- Component.styles = [component_styles_1.default];
54
- exports.default = Component;
50
+ Component.styles = [styles];
51
+ export default Component;
@@ -1,7 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const lit_1 = require("lit");
4
- exports.default = (0, lit_1.css) `
1
+ import { css } from 'lit';
2
+ export default css `
5
3
  :host {
6
4
  box-sizing: border-box;
7
5
  }
@@ -1,2 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ export {};
@@ -1,5 +1,2 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const component_component_1 = tslib_1.__importDefault(require("./component.component"));
5
- exports.default = component_component_1.default;
1
+ import Component from './component.component';
2
+ export default Component;
@@ -1,8 +1,3 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Provider = exports.Component = void 0;
4
- const tslib_1 = require("tslib");
5
- const component_1 = tslib_1.__importDefault(require("./component"));
6
- exports.Component = component_1.default;
7
- const provider_1 = tslib_1.__importDefault(require("./provider"));
8
- exports.Provider = provider_1.default;
1
+ import Component from './component';
2
+ import Provider from './provider';
3
+ export { Component, Provider, };
@@ -1,5 +1,2 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const provider_component_1 = tslib_1.__importDefault(require("./provider.component"));
5
- exports.default = provider_component_1.default;
1
+ import Provider from './provider.component';
2
+ export default Provider;