@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.
- package/dist/components/avatar/avatar.component.js +38 -32
- package/dist/components/avatar/avatar.constants.js +3 -9
- package/dist/components/avatar/avatar.styles.js +3 -5
- package/dist/components/avatar/avatar.types.js +1 -2
- package/dist/components/avatar/index.js +4 -7
- package/dist/components/badge/badge.component.js +65 -59
- package/dist/components/badge/badge.constants.js +3 -12
- package/dist/components/badge/badge.styles.js +5 -7
- package/dist/components/badge/index.js +6 -9
- package/dist/components/icon/icon.component.js +46 -40
- package/dist/components/icon/icon.constants.js +3 -8
- package/dist/components/icon/icon.styles.js +5 -7
- package/dist/components/icon/icon.utils.js +1 -4
- package/dist/components/icon/index.js +4 -7
- package/dist/components/iconprovider/iconprovider.component.js +39 -33
- package/dist/components/iconprovider/iconprovider.constants.js +3 -10
- package/dist/components/iconprovider/iconprovider.context.js +4 -6
- package/dist/components/iconprovider/index.js +4 -7
- package/dist/components/text/fonts.styles.js +2 -5
- package/dist/components/text/index.js +4 -7
- package/dist/components/text/text.component.js +35 -29
- package/dist/components/text/text.constants.js +3 -9
- package/dist/components/text/text.styles.js +5 -7
- package/dist/components/text/text.types.js +1 -2
- package/dist/components/themeprovider/index.js +4 -7
- package/dist/components/themeprovider/themeprovider.component.js +27 -21
- package/dist/components/themeprovider/themeprovider.constants.js +3 -8
- package/dist/components/themeprovider/themeprovider.context.js +4 -6
- package/dist/components/themeprovider/themeprovider.styles.js +3 -5
- package/dist/custom-elements.json +172 -172
- package/dist/index.js +7 -16
- package/dist/models/component/component.component.js +5 -8
- package/dist/models/component/component.styles.js +2 -4
- package/dist/models/component/component.types.js +1 -2
- package/dist/models/component/index.js +2 -5
- package/dist/models/index.js +3 -8
- package/dist/models/provider/index.js +2 -5
- package/dist/models/provider/provider.component.js +9 -12
- package/dist/models/provider/provider.styles.js +3 -5
- package/dist/react/avatar/index.js +8 -11
- package/dist/react/badge/index.js +8 -11
- package/dist/react/icon/index.js +8 -11
- package/dist/react/iconprovider/index.js +8 -11
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +6 -18
- package/dist/react/text/index.js +8 -11
- package/dist/react/themeprovider/index.js +8 -11
- package/dist/utils/mixins/DisabledMixin.js +14 -10
- package/dist/utils/mixins/TabIndexMixin.js +14 -10
- package/dist/utils/provider/index.js +3 -5
- package/dist/utils/styles/index.js +4 -8
- package/dist/utils/tag-name/constants.js +1 -3
- package/dist/utils/tag-name/index.js +3 -6
- package/dist/utils/types.js +1 -2
- package/package.json +1 -1
@@ -1,12 +1,18 @@
|
|
1
|
-
|
2
|
-
Object.
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
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
|
23
|
+
class Avatar extends Component {
|
18
24
|
constructor() {
|
19
25
|
super(...arguments);
|
20
|
-
this.type =
|
26
|
+
this.type = DEFAULTS.TYPE;
|
21
27
|
/**
|
22
28
|
* Scale of the avatar
|
23
29
|
*/
|
24
|
-
this.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}${
|
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
|
49
|
+
return html `
|
44
50
|
<img
|
45
|
-
src="${
|
46
|
-
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 =
|
62
|
+
content = html ``;
|
57
63
|
}
|
58
|
-
return
|
64
|
+
return html `${content}`;
|
59
65
|
}
|
60
66
|
}
|
61
|
-
Avatar.styles = [...
|
62
|
-
|
63
|
-
|
64
|
-
|
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
|
-
|
67
|
-
|
68
|
-
|
72
|
+
__decorate([
|
73
|
+
property({ type: String }),
|
74
|
+
__metadata("design:type", String)
|
69
75
|
], Avatar.prototype, "alt", void 0);
|
70
|
-
|
71
|
-
|
72
|
-
|
76
|
+
__decorate([
|
77
|
+
property({ type: String }),
|
78
|
+
__metadata("design:type", String)
|
73
79
|
], Avatar.prototype, "src", void 0);
|
74
|
-
|
75
|
-
|
76
|
-
|
80
|
+
__decorate([
|
81
|
+
property({ type: Number }),
|
82
|
+
__metadata("design:type", Number)
|
77
83
|
], Avatar.prototype, "size", void 0);
|
78
|
-
|
84
|
+
export default Avatar;
|
@@ -1,14 +1,8 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
8
|
+
export { TAG_NAME, DEFAULTS, LENGTH_UNIT };
|
@@ -1,7 +1,5 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
18
|
+
export default [styles];
|
@@ -1,2 +1 @@
|
|
1
|
-
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
1
|
+
export {};
|
@@ -1,7 +1,4 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
2
|
-
Object.
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
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
|
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 =
|
36
|
+
this.type = DEFAULTS.TYPE;
|
31
37
|
/**
|
32
38
|
* badge variant
|
33
39
|
*/
|
34
|
-
this.variant =
|
35
|
-
this.maxCounter =
|
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 >
|
57
|
-
return `${
|
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
|
77
|
+
return html `
|
72
78
|
<mdc-icon
|
73
|
-
class="mdc-badge-icon ${
|
74
|
-
name="${
|
75
|
-
length-unit="${
|
76
|
-
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
|
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 ===
|
103
|
+
const variantTypes = type === BADGE_TYPE.ICON ? ICON_VARIANT : ICON_STATE;
|
98
104
|
const iconVariantType = Object.values(variantTypes).includes(iconVariant)
|
99
|
-
? iconVariant :
|
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
|
120
|
+
return html `
|
115
121
|
<mdc-text
|
116
122
|
type="body-small-medium"
|
117
123
|
tagname="div"
|
118
|
-
class="mdc-badge-text ${
|
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
|
153
|
+
case BADGE_TYPE.DOT:
|
148
154
|
return this.getBadgeDot(overlay);
|
149
|
-
case
|
155
|
+
case BADGE_TYPE.ICON:
|
150
156
|
return this.getBadgeIcon(iconName || '', overlay, variant, type);
|
151
|
-
case
|
157
|
+
case BADGE_TYPE.COUNTER:
|
152
158
|
return this.getBadgeCounterText(maxCounter, overlay, counter);
|
153
|
-
case
|
154
|
-
return this.getBadgeIcon(
|
155
|
-
case
|
156
|
-
return this.getBadgeIcon(
|
157
|
-
case
|
158
|
-
return this.getBadgeIcon(
|
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
|
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 = [...
|
174
|
-
|
175
|
-
|
176
|
-
|
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
|
-
|
179
|
-
|
180
|
-
|
184
|
+
__decorate([
|
185
|
+
property({ type: String, attribute: 'icon-name' }),
|
186
|
+
__metadata("design:type", String)
|
181
187
|
], Badge.prototype, "iconName", void 0);
|
182
|
-
|
183
|
-
|
184
|
-
|
188
|
+
__decorate([
|
189
|
+
property({ type: String }),
|
190
|
+
__metadata("design:type", Object)
|
185
191
|
], Badge.prototype, "variant", void 0);
|
186
|
-
|
187
|
-
|
188
|
-
|
192
|
+
__decorate([
|
193
|
+
property({ type: Number }),
|
194
|
+
__metadata("design:type", Number)
|
189
195
|
], Badge.prototype, "counter", void 0);
|
190
|
-
|
191
|
-
|
192
|
-
|
196
|
+
__decorate([
|
197
|
+
property({ type: Number, attribute: 'max-counter' }),
|
198
|
+
__metadata("design:type", Number)
|
193
199
|
], Badge.prototype, "maxCounter", void 0);
|
194
|
-
|
195
|
-
|
196
|
-
|
200
|
+
__decorate([
|
201
|
+
property({ type: Boolean }),
|
202
|
+
__metadata("design:type", Object)
|
197
203
|
], Badge.prototype, "overlay", void 0);
|
198
|
-
|
199
|
-
|
200
|
-
|
204
|
+
__decorate([
|
205
|
+
property({ type: String, attribute: 'aria-label' }),
|
206
|
+
__metadata("design:type", Object)
|
201
207
|
], Badge.prototype, "ariaLabel", void 0);
|
202
|
-
|
208
|
+
export default Badge;
|
@@ -1,10 +1,5 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
33
|
+
export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };
|
@@ -1,10 +1,8 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
7
|
-
|
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
|
-
|
68
|
+
export default styles;
|
@@ -1,9 +1,6 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
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
|
-
|
2
|
-
Object.
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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
|
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 =
|
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 =
|
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
|
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 :
|
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
|
146
|
+
return html ` ${this.iconData} `;
|
141
147
|
}
|
142
148
|
}
|
143
|
-
Icon.styles = [...
|
144
|
-
|
145
|
-
|
146
|
-
|
149
|
+
Icon.styles = [...Component.styles, ...styles];
|
150
|
+
__decorate([
|
151
|
+
state(),
|
152
|
+
__metadata("design:type", HTMLElement)
|
147
153
|
], Icon.prototype, "iconData", void 0);
|
148
|
-
|
149
|
-
|
150
|
-
|
154
|
+
__decorate([
|
155
|
+
state(),
|
156
|
+
__metadata("design:type", String)
|
151
157
|
], Icon.prototype, "lengthUnitFromContext", void 0);
|
152
|
-
|
153
|
-
|
154
|
-
|
158
|
+
__decorate([
|
159
|
+
state(),
|
160
|
+
__metadata("design:type", Number)
|
155
161
|
], Icon.prototype, "sizeFromContext", void 0);
|
156
|
-
|
157
|
-
|
158
|
-
|
162
|
+
__decorate([
|
163
|
+
property({ type: String, reflect: true }),
|
164
|
+
__metadata("design:type", String)
|
159
165
|
], Icon.prototype, "name", void 0);
|
160
|
-
|
161
|
-
|
162
|
-
|
166
|
+
__decorate([
|
167
|
+
property({ type: Number }),
|
168
|
+
__metadata("design:type", Number)
|
163
169
|
], Icon.prototype, "size", void 0);
|
164
|
-
|
165
|
-
|
166
|
-
|
170
|
+
__decorate([
|
171
|
+
property({ type: String, attribute: 'length-unit' }),
|
172
|
+
__metadata("design:type", String)
|
167
173
|
], Icon.prototype, "lengthUnit", void 0);
|
168
|
-
|
169
|
-
|
170
|
-
|
174
|
+
__decorate([
|
175
|
+
property({ type: String, attribute: 'aria-label' }),
|
176
|
+
__metadata("design:type", Object)
|
171
177
|
], Icon.prototype, "ariaLabel", void 0);
|
172
|
-
|
178
|
+
export default Icon;
|
@@ -1,12 +1,7 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
7
|
+
export { TAG_NAME, DEFAULTS };
|
@@ -1,10 +1,8 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
7
|
-
|
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
|
-
|
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
|
-
|
20
|
+
export { dynamicSVGImport };
|