@spectrum-web-components/theme 0.14.9 → 0.14.10-overlay-warning.19
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/README.md +56 -28
- package/package.json +4 -4
- package/src/Theme.dev.js +29 -1
- package/src/Theme.dev.js.map +1 -1
- package/src/Theme.js +1 -1
- package/src/Theme.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
## Description
|
|
2
2
|
|
|
3
|
-
`sp-theme`
|
|
4
|
-
|
|
5
|
-
When leveraging an `sp-theme` element, it will assume the role of managing the content direction applied to elements in its DOM scope from the `document`. By default, an `sp-theme` element will resolve its initial content direction from value of its `dir` attribute or to be e the same as its containing `sp-theme` parent or the `document`. Subsequent customization of content direction for that content will need to happen on the `sp-theme` element to be appropriately tracked by elements in that scope. This means that each part of your document scoped by an `sp-theme` element can specify individual content directions and that decedent `sp-theme` elements can override the content direction applied by ancestor elements.
|
|
3
|
+
`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different scales (`medium` and `large`) to support desktop & mobile UI.
|
|
6
4
|
|
|
7
5
|
### Usage
|
|
8
6
|
|
|
@@ -13,31 +11,30 @@ When leveraging an `sp-theme` element, it will assume the role of managing the c
|
|
|
13
11
|
yarn add @spectrum-web-components/theme
|
|
14
12
|
```
|
|
15
13
|
|
|
16
|
-
|
|
14
|
+
#### Quick start
|
|
17
15
|
|
|
18
16
|
```
|
|
19
17
|
import '@spectrum-web-components/theme/sp-theme.js';
|
|
18
|
+
import '@spectrum-web-components/theme/src/themes.js';
|
|
20
19
|
```
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
The above import statements do two things: the first will get you started using the `<sp-theme>` wrapper element, and the second includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package.
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
import { Theme } from '@spectrum-web-components/theme';
|
|
26
|
-
```
|
|
23
|
+
Below are more ways to import the different scale and color options individually, in case you didn't want to import all of them as we did above. You'll use these statements in combination with the side effectful registration import statement `import '@spectrum-web-components/theme/sp-theme.js'`.
|
|
27
24
|
|
|
28
|
-
The various Classic themes can be imported en masse:
|
|
25
|
+
The various Classic themes can be imported en masse, as in the example above:
|
|
29
26
|
|
|
30
27
|
```
|
|
31
28
|
import '@spectrum-web-components/theme/src/themes.js';
|
|
32
29
|
```
|
|
33
30
|
|
|
34
|
-
The various Express themes can be imported en masse:
|
|
31
|
+
The various Spectrum Express themes can also be imported en masse:
|
|
35
32
|
|
|
36
33
|
```
|
|
37
34
|
import '@spectrum-web-components/theme/src/express/themes.js';
|
|
38
35
|
```
|
|
39
36
|
|
|
40
|
-
Or
|
|
37
|
+
Or you can import the themes and scales individually:
|
|
41
38
|
|
|
42
39
|
```
|
|
43
40
|
import '@spectrum-web-components/theme/theme-darkest.js';
|
|
@@ -54,9 +51,49 @@ import '@spectrum-web-components/theme/express/scale-medium.js';
|
|
|
54
51
|
import '@spectrum-web-components/theme/express/scale-large.js';
|
|
55
52
|
```
|
|
56
53
|
|
|
54
|
+
When looking to leverage the `Theme` base class as a type and/or for extension purposes, do so via:
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
import { Theme } from '@spectrum-web-components/theme';
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## What it's doing
|
|
61
|
+
|
|
62
|
+
Visually, all Spectrum Web Components are an expression of the design tokens specified by Spectrum, Adobe's design system. On the web, these tokens are made available as CSS Custom Properties. Using `sp-theme` as a parent element for your components ensures that those CSS Custom Properties can be leveraged by the elements within your application. This ensures consistent delivery of not only the color and scale you've specified in your particular instance, but for _all_ the other color, scale, and content direction specifications across Spectrum.
|
|
63
|
+
|
|
64
|
+
Additionally, the `sp-theme` element manages the content direction applied to the elements in its DOM scope. By default, an `sp-theme` element resolves its initial content direction from the value specified by its first `sp-theme` or `document` ancestor; otherwise, it uses the value `dir="ltr"` if a content direction isn't present in those elements. When a value for `dir` is manually supplied to `sp-theme`, the default value is overridden. In all cases, though, `sp-theme` manages the `dir` value of its `SpectrumElement` descendents, unless another `sp-theme` element is placed into its scope and overrides that management.
|
|
65
|
+
|
|
66
|
+
In the example below, notice the usage of `scale="medium"` and `color="lightest"` to outline the scale and color applied to this theme context. You can use the following code sample to get started and see how `sp-theme` works:
|
|
67
|
+
|
|
68
|
+
<div style="--demo-example-padding-bottom: 0">
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<sp-theme
|
|
72
|
+
scale="medium"
|
|
73
|
+
color="lightest"
|
|
74
|
+
style="
|
|
75
|
+
background: var(--spectrum-global-color-gray-75);
|
|
76
|
+
padding: var(--spectrum-global-dimension-size-400);
|
|
77
|
+
display: block;
|
|
78
|
+
margin:
|
|
79
|
+
calc(-1 * var(--spectrum-global-dimension-size-400))
|
|
80
|
+
calc(-1 * var(--spectrum-global-dimension-size-500))
|
|
81
|
+
0;
|
|
82
|
+
"
|
|
83
|
+
>
|
|
84
|
+
<!-- Insert content requiring theme application here. -->
|
|
85
|
+
<sp-button onclick="alert('I was clicked');">Click me!</sp-button>
|
|
86
|
+
<!-- End content requiring theme application. -->
|
|
87
|
+
</sp-theme>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
When you're ready to look into more advanced usage of the components and themes in your application, there are vanilla CSS implementations of these tokens available in the `@spectrum-web-components/styles` package.
|
|
93
|
+
|
|
57
94
|
## Example
|
|
58
95
|
|
|
59
|
-
An `<sp-theme>` element expects a value for each of its `
|
|
96
|
+
An `<sp-theme>` element expects a value for each of its `color` and `scale` attributes to be provided on the element. While not required, you can also use the `theme` attribute to specify whether the theme you're using is Spectrum Classic (the default) or Spectrum Express.
|
|
60
97
|
|
|
61
98
|
```html
|
|
62
99
|
<sp-theme
|
|
@@ -71,18 +108,9 @@ An `<sp-theme>` element expects a value for each of its `theme`, `color`, and `s
|
|
|
71
108
|
</sp-theme>
|
|
72
109
|
```
|
|
73
110
|
|
|
74
|
-
## Quick start
|
|
75
|
-
|
|
76
|
-
```
|
|
77
|
-
import '@spectrum-web-components/theme/sp-theme.js';
|
|
78
|
-
import '@spectrum-web-components/theme/src/themes.js';
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
The above import will get you started using the `<sp-theme>` wrapper element, and includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`). Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empower you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See "Advanced usage" below for instructions on tuning the performance of an application that leverages this package.
|
|
82
|
-
|
|
83
111
|
## Advanced usage
|
|
84
112
|
|
|
85
|
-
Once you've moved beyond the prototype
|
|
113
|
+
Once you've moved beyond the prototype phase of an application, it is likely that you will only use one combination of `color` and `scale` in your application, and even if not, you'll likely benefit from lazily loading the variants you don't leverage by default. For single combination applications, or to power a _default_ theme, the following imports can be used to ensure only the code your application requires is loaded:
|
|
86
114
|
|
|
87
115
|
### Classic
|
|
88
116
|
|
|
@@ -120,7 +148,7 @@ import '@spectrum-web-components/theme/express/scale-medium.js';
|
|
|
120
148
|
import '@spectrum-web-components/theme/sp-theme.js';
|
|
121
149
|
```
|
|
122
150
|
|
|
123
|
-
When subsequent theme variants are needed you can ensure those are lazily loaded by leveraging dynamic imports via something like
|
|
151
|
+
When subsequent theme variants are needed, you can ensure those are lazily loaded by leveraging dynamic imports via something like:
|
|
124
152
|
|
|
125
153
|
```js
|
|
126
154
|
const themeElement = document.querySelector('sp-theme');
|
|
@@ -138,11 +166,7 @@ const updateTheme = async (color, scale) => {
|
|
|
138
166
|
updateTheme('light', 'medium');
|
|
139
167
|
```
|
|
140
168
|
|
|
141
|
-
When bundling your application, be sure to consult the documentation of your bundler for the correct way to ensure proper packaging of the
|
|
142
|
-
|
|
143
|
-
### Language Context
|
|
144
|
-
|
|
145
|
-
The `<sp-theme>` element provides a language context for its descendents in the DOM. Descendents can resolve this context by dispatching a `sp-language-context` DOM event and supplying a `callback(lang: string) => void` method in the `detail` entry of the Custom Event. These callbacks will be reactively envoked when the `lang` attribute on the `<sp-theme>` element is updated. In this way you can control the resolved language in [`<sp-number-field>`](../components/number-field), [`<sp-slider>`](./components/slider), and more elements in one centralized place.
|
|
169
|
+
When bundling your application, be sure to consult the documentation of your bundler for the correct way to ensure proper packaging of the programatic dependency graph that this will create.
|
|
146
170
|
|
|
147
171
|
## Light theme
|
|
148
172
|
|
|
@@ -295,3 +319,7 @@ previewing or editing content that will be displayed in a light theme with a rig
|
|
|
295
319
|
</div>
|
|
296
320
|
</sp-theme>
|
|
297
321
|
```
|
|
322
|
+
|
|
323
|
+
## Language Context
|
|
324
|
+
|
|
325
|
+
The `<sp-theme>` element provides a language context for its descendents in the DOM. Descendents can resolve this context by dispatching an `sp-language-context` DOM event and supplying a `callback(lang: string) => void` method in the `detail` entry of the Custom Event. These callbacks will be reactively envoked when the `lang` attribute on the `<sp-theme>` element is updated. This way, you can control the resolved language in [`<sp-number-field>`](../components/number-field), [`<sp-slider>`](./components/slider), and other elements in one centralized place.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/theme",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.10-overlay-warning.19+0c0cf0e30",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -133,8 +133,8 @@
|
|
|
133
133
|
"lit-html"
|
|
134
134
|
],
|
|
135
135
|
"dependencies": {
|
|
136
|
-
"@spectrum-web-components/base": "^0.7.
|
|
137
|
-
"@spectrum-web-components/styles": "^0.22.
|
|
136
|
+
"@spectrum-web-components/base": "^0.7.4-overlay-warning.19+0c0cf0e30",
|
|
137
|
+
"@spectrum-web-components/styles": "^0.22.2-overlay-warning.19+0c0cf0e30"
|
|
138
138
|
},
|
|
139
139
|
"types": "./src/index.d.ts",
|
|
140
140
|
"customElements": "custom-elements.json",
|
|
@@ -150,5 +150,5 @@
|
|
|
150
150
|
"./src/express/core.js",
|
|
151
151
|
"./src/express/themes.js"
|
|
152
152
|
],
|
|
153
|
-
"gitHead": "
|
|
153
|
+
"gitHead": "0c0cf0e307adb5e67526edb57de4f51ddfedefe1"
|
|
154
154
|
}
|
package/src/Theme.dev.js
CHANGED
|
@@ -51,6 +51,11 @@ const _Theme = class extends HTMLElement {
|
|
|
51
51
|
el.setAttribute("dir", targetDir);
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* Reading direction of the content scoped to this `sp-theme` element.
|
|
56
|
+
* @type {"ltr" | "rtl" | ""}
|
|
57
|
+
* @attr
|
|
58
|
+
*/
|
|
54
59
|
get dir() {
|
|
55
60
|
return this._dir;
|
|
56
61
|
}
|
|
@@ -78,6 +83,13 @@ const _Theme = class extends HTMLElement {
|
|
|
78
83
|
this.shouldAdoptStyles();
|
|
79
84
|
}
|
|
80
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* The Spectrum theme that is applied to the content scoped to this `sp-theme` element.
|
|
88
|
+
*
|
|
89
|
+
* A value is requried.
|
|
90
|
+
* @type {"spectrum" | "express" | ""}
|
|
91
|
+
* @attr
|
|
92
|
+
*/
|
|
81
93
|
get theme() {
|
|
82
94
|
const themeFragments = _Theme.themeFragmentsByKind.get("theme");
|
|
83
95
|
const { name } = themeFragments && themeFragments.get("default") || {};
|
|
@@ -97,6 +109,13 @@ const _Theme = class extends HTMLElement {
|
|
|
97
109
|
this.removeAttribute("theme");
|
|
98
110
|
}
|
|
99
111
|
}
|
|
112
|
+
/**
|
|
113
|
+
* The Spectrum color stops to apply to content scoped by this `sp-theme` element.
|
|
114
|
+
*
|
|
115
|
+
* A value is requried.
|
|
116
|
+
* @type {"lightest" | "light" | "dark" | "darkest" | ""}
|
|
117
|
+
* @attr
|
|
118
|
+
*/
|
|
100
119
|
get color() {
|
|
101
120
|
const themeFragments = _Theme.themeFragmentsByKind.get("color");
|
|
102
121
|
const { name } = themeFragments && themeFragments.get("default") || {};
|
|
@@ -116,6 +135,13 @@ const _Theme = class extends HTMLElement {
|
|
|
116
135
|
this.removeAttribute("color");
|
|
117
136
|
}
|
|
118
137
|
}
|
|
138
|
+
/**
|
|
139
|
+
* The Spectrum platform scale to apply to content scoped by this `sp-theme` element.
|
|
140
|
+
*
|
|
141
|
+
* A value is requried.
|
|
142
|
+
* @type {"medium" | "large" | ""}
|
|
143
|
+
* @attr
|
|
144
|
+
*/
|
|
119
145
|
get scale() {
|
|
120
146
|
const themeFragments = _Theme.themeFragmentsByKind.get("scale");
|
|
121
147
|
const { name } = themeFragments && themeFragments.get("default") || {};
|
|
@@ -232,7 +258,9 @@ const _Theme = class extends HTMLElement {
|
|
|
232
258
|
if (!this.hasAttribute("dir")) {
|
|
233
259
|
let dirParent = this.assignedSlot || this.parentNode;
|
|
234
260
|
while (dirParent !== document.documentElement && !(dirParent instanceof _Theme)) {
|
|
235
|
-
dirParent = dirParent.assignedSlot ||
|
|
261
|
+
dirParent = dirParent.assignedSlot || // step into the shadow DOM of the parent of a slotted node
|
|
262
|
+
dirParent.parentNode || // DOM Element detected
|
|
263
|
+
dirParent.host;
|
|
236
264
|
}
|
|
237
265
|
this.dir = dirParent.dir === "rtl" ? dirParent.dir : "ltr";
|
|
238
266
|
}
|
package/src/Theme.dev.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Theme.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResult,\n CSSResultGroup,\n supportsAdoptingStyleSheets,\n} from '@spectrum-web-components/base';\n\ndeclare global {\n interface Window {\n ShadyCSS: {\n nativeShadow: boolean;\n prepareTemplate(\n template: HTMLTemplateElement,\n elementName: string,\n typeExtension?: string\n ): void;\n styleElement(host: HTMLElement): void;\n ScopingShim: {\n prepareAdoptedCssText(\n cssTextArray: string[],\n elementName: string\n ): void;\n };\n };\n }\n}\n\ntype ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {\n adoptedStyleSheets?: CSSStyleSheet[];\n};\n\ntype FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';\ntype SettableFragmentTypes = 'color' | 'scale' | 'theme';\ntype FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;\nexport type ThemeFragmentMap = Map<FragmentType, FragmentMap>;\nexport type Color =\n | 'light'\n | 'lightest'\n | 'dark'\n | 'darkest'\n | 'light-express'\n | 'lightest-express'\n | 'dark-express'\n | 'darkest-express';\nexport type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';\nexport type ThemeVariant = 'spectrum' | 'express';\nconst ThemeVariantValues = ['spectrum', 'express'];\nconst ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];\nconst ColorValues = [\n 'light',\n 'lightest',\n 'dark',\n 'darkest',\n 'light-express',\n 'lightest-express',\n 'dark-express',\n 'darkest-express',\n];\ntype FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';\n\nexport interface ThemeData {\n color?: Color;\n scale?: Scale;\n lang?: string;\n theme?: ThemeVariant;\n}\n\ntype ThemeKindProvider = {\n [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';\n};\n\nexport interface ProvideLang {\n callback: (lang: string, unsubscribe: () => void) => void;\n}\n\n/**\n * @element sp-theme\n * @attr {string} [lang=\"\"] - The language of the content scoped to this `sp-theme` element, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang\" target=\"_blank\">MDN reference</a>.\n *\n * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration\n */\nexport class Theme extends HTMLElement implements ThemeKindProvider {\n private static themeFragmentsByKind: ThemeFragmentMap = new Map();\n private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);\n private static templateElement?: HTMLTemplateElement;\n private static instances: Set<Theme> = new Set();\n\n static get observedAttributes(): string[] {\n return ['color', 'scale', 'theme', 'lang', 'dir'];\n }\n\n _dir: 'ltr' | 'rtl' | '' = '';\n\n override set dir(dir: 'ltr' | 'rtl' | '') {\n if (dir === this.dir) return;\n this.setAttribute('dir', dir);\n this._dir = dir;\n const targetDir = dir === 'rtl' ? dir : 'ltr';\n this.trackedChildren.forEach((el) => {\n el.setAttribute('dir', targetDir);\n });\n }\n\n /**\n * Reading direction of the content scoped to this `sp-theme` element.\n * @type {\"ltr\" | \"rtl\" | \"\"}\n * @attr\n */\n override get dir(): 'ltr' | 'rtl' | '' {\n return this._dir;\n }\n\n protected attributeChangedCallback(\n attrName: SettableFragmentTypes | 'lang' | 'dir',\n old: string | null,\n value: string | null\n ): void {\n if (old === value) {\n return;\n }\n if (attrName === 'color') {\n this.color = value as Color;\n } else if (attrName === 'scale') {\n this.scale = value as Scale;\n } else if (attrName === 'lang' && !!value) {\n this.lang = value;\n this._provideContext();\n } else if (attrName === 'theme') {\n this.theme = value as ThemeVariant;\n } else if (attrName === 'dir') {\n this.dir = value as 'ltr' | 'rtl' | '';\n }\n }\n\n private requestUpdate(): void {\n if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {\n window.ShadyCSS.styleElement(this);\n } else {\n this.shouldAdoptStyles();\n }\n }\n\n public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n private _theme: ThemeVariant | '' = 'spectrum';\n\n /**\n * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n *\n * A value is requried.\n * @type {\"spectrum\" | \"express\" | \"\"}\n * @attr\n */\n get theme(): ThemeVariant | '' {\n const themeFragments = Theme.themeFragmentsByKind.get('theme');\n const { name } =\n (themeFragments && themeFragments.get('default')) || {};\n return this._theme || (name as ThemeVariant) || '';\n }\n\n set theme(newValue: ThemeVariant | '') {\n if (newValue === this._theme) return;\n const theme =\n !!newValue && ThemeVariantValues.includes(newValue)\n ? newValue\n : this.theme;\n if (theme !== this._theme) {\n this._theme = theme;\n this.requestUpdate();\n }\n if (theme) {\n this.setAttribute('theme', theme);\n } else {\n this.removeAttribute('theme');\n }\n }\n\n private _color: Color | '' = '';\n\n /**\n * The Spectrum color stops to apply to content scoped by this `sp-theme` element.\n *\n * A value is requried.\n * @type {\"lightest\" | \"light\" | \"dark\" | \"darkest\" | \"\"}\n * @attr\n */\n get color(): Color | '' {\n const themeFragments = Theme.themeFragmentsByKind.get('color');\n const { name } =\n (themeFragments && themeFragments.get('default')) || {};\n return this._color || (name as Color) || '';\n }\n\n set color(newValue: Color | '') {\n if (newValue === this._color) return;\n const color =\n !!newValue && ColorValues.includes(newValue)\n ? newValue\n : this.color;\n if (color !== this._color) {\n this._color = color;\n this.requestUpdate();\n }\n if (color) {\n this.setAttribute('color', color);\n } else {\n this.removeAttribute('color');\n }\n }\n\n private _scale: Scale | '' = '';\n\n /**\n * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.\n *\n * A value is requried.\n * @type {\"medium\" | \"large\" | \"\"}\n * @attr\n */\n get scale(): Scale | '' {\n const themeFragments = Theme.themeFragmentsByKind.get('scale');\n const { name } =\n (themeFragments && themeFragments.get('default')) || {};\n return this._scale || (name as Scale) || '';\n }\n\n set scale(newValue: Scale | '') {\n if (newValue === this._scale) return;\n const scale =\n !!newValue && ScaleValues.includes(newValue)\n ? newValue\n : this.scale;\n if (scale !== this._scale) {\n this._scale = scale;\n this.requestUpdate();\n }\n if (scale) {\n this.setAttribute('scale', scale);\n } else {\n this.removeAttribute('scale');\n }\n }\n\n private get styles(): CSSResultGroup[] {\n const themeKinds: FragmentType[] = [\n ...Theme.themeFragmentsByKind.keys(),\n ];\n const getStyle = (\n fragments: FragmentMap,\n name: FragmentName,\n kind?: FragmentType\n ): CSSResultGroup | undefined => {\n const currentStyles =\n kind && kind !== 'theme' && this.theme === 'express'\n ? fragments.get(`${name}-express`)\n : fragments.get(name);\n // theme=\"spectrum\" is available by default and doesn't need to be applied.\n const isAppliedFragment =\n name === 'spectrum' || !kind || this.hasAttribute(kind);\n if (currentStyles && isAppliedFragment) {\n return currentStyles.styles;\n }\n return;\n };\n const styles = themeKinds.reduce((acc, kind) => {\n const kindFragments = Theme.themeFragmentsByKind.get(\n kind\n ) as FragmentMap;\n let style: CSSResultGroup | undefined;\n if (kind === 'app' || kind === 'core') {\n style = getStyle(kindFragments, kind);\n } else {\n const { [kind]: name } = this;\n style = getStyle(kindFragments, <FragmentName>name, kind);\n }\n if (style) {\n acc.push(style);\n }\n return acc;\n }, [] as CSSResultGroup[]);\n if (window.__swc.DEBUG) {\n const issues: string[] = [];\n const checkForAttribute = (\n name: FragmentType,\n resolvedValue?: string,\n actualValue?: string\n ): void => {\n const themeModifier =\n this.theme && this.theme !== 'spectrum'\n ? `-${this.theme}`\n : '';\n if (!resolvedValue) {\n issues.push(\n `You have not explicitly set the \"${name}\" attribute and there is no default value on which to fallback.`\n );\n } else if (!actualValue) {\n issues.push(\n `You have not explicitly set the \"${name}\" attribute, the default value (\"${resolvedValue}\") is being used as a fallback.`\n );\n } else if (\n !Theme.themeFragmentsByKind\n .get(name)\n ?.get(\n resolvedValue +\n (name === 'theme' ? '' : themeModifier)\n )\n ) {\n issues.push(\n `You have set \"${name}='${resolvedValue}'\" but the associated theme fragment has not been loaded.`\n );\n }\n };\n checkForAttribute('theme', this.theme, this._theme);\n checkForAttribute('color', this.color, this._color);\n checkForAttribute('scale', this.scale, this._scale);\n if (issues.length) {\n window.__swc.warn(\n this,\n 'You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:',\n 'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',\n {\n issues,\n }\n );\n }\n }\n return [...styles];\n }\n\n private static get template(): HTMLTemplateElement {\n if (!this.templateElement) {\n this.templateElement = document.createElement('template');\n this.templateElement.innerHTML = '<slot></slot>';\n }\n return this.templateElement;\n }\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const node = document.importNode(Theme.template.content, true);\n this.shadowRoot.appendChild(node);\n this.shouldAdoptStyles();\n this.addEventListener(\n 'sp-query-theme',\n this.onQueryTheme as EventListener\n );\n this.addEventListener(\n 'sp-language-context',\n this._handleContextPresence as EventListener\n );\n this.updateComplete = this.__createDeferredPromise();\n }\n\n public updateComplete!: Promise<boolean>;\n private __resolve!: (compelted: boolean) => void;\n\n private __createDeferredPromise(): Promise<boolean> {\n return new Promise((resolve) => {\n this.__resolve = resolve;\n });\n }\n\n private onQueryTheme(event: CustomEvent<ThemeData>): void {\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n const { detail: theme } = event;\n theme.color = this.color || undefined;\n theme.scale = this.scale || undefined;\n theme.lang =\n this.lang || document.documentElement.lang || navigator.language;\n theme.theme = this.theme || undefined;\n }\n\n protected connectedCallback(): void {\n this.shouldAdoptStyles();\n // Note, first update/render handles styleElement so we only call this if\n // connected after first update.\n /* c8 ignore next 3 */\n if (window.ShadyCSS !== undefined) {\n window.ShadyCSS.styleElement(this);\n }\n // Add `this` to the instances array.\n Theme.instances.add(this);\n if (!this.hasAttribute('dir')) {\n let dirParent = ((this as HTMLElement).assignedSlot ||\n this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;\n while (\n dirParent !== document.documentElement &&\n !(dirParent instanceof Theme)\n ) {\n dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node\n dirParent.parentNode || // DOM Element detected\n (dirParent as ShadowRoot).host) as\n | HTMLElement\n | DocumentFragment\n | ShadowRoot;\n }\n this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';\n }\n }\n\n protected disconnectedCallback(): void {\n // Remove `this` to the instances array.\n Theme.instances.delete(this);\n }\n\n public startManagingContentDirection(el: HTMLElement): void {\n this.trackedChildren.add(el);\n }\n\n public stopManagingContentDirection(el: HTMLElement): void {\n this.trackedChildren.delete(el);\n }\n\n private trackedChildren: Set<HTMLElement> = new Set();\n\n private _updateRequested = false;\n\n private async shouldAdoptStyles(): Promise<void> {\n if (!this._updateRequested) {\n this.updateComplete = this.__createDeferredPromise();\n this._updateRequested = true;\n this._updateRequested = await false;\n this.adoptStyles();\n this.__resolve(true);\n }\n }\n\n protected adoptStyles(): void {\n const styles = this.styles; // No test coverage on Edge\n\n // There are three separate cases here based on Shadow DOM support.\n // (1) shadowRoot polyfilled: use ShadyCSS\n // (2) shadowRoot.adoptedStyleSheets available: use it.\n // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after\n // rendering\n /* c8 ignore next */ if (\n window.ShadyCSS !== undefined &&\n !window.ShadyCSS.nativeShadow &&\n window.ShadyCSS.ScopingShim\n ) {\n // For browsers using the shim, there seems to be one set of\n // processed styles per template, so it is hard to nest styles. So,\n // for those, we load in all style fragments and then switch using a\n // host selector (e.g. :host([color='dark']))\n const fragmentCSS: string[] = [];\n for (const [kind, fragments] of Theme.themeFragmentsByKind) {\n for (const [name, { styles }] of fragments) {\n if (name === 'default') continue;\n let cssText = (styles as CSSResult).cssText;\n if (!Theme.defaultFragments.has(name as FragmentName)) {\n cssText = cssText.replace(\n ':host',\n `:host([${kind}='${name}'])`\n );\n }\n fragmentCSS.push(cssText);\n }\n }\n window.ShadyCSS.ScopingShim.prepareAdoptedCssText(\n fragmentCSS,\n this.localName\n );\n window.ShadyCSS.prepareTemplate(Theme.template, this.localName);\n } else if (supportsAdoptingStyleSheets) {\n const styleSheets: CSSStyleSheet[] = [];\n for (const style of styles) {\n styleSheets.push(\n (style as CSSResult).styleSheet as CSSStyleSheet\n );\n }\n this.shadowRoot.adoptedStyleSheets = styleSheets;\n } else {\n const styleNodes = this.shadowRoot.querySelectorAll('style');\n styleNodes.forEach((element) => element.remove());\n styles.forEach((s) => {\n const style = document.createElement('style');\n style.textContent = (s as CSSResult).cssText;\n this.shadowRoot.appendChild(style);\n });\n }\n }\n\n static registerThemeFragment(\n name: FragmentName,\n kind: FragmentType,\n styles: CSSResultGroup\n ): void {\n const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();\n if (fragmentMap.size === 0) {\n Theme.themeFragmentsByKind.set(kind, fragmentMap);\n // we're adding our first fragment for this kind, set as default\n fragmentMap.set('default', { name, styles });\n Theme.defaultFragments.add(name);\n }\n fragmentMap.set(name, { name, styles });\n Theme.instances.forEach((instance) => instance.shouldAdoptStyles());\n }\n\n private _contextConsumers = new Map<\n HTMLElement,\n [ProvideLang['callback'], () => void]\n >();\n\n private _provideContext(): void {\n this._contextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.lang, unsubscribe)\n );\n }\n\n private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (this._contextConsumers.has(target)) {\n return;\n }\n this._contextConsumers.set(target, [\n event.detail.callback,\n () => this._contextConsumers.delete(target),\n ]);\n const [callback, unsubscribe] =\n this._contextConsumers.get(target) || [];\n if (callback && unsubscribe) {\n callback(\n this.lang ||\n document.documentElement.lang ||\n navigator.language,\n unsubscribe\n );\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styles"]
|
|
7
7
|
}
|
package/src/Theme.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{supportsAdoptingStyleSheets as h}from"@spectrum-web-components/base";const d=["spectrum","express"],m=["medium","large","medium-express","large-express"],c=["light","lightest","dark","darkest","light-express","lightest-express","dark-express","darkest-express"],r=class extends HTMLElement{constructor(){super();this._dir="";this._theme="spectrum";this._color="";this._scale="";this.trackedChildren=new Set;this._updateRequested=!1;this._contextConsumers=new Map;this.attachShadow({mode:"open"});const e=document.importNode(r.template.content,!0);this.shadowRoot.appendChild(e),this.shouldAdoptStyles(),this.addEventListener("sp-query-theme",this.onQueryTheme),this.addEventListener("sp-language-context",this._handleContextPresence),this.updateComplete=this.__createDeferredPromise()}static get observedAttributes(){return["color","scale","theme","lang","dir"]}set dir(e){if(e===this.dir)return;this.setAttribute("dir",e),this._dir=e;const t=e==="rtl"?e:"ltr";this.trackedChildren.forEach(s=>{s.setAttribute("dir",t)})}get dir(){return this._dir}attributeChangedCallback(e,t,s){t!==s&&(e==="color"?this.color=s:e==="scale"?this.scale=s:e==="lang"
|
|
1
|
+
"use strict";import{supportsAdoptingStyleSheets as h}from"@spectrum-web-components/base";const d=["spectrum","express"],m=["medium","large","medium-express","large-express"],c=["light","lightest","dark","darkest","light-express","lightest-express","dark-express","darkest-express"],r=class extends HTMLElement{constructor(){super();this._dir="";this._theme="spectrum";this._color="";this._scale="";this.trackedChildren=new Set;this._updateRequested=!1;this._contextConsumers=new Map;this.attachShadow({mode:"open"});const e=document.importNode(r.template.content,!0);this.shadowRoot.appendChild(e),this.shouldAdoptStyles(),this.addEventListener("sp-query-theme",this.onQueryTheme),this.addEventListener("sp-language-context",this._handleContextPresence),this.updateComplete=this.__createDeferredPromise()}static get observedAttributes(){return["color","scale","theme","lang","dir"]}set dir(e){if(e===this.dir)return;this.setAttribute("dir",e),this._dir=e;const t=e==="rtl"?e:"ltr";this.trackedChildren.forEach(s=>{s.setAttribute("dir",t)})}get dir(){return this._dir}attributeChangedCallback(e,t,s){t!==s&&(e==="color"?this.color=s:e==="scale"?this.scale=s:e==="lang"&&s?(this.lang=s,this._provideContext()):e==="theme"?this.theme=s:e==="dir"&&(this.dir=s))}requestUpdate(){window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow?window.ShadyCSS.styleElement(this):this.shouldAdoptStyles()}get theme(){const e=r.themeFragmentsByKind.get("theme"),{name:t}=e&&e.get("default")||{};return this._theme||t||""}set theme(e){if(e===this._theme)return;const t=e&&d.includes(e)?e:this.theme;t!==this._theme&&(this._theme=t,this.requestUpdate()),t?this.setAttribute("theme",t):this.removeAttribute("theme")}get color(){const e=r.themeFragmentsByKind.get("color"),{name:t}=e&&e.get("default")||{};return this._color||t||""}set color(e){if(e===this._color)return;const t=e&&c.includes(e)?e:this.color;t!==this._color&&(this._color=t,this.requestUpdate()),t?this.setAttribute("color",t):this.removeAttribute("color")}get scale(){const e=r.themeFragmentsByKind.get("scale"),{name:t}=e&&e.get("default")||{};return this._scale||t||""}set scale(e){if(e===this._scale)return;const t=e&&m.includes(e)?e:this.scale;t!==this._scale&&(this._scale=t,this.requestUpdate()),t?this.setAttribute("scale",t):this.removeAttribute("scale")}get styles(){const e=[...r.themeFragmentsByKind.keys()],t=(a,i,n)=>{const o=n&&n!=="theme"&&this.theme==="express"?a.get(`${i}-express`):a.get(i),l=i==="spectrum"||!n||this.hasAttribute(n);if(o&&l)return o.styles};return[...e.reduce((a,i)=>{const n=r.themeFragmentsByKind.get(i);let o;if(i==="app"||i==="core")o=t(n,i);else{const{[i]:l}=this;o=t(n,l,i)}return o&&a.push(o),a},[])]}static get template(){return this.templateElement||(this.templateElement=document.createElement("template"),this.templateElement.innerHTML="<slot></slot>"),this.templateElement}__createDeferredPromise(){return new Promise(e=>{this.__resolve=e})}onQueryTheme(e){if(e.defaultPrevented)return;e.preventDefault();const{detail:t}=e;t.color=this.color||void 0,t.scale=this.scale||void 0,t.lang=this.lang||document.documentElement.lang||navigator.language,t.theme=this.theme||void 0}connectedCallback(){if(this.shouldAdoptStyles(),window.ShadyCSS!==void 0&&window.ShadyCSS.styleElement(this),r.instances.add(this),!this.hasAttribute("dir")){let e=this.assignedSlot||this.parentNode;for(;e!==document.documentElement&&!(e instanceof r);)e=e.assignedSlot||e.parentNode||e.host;this.dir=e.dir==="rtl"?e.dir:"ltr"}}disconnectedCallback(){r.instances.delete(this)}startManagingContentDirection(e){this.trackedChildren.add(e)}stopManagingContentDirection(e){this.trackedChildren.delete(e)}async shouldAdoptStyles(){this._updateRequested||(this.updateComplete=this.__createDeferredPromise(),this._updateRequested=!0,this._updateRequested=await!1,this.adoptStyles(),this.__resolve(!0))}adoptStyles(){const e=this.styles;if(window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow&&window.ShadyCSS.ScopingShim){const t=[];for(const[s,a]of r.themeFragmentsByKind)for(const[i,{styles:n}]of a){if(i==="default")continue;let o=n.cssText;r.defaultFragments.has(i)||(o=o.replace(":host",`:host([${s}='${i}'])`)),t.push(o)}window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t,this.localName),window.ShadyCSS.prepareTemplate(r.template,this.localName)}else if(h){const t=[];for(const s of e)t.push(s.styleSheet);this.shadowRoot.adoptedStyleSheets=t}else this.shadowRoot.querySelectorAll("style").forEach(s=>s.remove()),e.forEach(s=>{const a=document.createElement("style");a.textContent=s.cssText,this.shadowRoot.appendChild(a)})}static registerThemeFragment(e,t,s){const a=r.themeFragmentsByKind.get(t)||new Map;a.size===0&&(r.themeFragmentsByKind.set(t,a),a.set("default",{name:e,styles:s}),r.defaultFragments.add(e)),a.set(e,{name:e,styles:s}),r.instances.forEach(i=>i.shouldAdoptStyles())}_provideContext(){this._contextConsumers.forEach(([e,t])=>e(this.lang,t))}_handleContextPresence(e){const t=e.composedPath()[0];if(this._contextConsumers.has(t))return;this._contextConsumers.set(t,[e.detail.callback,()=>this._contextConsumers.delete(t)]);const[s,a]=this._contextConsumers.get(t)||[];s&&a&&s(this.lang||document.documentElement.lang||navigator.language,a)}};export let Theme=r;Theme.themeFragmentsByKind=new Map,Theme.defaultFragments=new Set(["spectrum"]),Theme.instances=new Set;
|
|
2
2
|
//# sourceMappingURL=Theme.js.map
|
package/src/Theme.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Theme.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResult,\n CSSResultGroup,\n supportsAdoptingStyleSheets,\n} from '@spectrum-web-components/base';\n\ndeclare global {\n interface Window {\n ShadyCSS: {\n nativeShadow: boolean;\n prepareTemplate(\n template: HTMLTemplateElement,\n elementName: string,\n typeExtension?: string\n ): void;\n styleElement(host: HTMLElement): void;\n ScopingShim: {\n prepareAdoptedCssText(\n cssTextArray: string[],\n elementName: string\n ): void;\n };\n };\n }\n}\n\ntype ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {\n adoptedStyleSheets?: CSSStyleSheet[];\n};\n\ntype FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';\ntype SettableFragmentTypes = 'color' | 'scale' | 'theme';\ntype FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;\nexport type ThemeFragmentMap = Map<FragmentType, FragmentMap>;\nexport type Color =\n | 'light'\n | 'lightest'\n | 'dark'\n | 'darkest'\n | 'light-express'\n | 'lightest-express'\n | 'dark-express'\n | 'darkest-express';\nexport type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';\nexport type ThemeVariant = 'spectrum' | 'express';\nconst ThemeVariantValues = ['spectrum', 'express'];\nconst ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];\nconst ColorValues = [\n 'light',\n 'lightest',\n 'dark',\n 'darkest',\n 'light-express',\n 'lightest-express',\n 'dark-express',\n 'darkest-express',\n];\ntype FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';\n\nexport interface ThemeData {\n color?: Color;\n scale?: Scale;\n lang?: string;\n theme?: ThemeVariant;\n}\n\ntype ThemeKindProvider = {\n [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';\n};\n\nexport interface ProvideLang {\n callback: (lang: string, unsubscribe: () => void) => void;\n}\n\n/**\n * @element sp-theme\n * @attr {string} [lang=\"\"] - The language of the content scoped to this `sp-theme` element, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang\" target=\"_blank\">MDN reference</a>.\n *\n * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration\n */\nexport class Theme extends HTMLElement implements ThemeKindProvider {\n private static themeFragmentsByKind: ThemeFragmentMap = new Map();\n private static defaultFragments: Set<FragmentName> = new Set(['spectrum']);\n private static templateElement?: HTMLTemplateElement;\n private static instances: Set<Theme> = new Set();\n\n static get observedAttributes(): string[] {\n return ['color', 'scale', 'theme', 'lang', 'dir'];\n }\n\n _dir: 'ltr' | 'rtl' | '' = '';\n\n override set dir(dir: 'ltr' | 'rtl' | '') {\n if (dir === this.dir) return;\n this.setAttribute('dir', dir);\n this._dir = dir;\n const targetDir = dir === 'rtl' ? dir : 'ltr';\n this.trackedChildren.forEach((el) => {\n el.setAttribute('dir', targetDir);\n });\n }\n\n /**\n * Reading direction of the content scoped to this `sp-theme` element.\n * @type {\"ltr\" | \"rtl\" | \"\"}\n * @attr\n */\n override get dir(): 'ltr' | 'rtl' | '' {\n return this._dir;\n }\n\n protected attributeChangedCallback(\n attrName: SettableFragmentTypes | 'lang' | 'dir',\n old: string | null,\n value: string | null\n ): void {\n if (old === value) {\n return;\n }\n if (attrName === 'color') {\n this.color = value as Color;\n } else if (attrName === 'scale') {\n this.scale = value as Scale;\n } else if (attrName === 'lang' && !!value) {\n this.lang = value;\n this._provideContext();\n } else if (attrName === 'theme') {\n this.theme = value as ThemeVariant;\n } else if (attrName === 'dir') {\n this.dir = value as 'ltr' | 'rtl' | '';\n }\n }\n\n private requestUpdate(): void {\n if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {\n window.ShadyCSS.styleElement(this);\n } else {\n this.shouldAdoptStyles();\n }\n }\n\n public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;\n\n private _theme: ThemeVariant | '' = 'spectrum';\n\n /**\n * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n *\n * A value is requried.\n * @type {\"spectrum\" | \"express\" | \"\"}\n * @attr\n */\n get theme(): ThemeVariant | '' {\n const themeFragments = Theme.themeFragmentsByKind.get('theme');\n const { name } =\n (themeFragments && themeFragments.get('default')) || {};\n return this._theme || (name as ThemeVariant) || '';\n }\n\n set theme(newValue: ThemeVariant | '') {\n if (newValue === this._theme) return;\n const theme =\n !!newValue && ThemeVariantValues.includes(newValue)\n ? newValue\n : this.theme;\n if (theme !== this._theme) {\n this._theme = theme;\n this.requestUpdate();\n }\n if (theme) {\n this.setAttribute('theme', theme);\n } else {\n this.removeAttribute('theme');\n }\n }\n\n private _color: Color | '' = '';\n\n /**\n * The Spectrum color stops to apply to content scoped by this `sp-theme` element.\n *\n * A value is requried.\n * @type {\"lightest\" | \"light\" | \"dark\" | \"darkest\" | \"\"}\n * @attr\n */\n get color(): Color | '' {\n const themeFragments = Theme.themeFragmentsByKind.get('color');\n const { name } =\n (themeFragments && themeFragments.get('default')) || {};\n return this._color || (name as Color) || '';\n }\n\n set color(newValue: Color | '') {\n if (newValue === this._color) return;\n const color =\n !!newValue && ColorValues.includes(newValue)\n ? newValue\n : this.color;\n if (color !== this._color) {\n this._color = color;\n this.requestUpdate();\n }\n if (color) {\n this.setAttribute('color', color);\n } else {\n this.removeAttribute('color');\n }\n }\n\n private _scale: Scale | '' = '';\n\n /**\n * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.\n *\n * A value is requried.\n * @type {\"medium\" | \"large\" | \"\"}\n * @attr\n */\n get scale(): Scale | '' {\n const themeFragments = Theme.themeFragmentsByKind.get('scale');\n const { name } =\n (themeFragments && themeFragments.get('default')) || {};\n return this._scale || (name as Scale) || '';\n }\n\n set scale(newValue: Scale | '') {\n if (newValue === this._scale) return;\n const scale =\n !!newValue && ScaleValues.includes(newValue)\n ? newValue\n : this.scale;\n if (scale !== this._scale) {\n this._scale = scale;\n this.requestUpdate();\n }\n if (scale) {\n this.setAttribute('scale', scale);\n } else {\n this.removeAttribute('scale');\n }\n }\n\n private get styles(): CSSResultGroup[] {\n const themeKinds: FragmentType[] = [\n ...Theme.themeFragmentsByKind.keys(),\n ];\n const getStyle = (\n fragments: FragmentMap,\n name: FragmentName,\n kind?: FragmentType\n ): CSSResultGroup | undefined => {\n const currentStyles =\n kind && kind !== 'theme' && this.theme === 'express'\n ? fragments.get(`${name}-express`)\n : fragments.get(name);\n // theme=\"spectrum\" is available by default and doesn't need to be applied.\n const isAppliedFragment =\n name === 'spectrum' || !kind || this.hasAttribute(kind);\n if (currentStyles && isAppliedFragment) {\n return currentStyles.styles;\n }\n return;\n };\n const styles = themeKinds.reduce((acc, kind) => {\n const kindFragments = Theme.themeFragmentsByKind.get(\n kind\n ) as FragmentMap;\n let style: CSSResultGroup | undefined;\n if (kind === 'app' || kind === 'core') {\n style = getStyle(kindFragments, kind);\n } else {\n const { [kind]: name } = this;\n style = getStyle(kindFragments, <FragmentName>name, kind);\n }\n if (style) {\n acc.push(style);\n }\n return acc;\n }, [] as CSSResultGroup[]);\n if (window.__swc.DEBUG) {\n const issues: string[] = [];\n const checkForAttribute = (\n name: FragmentType,\n resolvedValue?: string,\n actualValue?: string\n ): void => {\n const themeModifier =\n this.theme && this.theme !== 'spectrum'\n ? `-${this.theme}`\n : '';\n if (!resolvedValue) {\n issues.push(\n `You have not explicitly set the \"${name}\" attribute and there is no default value on which to fallback.`\n );\n } else if (!actualValue) {\n issues.push(\n `You have not explicitly set the \"${name}\" attribute, the default value (\"${resolvedValue}\") is being used as a fallback.`\n );\n } else if (\n !Theme.themeFragmentsByKind\n .get(name)\n ?.get(\n resolvedValue +\n (name === 'theme' ? '' : themeModifier)\n )\n ) {\n issues.push(\n `You have set \"${name}='${resolvedValue}'\" but the associated theme fragment has not been loaded.`\n );\n }\n };\n checkForAttribute('theme', this.theme, this._theme);\n checkForAttribute('color', this.color, this._color);\n checkForAttribute('scale', this.scale, this._scale);\n if (issues.length) {\n window.__swc.warn(\n this,\n 'You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:',\n 'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',\n {\n issues,\n }\n );\n }\n }\n return [...styles];\n }\n\n private static get template(): HTMLTemplateElement {\n if (!this.templateElement) {\n this.templateElement = document.createElement('template');\n this.templateElement.innerHTML = '<slot></slot>';\n }\n return this.templateElement;\n }\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const node = document.importNode(Theme.template.content, true);\n this.shadowRoot.appendChild(node);\n this.shouldAdoptStyles();\n this.addEventListener(\n 'sp-query-theme',\n this.onQueryTheme as EventListener\n );\n this.addEventListener(\n 'sp-language-context',\n this._handleContextPresence as EventListener\n );\n this.updateComplete = this.__createDeferredPromise();\n }\n\n public updateComplete!: Promise<boolean>;\n private __resolve!: (compelted: boolean) => void;\n\n private __createDeferredPromise(): Promise<boolean> {\n return new Promise((resolve) => {\n this.__resolve = resolve;\n });\n }\n\n private onQueryTheme(event: CustomEvent<ThemeData>): void {\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n const { detail: theme } = event;\n theme.color = this.color || undefined;\n theme.scale = this.scale || undefined;\n theme.lang =\n this.lang || document.documentElement.lang || navigator.language;\n theme.theme = this.theme || undefined;\n }\n\n protected connectedCallback(): void {\n this.shouldAdoptStyles();\n // Note, first update/render handles styleElement so we only call this if\n // connected after first update.\n /* c8 ignore next 3 */\n if (window.ShadyCSS !== undefined) {\n window.ShadyCSS.styleElement(this);\n }\n // Add `this` to the instances array.\n Theme.instances.add(this);\n if (!this.hasAttribute('dir')) {\n let dirParent = ((this as HTMLElement).assignedSlot ||\n this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;\n while (\n dirParent !== document.documentElement &&\n !(dirParent instanceof Theme)\n ) {\n dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node\n dirParent.parentNode || // DOM Element detected\n (dirParent as ShadowRoot).host) as\n | HTMLElement\n | DocumentFragment\n | ShadowRoot;\n }\n this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';\n }\n }\n\n protected disconnectedCallback(): void {\n // Remove `this` to the instances array.\n Theme.instances.delete(this);\n }\n\n public startManagingContentDirection(el: HTMLElement): void {\n this.trackedChildren.add(el);\n }\n\n public stopManagingContentDirection(el: HTMLElement): void {\n this.trackedChildren.delete(el);\n }\n\n private trackedChildren: Set<HTMLElement> = new Set();\n\n private _updateRequested = false;\n\n private async shouldAdoptStyles(): Promise<void> {\n if (!this._updateRequested) {\n this.updateComplete = this.__createDeferredPromise();\n this._updateRequested = true;\n this._updateRequested = await false;\n this.adoptStyles();\n this.__resolve(true);\n }\n }\n\n protected adoptStyles(): void {\n const styles = this.styles; // No test coverage on Edge\n\n // There are three separate cases here based on Shadow DOM support.\n // (1) shadowRoot polyfilled: use ShadyCSS\n // (2) shadowRoot.adoptedStyleSheets available: use it.\n // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after\n // rendering\n /* c8 ignore next */ if (\n window.ShadyCSS !== undefined &&\n !window.ShadyCSS.nativeShadow &&\n window.ShadyCSS.ScopingShim\n ) {\n // For browsers using the shim, there seems to be one set of\n // processed styles per template, so it is hard to nest styles. So,\n // for those, we load in all style fragments and then switch using a\n // host selector (e.g. :host([color='dark']))\n const fragmentCSS: string[] = [];\n for (const [kind, fragments] of Theme.themeFragmentsByKind) {\n for (const [name, { styles }] of fragments) {\n if (name === 'default') continue;\n let cssText = (styles as CSSResult).cssText;\n if (!Theme.defaultFragments.has(name as FragmentName)) {\n cssText = cssText.replace(\n ':host',\n `:host([${kind}='${name}'])`\n );\n }\n fragmentCSS.push(cssText);\n }\n }\n window.ShadyCSS.ScopingShim.prepareAdoptedCssText(\n fragmentCSS,\n this.localName\n );\n window.ShadyCSS.prepareTemplate(Theme.template, this.localName);\n } else if (supportsAdoptingStyleSheets) {\n const styleSheets: CSSStyleSheet[] = [];\n for (const style of styles) {\n styleSheets.push(\n (style as CSSResult).styleSheet as CSSStyleSheet\n );\n }\n this.shadowRoot.adoptedStyleSheets = styleSheets;\n } else {\n const styleNodes = this.shadowRoot.querySelectorAll('style');\n styleNodes.forEach((element) => element.remove());\n styles.forEach((s) => {\n const style = document.createElement('style');\n style.textContent = (s as CSSResult).cssText;\n this.shadowRoot.appendChild(style);\n });\n }\n }\n\n static registerThemeFragment(\n name: FragmentName,\n kind: FragmentType,\n styles: CSSResultGroup\n ): void {\n const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();\n if (fragmentMap.size === 0) {\n Theme.themeFragmentsByKind.set(kind, fragmentMap);\n // we're adding our first fragment for this kind, set as default\n fragmentMap.set('default', { name, styles });\n Theme.defaultFragments.add(name);\n }\n fragmentMap.set(name, { name, styles });\n Theme.instances.forEach((instance) => instance.shouldAdoptStyles());\n }\n\n private _contextConsumers = new Map<\n HTMLElement,\n [ProvideLang['callback'], () => void]\n >();\n\n private _provideContext(): void {\n this._contextConsumers.forEach(([callback, unsubscribe]) =>\n callback(this.lang, unsubscribe)\n );\n }\n\n private _handleContextPresence(event: CustomEvent<ProvideLang>): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (this._contextConsumers.has(target)) {\n return;\n }\n this._contextConsumers.set(target, [\n event.detail.callback,\n () => this._contextConsumers.delete(target),\n ]);\n const [callback, unsubscribe] =\n this._contextConsumers.get(target) || [];\n if (callback && unsubscribe) {\n callback(\n this.lang ||\n document.documentElement.lang ||\n navigator.language,\n unsubscribe\n );\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "aAYA,OAGI,+BAAAA,MACG,gCAyCP,MAAMC,EAAqB,CAAC,WAAY,SAAS,EAC3CC,EAAc,CAAC,SAAU,QAAS,iBAAkB,eAAe,EACnEC,EAAc,CAChB,QACA,WACA,OACA,UACA,gBACA,mBACA,eACA,iBACJ,EAwBaC,EAAN,cAAoB,WAAyC,CAgQhE,aAAc,CACV,MAAM,EAvPV,UAA2B,GAqD3B,KAAQ,OAA4B,WAiCpC,KAAQ,OAAqB,GAiC7B,KAAQ,OAAqB,GA+M7B,KAAQ,gBAAoC,IAAI,IAEhD,KAAQ,iBAAmB,GAmF3B,KAAQ,kBAAoB,IAAI,IAnK5B,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,EAClC,MAAMC,EAAO,SAAS,WAAWD,EAAM,SAAS,QAAS,EAAI,EAC7D,KAAK,WAAW,YAAYC,CAAI,EAChC,KAAK,kBAAkB,EACvB,KAAK,iBACD,iBACA,KAAK,YACT,EACA,KAAK,iBACD,sBACA,KAAK,sBACT,EACA,KAAK,eAAiB,KAAK,wBAAwB,CACvD,CAzQA,WAAW,oBAA+B,CACtC,MAAO,CAAC,QAAS,QAAS,QAAS,OAAQ,KAAK,CACpD,CAIA,IAAa,IAAIC,EAAyB,CACtC,GAAIA,IAAQ,KAAK,IAAK,OACtB,KAAK,aAAa,MAAOA,CAAG,EAC5B,KAAK,KAAOA,EACZ,MAAMC,EAAYD,IAAQ,MAAQA,EAAM,MACxC,KAAK,gBAAgB,QAASE,GAAO,CACjCA,EAAG,aAAa,MAAOD,CAAS,CACpC,CAAC,CACL,CAOA,IAAa,KAA0B,CACnC,OAAO,KAAK,IAChB,CAEU,yBACNE,EACAC,EACAC,EACI,CACAD,IAAQC,IAGRF,IAAa,QACb,KAAK,MAAQE,EACNF,IAAa,QACpB,KAAK,MAAQE,EACNF,IAAa,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["supportsAdoptingStyleSheets", "ThemeVariantValues", "ScaleValues", "ColorValues", "_Theme", "node", "dir", "targetDir", "el", "attrName", "old", "value", "themeFragments", "name", "newValue", "theme", "color", "scale", "themeKinds", "getStyle", "fragments", "kind", "currentStyles", "isAppliedFragment", "acc", "kindFragments", "style", "resolve", "event", "dirParent", "styles", "fragmentCSS", "cssText", "styleSheets", "element", "fragmentMap", "instance", "callback", "unsubscribe", "target"]
|
|
7
7
|
}
|