@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.
- 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/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.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,7 +1,4 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
2
|
-
Object.
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
26
|
+
class IconProvider extends Provider {
|
21
27
|
constructor() {
|
22
28
|
// initialise the context by running the Provider constructor:
|
23
29
|
super({
|
24
|
-
context:
|
25
|
-
initialValue: new
|
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 =
|
36
|
+
this.fileExtension = DEFAULTS.FILE_EXTENSION;
|
31
37
|
/**
|
32
38
|
* Length unit used for sizing of icons, default: 'em'
|
33
39
|
*/
|
34
|
-
this.lengthUnit =
|
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 =
|
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
|
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 &&
|
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 =
|
55
|
-
this.context.value.fileExtension =
|
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 &&
|
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 =
|
65
|
-
this.context.value.lengthUnit =
|
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
|
-
|
79
|
-
|
80
|
-
|
84
|
+
__decorate([
|
85
|
+
property({ type: String }),
|
86
|
+
__metadata("design:type", String)
|
81
87
|
], IconProvider.prototype, "url", void 0);
|
82
|
-
|
83
|
-
|
84
|
-
|
88
|
+
__decorate([
|
89
|
+
property({ type: String, attribute: 'file-extension', reflect: true }),
|
90
|
+
__metadata("design:type", String)
|
85
91
|
], IconProvider.prototype, "fileExtension", void 0);
|
86
|
-
|
87
|
-
|
88
|
-
|
92
|
+
__decorate([
|
93
|
+
property({ type: String, attribute: 'length-unit', reflect: true }),
|
94
|
+
__metadata("design:type", String)
|
89
95
|
], IconProvider.prototype, "lengthUnit", void 0);
|
90
|
-
|
91
|
-
|
92
|
-
|
96
|
+
__decorate([
|
97
|
+
property({ type: Number, reflect: true }),
|
98
|
+
__metadata("design:type", Number)
|
93
99
|
], IconProvider.prototype, "size", void 0);
|
94
|
-
|
100
|
+
export default IconProvider;
|
@@ -1,14 +1,7 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
14
|
+
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
|
@@ -1,9 +1,7 @@
|
|
1
|
-
|
2
|
-
|
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 =
|
9
|
-
|
6
|
+
IconProviderContext.context = createContext(TAG_NAME);
|
7
|
+
export default IconProviderContext;
|
@@ -1,7 +1,4 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
2
|
-
|
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
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
2
|
-
Object.
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
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
|
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 =
|
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 =
|
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
|
93
|
-
case 'h2': return
|
94
|
-
case 'h3': return
|
95
|
-
case 'h4': return
|
96
|
-
case 'h5': return
|
97
|
-
case 'h6': return
|
98
|
-
case 'div': return
|
99
|
-
case 'span': return
|
100
|
-
case 'small': return
|
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
|
108
|
+
default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
|
103
109
|
}
|
104
110
|
}
|
105
111
|
}
|
106
|
-
Text.styles = [...
|
107
|
-
|
108
|
-
|
109
|
-
|
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
|
-
|
112
|
-
|
113
|
-
|
117
|
+
__decorate([
|
118
|
+
property({ attribute: 'tagname', reflect: true, type: String }),
|
119
|
+
__metadata("design:type", String)
|
114
120
|
], Text.prototype, "tagname", void 0);
|
115
|
-
|
121
|
+
export default Text;
|
@@ -1,10 +1,5 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
53
|
+
export { TAG_NAME, DEFAULTS, VALUES };
|
@@ -1,9 +1,7 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
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
|
-
|
13
|
+
fontsStyles,
|
16
14
|
];
|
17
|
-
|
15
|
+
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 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
|
-
|
2
|
-
Object.
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
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
|
39
|
+
class ThemeProvider extends Provider {
|
34
40
|
constructor() {
|
35
41
|
super({
|
36
|
-
context:
|
37
|
-
initialValue: new
|
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 =
|
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
|
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 = [...
|
91
|
-
|
92
|
-
|
93
|
-
|
96
|
+
ThemeProvider.styles = [...Provider.styles, ...styles];
|
97
|
+
__decorate([
|
98
|
+
state(),
|
99
|
+
__metadata("design:type", String)
|
94
100
|
], ThemeProvider.prototype, "currentThemeClass", void 0);
|
95
|
-
|
96
|
-
|
97
|
-
|
101
|
+
__decorate([
|
102
|
+
property({ type: String }),
|
103
|
+
__metadata("design:type", String)
|
98
104
|
], ThemeProvider.prototype, "themeclass", void 0);
|
99
|
-
|
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
|
-
|
7
|
-
const TAG_NAME =
|
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
|
-
|
7
|
+
export { DEFAULTS, TAG_NAME };
|
@@ -1,7 +1,5 @@
|
|
1
|
-
|
2
|
-
|
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 =
|
13
|
-
|
10
|
+
ThemeProviderContext.context = createContext(TAG_NAME);
|
11
|
+
export default ThemeProviderContext;
|
@@ -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
|
--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
|
-
|
16
|
+
export default [styles];
|
package/dist/index.js
CHANGED
@@ -1,16 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
-
|
2
|
-
|
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
|
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 = [
|
54
|
-
|
50
|
+
Component.styles = [styles];
|
51
|
+
export default Component;
|
@@ -1,2 +1 @@
|
|
1
|
-
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
1
|
+
export {};
|
@@ -1,5 +1,2 @@
|
|
1
|
-
|
2
|
-
|
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;
|
package/dist/models/index.js
CHANGED
@@ -1,8 +1,3 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
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
|
-
|
2
|
-
|
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;
|