@vaadin/vaadin-themable-mixin 24.0.0-alpha9 → 24.0.0-beta2
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/vaadin-themable-mixin",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@esm-bundle/chai": "^4.3.4",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/testing-helpers": "^0.
|
|
40
|
+
"@vaadin/testing-helpers": "^0.4.0",
|
|
41
41
|
"sinon": "^13.0.2"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
|
|
44
44
|
}
|
package/vaadin-themable-mixin.js
CHANGED
|
@@ -23,6 +23,40 @@ export { css, unsafeCSS };
|
|
|
23
23
|
*/
|
|
24
24
|
const themeRegistry = [];
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Check if the custom element type has themes applied.
|
|
28
|
+
* @param {Function} elementClass
|
|
29
|
+
* @returns {boolean}
|
|
30
|
+
*/
|
|
31
|
+
function classHasThemes(elementClass) {
|
|
32
|
+
return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Check if the custom element type has themes applied.
|
|
37
|
+
* @param {string} tagName
|
|
38
|
+
* @returns {boolean}
|
|
39
|
+
*/
|
|
40
|
+
function hasThemes(tagName) {
|
|
41
|
+
return classHasThemes(customElements.get(tagName));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Flattens the styles into a single array of styles.
|
|
46
|
+
* @param {CSSResultGroup} styles
|
|
47
|
+
* @param {CSSResult[]} result
|
|
48
|
+
* @returns {CSSResult[]}
|
|
49
|
+
*/
|
|
50
|
+
function flattenStyles(styles = []) {
|
|
51
|
+
return [styles].flat(Infinity).filter((style) => {
|
|
52
|
+
if (style instanceof CSSResult) {
|
|
53
|
+
return true;
|
|
54
|
+
}
|
|
55
|
+
console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
|
|
56
|
+
return false;
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
26
60
|
/**
|
|
27
61
|
* Registers CSS styles for a component type. Make sure to register the styles before
|
|
28
62
|
* the first instance of a component of the type is attached to DOM.
|
|
@@ -97,22 +131,6 @@ function getIncludePriority(moduleName = '') {
|
|
|
97
131
|
return includePriority;
|
|
98
132
|
}
|
|
99
133
|
|
|
100
|
-
/**
|
|
101
|
-
* Flattens the styles into a single array of styles.
|
|
102
|
-
* @param {CSSResultGroup} styles
|
|
103
|
-
* @param {CSSResult[]} result
|
|
104
|
-
* @returns {CSSResult[]}
|
|
105
|
-
*/
|
|
106
|
-
function flattenStyles(styles = []) {
|
|
107
|
-
return [styles].flat(Infinity).filter((style) => {
|
|
108
|
-
if (style instanceof CSSResult) {
|
|
109
|
-
return true;
|
|
110
|
-
}
|
|
111
|
-
console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
|
|
112
|
-
return false;
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
|
|
116
134
|
/**
|
|
117
135
|
* Gets an array of CSSResults matching the include property of the theme.
|
|
118
136
|
* @param {Theme} theme
|
|
@@ -173,24 +191,6 @@ function getThemes(tagName) {
|
|
|
173
191
|
return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
|
|
174
192
|
}
|
|
175
193
|
|
|
176
|
-
/**
|
|
177
|
-
* Check if the custom element type has themes applied.
|
|
178
|
-
* @param {string} tagName
|
|
179
|
-
* @returns {boolean}
|
|
180
|
-
*/
|
|
181
|
-
function hasThemes(tagName) {
|
|
182
|
-
return classHasThemes(customElements.get(tagName));
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
/**
|
|
186
|
-
* Check if the custom element type has themes applied.
|
|
187
|
-
* @param {Function} elementClass
|
|
188
|
-
* @returns {boolean}
|
|
189
|
-
*/
|
|
190
|
-
function classHasThemes(elementClass) {
|
|
191
|
-
return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
|
|
192
|
-
}
|
|
193
|
-
|
|
194
194
|
/**
|
|
195
195
|
* @polymerMixin
|
|
196
196
|
* @mixes ThemePropertyMixin
|
|
@@ -16,7 +16,7 @@ export declare class ThemePropertyMixinClass {
|
|
|
16
16
|
*
|
|
17
17
|
* Enables the component implementation to propagate the `theme`
|
|
18
18
|
* attribute value to the sub-components in Shadow DOM by binding
|
|
19
|
-
* the sub-component
|
|
19
|
+
* the sub-component's "theme" attribute to the `theme` property of
|
|
20
20
|
* the host.
|
|
21
21
|
*
|
|
22
22
|
* **NOTE:** Extending the mixin only provides the property for binding,
|
|
@@ -16,7 +16,7 @@ export const ThemePropertyMixin = (superClass) =>
|
|
|
16
16
|
*
|
|
17
17
|
* Enables the component implementation to propagate the `theme`
|
|
18
18
|
* attribute value to the sub-components in Shadow DOM by binding
|
|
19
|
-
* the sub-component
|
|
19
|
+
* the sub-component's "theme" attribute to the `theme` property of
|
|
20
20
|
* the host.
|
|
21
21
|
*
|
|
22
22
|
* **NOTE:** Extending the mixin only provides the property for binding,
|