@momentum-design/components 0.4.14 → 0.4.16

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.
Files changed (55) 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/custom-elements.json +172 -172
  31. package/dist/index.js +7 -16
  32. package/dist/models/component/component.component.js +5 -8
  33. package/dist/models/component/component.styles.js +2 -4
  34. package/dist/models/component/component.types.js +1 -2
  35. package/dist/models/component/index.js +2 -5
  36. package/dist/models/index.js +3 -8
  37. package/dist/models/provider/index.js +2 -5
  38. package/dist/models/provider/provider.component.js +9 -12
  39. package/dist/models/provider/provider.styles.js +3 -5
  40. package/dist/react/avatar/index.js +8 -11
  41. package/dist/react/badge/index.js +8 -11
  42. package/dist/react/icon/index.js +8 -11
  43. package/dist/react/iconprovider/index.js +8 -11
  44. package/dist/react/index.d.ts +1 -1
  45. package/dist/react/index.js +6 -18
  46. package/dist/react/text/index.js +8 -11
  47. package/dist/react/themeprovider/index.js +8 -11
  48. package/dist/utils/mixins/DisabledMixin.js +14 -10
  49. package/dist/utils/mixins/TabIndexMixin.js +14 -10
  50. package/dist/utils/provider/index.js +3 -5
  51. package/dist/utils/styles/index.js +4 -8
  52. package/dist/utils/tag-name/constants.js +1 -3
  53. package/dist/utils/tag-name/index.js +3 -6
  54. package/dist/utils/types.js +1 -2
  55. 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];