@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,12 +1,18 @@
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 if_defined_js_1 = require("lit/directives/if-defined.js");
7
- const avatar_styles_1 = tslib_1.__importDefault(require("./avatar.styles"));
8
- const models_1 = require("../../models");
9
- const avatar_constants_1 = require("./avatar.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 { ifDefined } from 'lit/directives/if-defined.js';
13
+ import styles from './avatar.styles';
14
+ import { Component } from '../../models';
15
+ import { DEFAULTS, LENGTH_UNIT } from './avatar.constants';
10
16
  /**
11
17
  * @slot - This is a default/unnamed slot
12
18
  *
@@ -14,21 +20,21 @@ const avatar_constants_1 = require("./avatar.constants");
14
20
  *
15
21
  * @tagname mdc-avatar
16
22
  */
17
- class Avatar extends models_1.Component {
23
+ class Avatar extends Component {
18
24
  constructor() {
19
25
  super(...arguments);
20
- this.type = avatar_constants_1.DEFAULTS.TYPE;
26
+ this.type = DEFAULTS.TYPE;
21
27
  /**
22
28
  * Scale of the avatar
23
29
  */
24
- this.size = avatar_constants_1.DEFAULTS.SIZE;
30
+ this.size = DEFAULTS.SIZE;
25
31
  }
26
32
  /**
27
33
  * Updates the size by setting the width and height
28
34
  */
29
35
  updateSize() {
30
36
  if (this.size) {
31
- const value = `${this.size}${avatar_constants_1.LENGTH_UNIT}`;
37
+ const value = `${this.size}${LENGTH_UNIT}`;
32
38
  this.style.width = value;
33
39
  this.style.height = value;
34
40
  }
@@ -40,10 +46,10 @@ class Avatar extends models_1.Component {
40
46
  }
41
47
  }
42
48
  photoTemplate() {
43
- return (0, lit_1.html) `
49
+ return html `
44
50
  <img
45
- src="${(0, if_defined_js_1.ifDefined)(this.src)}"
46
- alt="${(0, if_defined_js_1.ifDefined)(this.alt)}"
51
+ src="${ifDefined(this.src)}"
52
+ alt="${ifDefined(this.alt)}"
47
53
  />
48
54
  `;
49
55
  }
@@ -53,26 +59,26 @@ class Avatar extends models_1.Component {
53
59
  content = this.photoTemplate();
54
60
  }
55
61
  else {
56
- content = (0, lit_1.html) ``;
62
+ content = html ``;
57
63
  }
58
- return (0, lit_1.html) `${content}`;
64
+ return html `${content}`;
59
65
  }
60
66
  }
61
- Avatar.styles = [...models_1.Component.styles, ...avatar_styles_1.default];
62
- tslib_1.__decorate([
63
- (0, decorators_js_1.property)({ type: String, reflect: true }),
64
- tslib_1.__metadata("design:type", String)
67
+ Avatar.styles = [...Component.styles, ...styles];
68
+ __decorate([
69
+ property({ type: String, reflect: true }),
70
+ __metadata("design:type", String)
65
71
  ], Avatar.prototype, "type", void 0);
66
- tslib_1.__decorate([
67
- (0, decorators_js_1.property)({ type: String }),
68
- tslib_1.__metadata("design:type", String)
72
+ __decorate([
73
+ property({ type: String }),
74
+ __metadata("design:type", String)
69
75
  ], Avatar.prototype, "alt", void 0);
70
- tslib_1.__decorate([
71
- (0, decorators_js_1.property)({ type: String }),
72
- tslib_1.__metadata("design:type", String)
76
+ __decorate([
77
+ property({ type: String }),
78
+ __metadata("design:type", String)
73
79
  ], Avatar.prototype, "src", void 0);
74
- tslib_1.__decorate([
75
- (0, decorators_js_1.property)({ type: Number }),
76
- tslib_1.__metadata("design:type", Number)
80
+ __decorate([
81
+ property({ type: Number }),
82
+ __metadata("design:type", Number)
77
83
  ], Avatar.prototype, "size", void 0);
78
- exports.default = Avatar;
84
+ export default Avatar;
@@ -1,14 +1,8 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.LENGTH_UNIT = 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('avatar');
7
- exports.TAG_NAME = TAG_NAME;
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('avatar');
8
3
  const LENGTH_UNIT = 'rem';
9
- exports.LENGTH_UNIT = LENGTH_UNIT;
10
4
  const DEFAULTS = {
11
5
  TYPE: 'photo',
12
6
  SIZE: 1.5,
13
7
  };
14
- exports.DEFAULTS = DEFAULTS;
8
+ export { TAG_NAME, DEFAULTS, LENGTH_UNIT };
@@ -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
  display: flex;
7
5
  justify-content: center;
@@ -17,4 +15,4 @@ const styles = (0, lit_1.css) `
17
15
  object-fit: cover;
18
16
  }
19
17
  `;
20
- exports.default = [styles];
18
+ 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 avatar_component_1 = tslib_1.__importDefault(require("./avatar.component"));
5
- const avatar_constants_1 = require("./avatar.constants");
6
- avatar_component_1.default.register(avatar_constants_1.TAG_NAME);
7
- exports.default = avatar_component_1.default;
1
+ import Avatar from './avatar.component';
2
+ import { TAG_NAME } from './avatar.constants';
3
+ Avatar.register(TAG_NAME);
4
+ export default Avatar;
@@ -1,13 +1,19 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const lit_1 = require("lit");
5
- const class_map_js_1 = require("lit-html/directives/class-map.js");
6
- const decorators_js_1 = require("lit/decorators.js");
7
- const if_defined_js_1 = require("lit/directives/if-defined.js");
8
- const models_1 = require("../../models");
9
- const badge_constants_1 = require("./badge.constants");
10
- const badge_styles_1 = tslib_1.__importDefault(require("./badge.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 { html } from 'lit';
11
+ import { classMap } from 'lit-html/directives/class-map.js';
12
+ import { property } from 'lit/decorators.js';
13
+ import { ifDefined } from 'lit/directives/if-defined.js';
14
+ import { Component } from '../../models';
15
+ import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
16
+ import styles from './badge.styles';
11
17
  /**
12
18
  * A badge is a small, visually distinct element that provides additional information
13
19
  * or highlights the status of an item.
@@ -18,7 +24,7 @@ const badge_styles_1 = tslib_1.__importDefault(require("./badge.styles"));
18
24
  *
19
25
  * @tagname mdc-badge
20
26
  */
21
- class Badge extends models_1.Component {
27
+ class Badge extends Component {
22
28
  constructor() {
23
29
  super(...arguments);
24
30
  /**
@@ -27,12 +33,12 @@ class Badge extends models_1.Component {
27
33
  *
28
34
  * Default: `dot`
29
35
  */
30
- this.type = badge_constants_1.DEFAULTS.TYPE;
36
+ this.type = DEFAULTS.TYPE;
31
37
  /**
32
38
  * badge variant
33
39
  */
34
- this.variant = badge_constants_1.DEFAULTS.VARIANT;
35
- this.maxCounter = badge_constants_1.DEFAULTS.MAX_COUNTER;
40
+ this.variant = DEFAULTS.VARIANT;
41
+ this.maxCounter = DEFAULTS.MAX_COUNTER;
36
42
  this.overlay = false;
37
43
  /**
38
44
  * Aria-label attribute to be set for accessibility
@@ -53,8 +59,8 @@ class Badge extends models_1.Component {
53
59
  return '';
54
60
  }
55
61
  // At any given time, the max limit should not cross 999.
56
- if (counter > badge_constants_1.DEFAULTS.MAX_COUNTER_LIMIT) {
57
- return `${badge_constants_1.DEFAULTS.MAX_COUNTER_LIMIT}+`;
62
+ if (counter > DEFAULTS.MAX_COUNTER_LIMIT) {
63
+ return `${DEFAULTS.MAX_COUNTER_LIMIT}+`;
58
64
  }
59
65
  if (counter > maxCounter) {
60
66
  return `${maxCounter}+`;
@@ -68,12 +74,12 @@ class Badge extends models_1.Component {
68
74
  * @returns the template result of the icon.
69
75
  */
70
76
  getBadgeIcon(iconName, overlay, iconVariant, type) {
71
- return (0, lit_1.html) `
77
+ return html `
72
78
  <mdc-icon
73
- class="mdc-badge-icon ${(0, class_map_js_1.classMap)(this.getIconClasses(overlay, iconVariant, type))}"
74
- name="${(0, if_defined_js_1.ifDefined)(iconName)}"
75
- length-unit="${badge_constants_1.DEFAULTS.LENGTH_UNIT}"
76
- size="${badge_constants_1.DEFAULTS.ICON_SIZE}"
79
+ class="mdc-badge-icon ${classMap(this.getIconClasses(overlay, iconVariant, type))}"
80
+ name="${ifDefined(iconName)}"
81
+ length-unit="${DEFAULTS.LENGTH_UNIT}"
82
+ size="${DEFAULTS.ICON_SIZE}"
77
83
  ></mdc-icon>
78
84
  `;
79
85
  }
@@ -83,7 +89,7 @@ class Badge extends models_1.Component {
83
89
  * @returns the template result of the dot with mdc-badge-dot class.
84
90
  */
85
91
  getBadgeDot(overlay) {
86
- return (0, lit_1.html) `<div class="mdc-badge-dot ${(0, class_map_js_1.classMap)({ 'mdc-badge-overlay': overlay })}"></div>`;
92
+ return html `<div class="mdc-badge-dot ${classMap({ 'mdc-badge-overlay': overlay })}"></div>`;
87
93
  }
88
94
  /**
89
95
  * This method generates the CSS classes for the badge icon.
@@ -94,9 +100,9 @@ class Badge extends models_1.Component {
94
100
  */
95
101
  getIconClasses(overlay, iconVariant, type) {
96
102
  const overLayClass = { 'mdc-badge-overlay': overlay };
97
- const variantTypes = type === badge_constants_1.BADGE_TYPE.ICON ? badge_constants_1.ICON_VARIANT : badge_constants_1.ICON_STATE;
103
+ const variantTypes = type === BADGE_TYPE.ICON ? ICON_VARIANT : ICON_STATE;
98
104
  const iconVariantType = Object.values(variantTypes).includes(iconVariant)
99
- ? iconVariant : badge_constants_1.DEFAULTS.VARIANT;
105
+ ? iconVariant : DEFAULTS.VARIANT;
100
106
  const backgroundClass = { [`mdc-badge-icon__${iconVariantType}`]: true };
101
107
  return {
102
108
  ...overLayClass,
@@ -111,11 +117,11 @@ class Badge extends models_1.Component {
111
117
  * @returns the template result of the text.
112
118
  */
113
119
  getBadgeCounterText(maxCounter, overlay, counter) {
114
- return (0, lit_1.html) `
120
+ return html `
115
121
  <mdc-text
116
122
  type="body-small-medium"
117
123
  tagname="div"
118
- class="mdc-badge-text ${(0, class_map_js_1.classMap)({ 'mdc-badge-overlay': overlay })}"
124
+ class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
119
125
  >
120
126
  ${this.getCounterText(maxCounter, counter)}
121
127
  </mdc-text>
@@ -144,20 +150,20 @@ class Badge extends models_1.Component {
144
150
  getBadgeContentBasedOnType() {
145
151
  const { counter, iconName, maxCounter, overlay, type, variant } = this;
146
152
  switch (type) {
147
- case badge_constants_1.BADGE_TYPE.DOT:
153
+ case BADGE_TYPE.DOT:
148
154
  return this.getBadgeDot(overlay);
149
- case badge_constants_1.BADGE_TYPE.ICON:
155
+ case BADGE_TYPE.ICON:
150
156
  return this.getBadgeIcon(iconName || '', overlay, variant, type);
151
- case badge_constants_1.BADGE_TYPE.COUNTER:
157
+ case BADGE_TYPE.COUNTER:
152
158
  return this.getBadgeCounterText(maxCounter, overlay, counter);
153
- case badge_constants_1.BADGE_TYPE.SUCCESS:
154
- return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, badge_constants_1.ICON_STATE.SUCCESS);
155
- case badge_constants_1.BADGE_TYPE.WARNING:
156
- return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, badge_constants_1.ICON_STATE.WARNING);
157
- case badge_constants_1.BADGE_TYPE.ERROR:
158
- return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, badge_constants_1.ICON_STATE.ERROR);
159
+ case BADGE_TYPE.SUCCESS:
160
+ return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, ICON_STATE.SUCCESS);
161
+ case BADGE_TYPE.WARNING:
162
+ return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, ICON_STATE.WARNING);
163
+ case BADGE_TYPE.ERROR:
164
+ return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, ICON_STATE.ERROR);
159
165
  default:
160
- return (0, lit_1.html) ``;
166
+ return html ``;
161
167
  }
162
168
  }
163
169
  update(changedProperties) {
@@ -170,33 +176,33 @@ class Badge extends models_1.Component {
170
176
  return this.getBadgeContentBasedOnType();
171
177
  }
172
178
  }
173
- Badge.styles = [...models_1.Component.styles, ...badge_styles_1.default];
174
- tslib_1.__decorate([
175
- (0, decorators_js_1.property)({ type: String, reflect: true }),
176
- tslib_1.__metadata("design:type", Object)
179
+ Badge.styles = [...Component.styles, ...styles];
180
+ __decorate([
181
+ property({ type: String, reflect: true }),
182
+ __metadata("design:type", Object)
177
183
  ], Badge.prototype, "type", void 0);
178
- tslib_1.__decorate([
179
- (0, decorators_js_1.property)({ type: String, attribute: 'icon-name' }),
180
- tslib_1.__metadata("design:type", String)
184
+ __decorate([
185
+ property({ type: String, attribute: 'icon-name' }),
186
+ __metadata("design:type", String)
181
187
  ], Badge.prototype, "iconName", void 0);
182
- tslib_1.__decorate([
183
- (0, decorators_js_1.property)({ type: String }),
184
- tslib_1.__metadata("design:type", Object)
188
+ __decorate([
189
+ property({ type: String }),
190
+ __metadata("design:type", Object)
185
191
  ], Badge.prototype, "variant", void 0);
186
- tslib_1.__decorate([
187
- (0, decorators_js_1.property)({ type: Number }),
188
- tslib_1.__metadata("design:type", Number)
192
+ __decorate([
193
+ property({ type: Number }),
194
+ __metadata("design:type", Number)
189
195
  ], Badge.prototype, "counter", void 0);
190
- tslib_1.__decorate([
191
- (0, decorators_js_1.property)({ type: Number, attribute: 'max-counter' }),
192
- tslib_1.__metadata("design:type", Number)
196
+ __decorate([
197
+ property({ type: Number, attribute: 'max-counter' }),
198
+ __metadata("design:type", Number)
193
199
  ], Badge.prototype, "maxCounter", void 0);
194
- tslib_1.__decorate([
195
- (0, decorators_js_1.property)({ type: Boolean }),
196
- tslib_1.__metadata("design:type", Object)
200
+ __decorate([
201
+ property({ type: Boolean }),
202
+ __metadata("design:type", Object)
197
203
  ], Badge.prototype, "overlay", void 0);
198
- tslib_1.__decorate([
199
- (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
200
- tslib_1.__metadata("design:type", Object)
204
+ __decorate([
205
+ property({ type: String, attribute: 'aria-label' }),
206
+ __metadata("design:type", Object)
201
207
  ], Badge.prototype, "ariaLabel", void 0);
202
- exports.default = Badge;
208
+ export default Badge;
@@ -1,10 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ICON_NAMES_LIST = exports.ICON_VARIANT = exports.ICON_STATE = exports.BADGE_TYPE = 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('badge');
7
- exports.TAG_NAME = TAG_NAME;
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('badge');
8
3
  const BADGE_TYPE = {
9
4
  DOT: 'dot',
10
5
  ICON: 'icon',
@@ -13,24 +8,20 @@ const BADGE_TYPE = {
13
8
  WARNING: 'warning',
14
9
  ERROR: 'error',
15
10
  };
16
- exports.BADGE_TYPE = BADGE_TYPE;
17
11
  const ICON_NAMES_LIST = {
18
12
  SUCCESS_ICON_NAME: 'check-circle-filled',
19
13
  WARNING_ICON_NAME: 'warning-filled',
20
14
  ERROR_ICON_NAME: 'error-legacy-filled',
21
15
  };
22
- exports.ICON_NAMES_LIST = ICON_NAMES_LIST;
23
16
  const ICON_VARIANT = {
24
17
  PRIMARY: 'primary',
25
18
  SECONDARY: 'secondary',
26
19
  };
27
- exports.ICON_VARIANT = ICON_VARIANT;
28
20
  const ICON_STATE = {
29
21
  SUCCESS: 'success',
30
22
  WARNING: 'warning',
31
23
  ERROR: 'error',
32
24
  };
33
- exports.ICON_STATE = ICON_STATE;
34
25
  const DEFAULTS = {
35
26
  TYPE: BADGE_TYPE.DOT,
36
27
  LENGTH_UNIT: 'rem',
@@ -39,4 +30,4 @@ const DEFAULTS = {
39
30
  VARIANT: ICON_VARIANT.PRIMARY,
40
31
  ICON_SIZE: 1,
41
32
  };
42
- exports.DEFAULTS = DEFAULTS;
33
+ export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };
@@ -1,10 +1,8 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const lit_1 = require("lit");
4
- const styles_1 = require("../../utils/styles");
1
+ import { css } from 'lit';
2
+ import { hostFitContentStyles } from '../../utils/styles';
5
3
  const styles = [
6
- styles_1.hostFitContentStyles,
7
- (0, lit_1.css) `
4
+ hostFitContentStyles,
5
+ css `
8
6
  :host {
9
7
  --mdc-badge-primary-foreground-color: var(--mds-color-theme-common-text-primary-normal);
10
8
  --mdc-badge-primary-background-color: var(--mds-color-theme-background-accent-normal);
@@ -67,4 +65,4 @@ const styles = [
67
65
  }
68
66
  `,
69
67
  ];
70
- exports.default = styles;
68
+ export default styles;
@@ -1,9 +1,6 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const badge_component_1 = tslib_1.__importDefault(require("./badge.component"));
5
- const badge_constants_1 = require("./badge.constants");
6
- require("../icon");
7
- require("../text");
8
- badge_component_1.default.register(badge_constants_1.TAG_NAME);
9
- exports.default = badge_component_1.default;
1
+ import Badge from './badge.component';
2
+ import { TAG_NAME } from './badge.constants';
3
+ import '../icon';
4
+ import '../text';
5
+ Badge.register(TAG_NAME);
6
+ export default Badge;
@@ -1,14 +1,20 @@
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 icon_styles_1 = tslib_1.__importDefault(require("./icon.styles"));
7
- const models_1 = require("../../models");
8
- const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
9
- const iconprovider_component_1 = tslib_1.__importDefault(require("../iconprovider/iconprovider.component"));
10
- const icon_utils_1 = require("./icon.utils");
11
- const icon_constants_1 = require("./icon.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, state } from 'lit/decorators.js';
12
+ import styles from './icon.styles';
13
+ import { Component } from '../../models';
14
+ import providerUtils from '../../utils/provider';
15
+ import IconProvider from '../iconprovider/iconprovider.component';
16
+ import { dynamicSVGImport } from './icon.utils';
17
+ import { DEFAULTS } from './icon.constants';
12
18
  /**
13
19
  * Icon component that dynamically displays SVG icons based on a valid name.
14
20
  *
@@ -46,18 +52,18 @@ const icon_constants_1 = require("./icon.constants");
46
52
  *
47
53
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
48
54
  */
49
- class Icon extends models_1.Component {
55
+ class Icon extends Component {
50
56
  constructor() {
51
57
  super(...arguments);
52
58
  /**
53
59
  * Name of the icon (= filename)
54
60
  */
55
- this.name = icon_constants_1.DEFAULTS.NAME;
61
+ this.name = DEFAULTS.NAME;
56
62
  /**
57
63
  * Aria-label attribute to be set for accessibility
58
64
  */
59
65
  this.ariaLabel = null;
60
- this.iconProviderContext = provider_1.default.consume({ host: this, context: iconprovider_component_1.default.Context });
66
+ this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
61
67
  }
62
68
  /**
63
69
  * Get Icon Data function which will fetch the icon (currently only svg)
@@ -67,7 +73,7 @@ class Icon extends models_1.Component {
67
73
  if (this.iconProviderContext.value) {
68
74
  const { fileExtension, url } = this.iconProviderContext.value;
69
75
  if (url && fileExtension && this.name) {
70
- const iconHtml = await (0, icon_utils_1.dynamicSVGImport)(url, this.name, fileExtension);
76
+ const iconHtml = await dynamicSVGImport(url, this.name, fileExtension);
71
77
  // update iconData state once fetched:
72
78
  this.iconData = iconHtml;
73
79
  // when icon got fetched, set role and aria-label:
@@ -108,7 +114,7 @@ class Icon extends models_1.Component {
108
114
  }
109
115
  get computedIconSize() {
110
116
  var _a, _b;
111
- return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : icon_constants_1.DEFAULTS.SIZE;
117
+ return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : DEFAULTS.SIZE;
112
118
  }
113
119
  updated(changedProperties) {
114
120
  var _a, _b, _c, _d;
@@ -137,36 +143,36 @@ class Icon extends models_1.Component {
137
143
  }
138
144
  }
139
145
  render() {
140
- return (0, lit_1.html) ` ${this.iconData} `;
146
+ return html ` ${this.iconData} `;
141
147
  }
142
148
  }
143
- Icon.styles = [...models_1.Component.styles, ...icon_styles_1.default];
144
- tslib_1.__decorate([
145
- (0, decorators_js_1.state)(),
146
- tslib_1.__metadata("design:type", HTMLElement)
149
+ Icon.styles = [...Component.styles, ...styles];
150
+ __decorate([
151
+ state(),
152
+ __metadata("design:type", HTMLElement)
147
153
  ], Icon.prototype, "iconData", void 0);
148
- tslib_1.__decorate([
149
- (0, decorators_js_1.state)(),
150
- tslib_1.__metadata("design:type", String)
154
+ __decorate([
155
+ state(),
156
+ __metadata("design:type", String)
151
157
  ], Icon.prototype, "lengthUnitFromContext", void 0);
152
- tslib_1.__decorate([
153
- (0, decorators_js_1.state)(),
154
- tslib_1.__metadata("design:type", Number)
158
+ __decorate([
159
+ state(),
160
+ __metadata("design:type", Number)
155
161
  ], Icon.prototype, "sizeFromContext", void 0);
156
- tslib_1.__decorate([
157
- (0, decorators_js_1.property)({ type: String, reflect: true }),
158
- tslib_1.__metadata("design:type", String)
162
+ __decorate([
163
+ property({ type: String, reflect: true }),
164
+ __metadata("design:type", String)
159
165
  ], Icon.prototype, "name", void 0);
160
- tslib_1.__decorate([
161
- (0, decorators_js_1.property)({ type: Number }),
162
- tslib_1.__metadata("design:type", Number)
166
+ __decorate([
167
+ property({ type: Number }),
168
+ __metadata("design:type", Number)
163
169
  ], Icon.prototype, "size", void 0);
164
- tslib_1.__decorate([
165
- (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
166
- tslib_1.__metadata("design:type", String)
170
+ __decorate([
171
+ property({ type: String, attribute: 'length-unit' }),
172
+ __metadata("design:type", String)
167
173
  ], Icon.prototype, "lengthUnit", void 0);
168
- tslib_1.__decorate([
169
- (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
170
- tslib_1.__metadata("design:type", Object)
174
+ __decorate([
175
+ property({ type: String, attribute: 'aria-label' }),
176
+ __metadata("design:type", Object)
171
177
  ], Icon.prototype, "ariaLabel", void 0);
172
- exports.default = Icon;
178
+ export default Icon;
@@ -1,12 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- 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('icon');
7
- exports.TAG_NAME = TAG_NAME;
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('icon');
8
3
  const DEFAULTS = {
9
4
  NAME: undefined,
10
5
  SIZE: 1,
11
6
  };
12
- exports.DEFAULTS = DEFAULTS;
7
+ export { TAG_NAME, DEFAULTS };
@@ -1,10 +1,8 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const lit_1 = require("lit");
4
- const styles_1 = require("../../utils/styles");
1
+ import { css } from 'lit';
2
+ import { hostFitContentStyles } from '../../utils/styles';
5
3
  const styles = [
6
- styles_1.hostFitContentStyles,
7
- (0, lit_1.css) `
4
+ hostFitContentStyles,
5
+ css `
8
6
  :host {
9
7
  --mdc-icon-fill-color: currentColor;
10
8
  }
@@ -15,4 +13,4 @@ const styles = [
15
13
  }
16
14
  `,
17
15
  ];
18
- exports.default = styles;
16
+ export default styles;
@@ -1,7 +1,4 @@
1
- "use strict";
2
1
  /* eslint-disable implicit-arrow-linebreak */
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.dynamicSVGImport = void 0;
5
2
  /**
6
3
  * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
7
4
  * It will throw an error if the response is not ok.
@@ -20,4 +17,4 @@ const dynamicSVGImport = async (url, name, fileExtension) => {
20
17
  const iconResponse = await response.text();
21
18
  return new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
22
19
  };
23
- exports.dynamicSVGImport = dynamicSVGImport;
20
+ export { dynamicSVGImport };