@vaadin/vaadin-themable-mixin 25.0.0-alpha1 → 25.0.0-alpha3
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/css-injection-mixin.js +81 -0
- package/package.json +6 -5
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { CSSInjector } from './src/css-injector.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @type {Set<string>}
|
|
10
|
+
*/
|
|
11
|
+
const registeredProperties = new Set();
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Find enclosing root for given element to gather style rules from.
|
|
15
|
+
*
|
|
16
|
+
* @param {HTMLElement} element
|
|
17
|
+
* @return {DocumentOrShadowRoot}
|
|
18
|
+
*/
|
|
19
|
+
function findRoot(element) {
|
|
20
|
+
const root = element.getRootNode();
|
|
21
|
+
|
|
22
|
+
if (root.host && root.host.constructor.version) {
|
|
23
|
+
return findRoot(root.host);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return root;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Mixin for internal use only. Do not use it in custom components.
|
|
31
|
+
*
|
|
32
|
+
* @polymerMixin
|
|
33
|
+
*/
|
|
34
|
+
export const CSSInjectionMixin = (superClass) =>
|
|
35
|
+
class CSSInjectionMixinClass extends superClass {
|
|
36
|
+
static finalize() {
|
|
37
|
+
super.finalize();
|
|
38
|
+
|
|
39
|
+
const propName = this.cssInjectPropName;
|
|
40
|
+
|
|
41
|
+
// Prevent registering same property twice when a class extends
|
|
42
|
+
// another class using this mixin, since `finalize()` is called
|
|
43
|
+
// by LitElement for all superclasses in the prototype chain.
|
|
44
|
+
if (this.is && !registeredProperties.has(propName)) {
|
|
45
|
+
registeredProperties.add(propName);
|
|
46
|
+
|
|
47
|
+
// Initialize custom property for this class with 0 as default
|
|
48
|
+
// so that changing it to 1 would inject styles to instances
|
|
49
|
+
// Use `inherits: true` so that property defined on `<html>`
|
|
50
|
+
// would apply to components instances within shadow roots
|
|
51
|
+
CSS.registerProperty({
|
|
52
|
+
name: propName,
|
|
53
|
+
syntax: '<number>',
|
|
54
|
+
inherits: true,
|
|
55
|
+
initialValue: '0',
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
static get cssInjectPropName() {
|
|
61
|
+
return `--${this.is}-css-inject`;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/** @protected */
|
|
65
|
+
connectedCallback() {
|
|
66
|
+
super.connectedCallback();
|
|
67
|
+
|
|
68
|
+
const root = findRoot(this);
|
|
69
|
+
root.__cssInjector ||= new CSSInjector(root);
|
|
70
|
+
this.__cssInjector = root.__cssInjector;
|
|
71
|
+
this.__cssInjector.componentConnected(this);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/** @protected */
|
|
75
|
+
disconnectedCallback() {
|
|
76
|
+
super.disconnectedCallback();
|
|
77
|
+
|
|
78
|
+
this.__cssInjector.componentDisconnected(this);
|
|
79
|
+
this.__cssInjector = undefined;
|
|
80
|
+
}
|
|
81
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/vaadin-themable-mixin",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
24
|
"*.d.ts",
|
|
25
|
+
"css-injection-mixin.js",
|
|
25
26
|
"register-styles.js",
|
|
26
27
|
"vaadin-*.js"
|
|
27
28
|
],
|
|
@@ -37,10 +38,10 @@
|
|
|
37
38
|
},
|
|
38
39
|
"devDependencies": {
|
|
39
40
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
41
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
42
|
-
"@vaadin/testing-helpers": "^
|
|
41
|
+
"@vaadin/chai-plugins": "25.0.0-alpha3",
|
|
42
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha3",
|
|
43
|
+
"@vaadin/testing-helpers": "^2.0.0",
|
|
43
44
|
"sinon": "^18.0.0"
|
|
44
45
|
},
|
|
45
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
|
|
46
47
|
}
|