@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,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];
|