@spectrum-web-components/story-decorator 0.34.0 → 0.35.0
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 +10 -10
- package/src/StoryDecorator.dev.js +3 -1
- package/src/StoryDecorator.dev.js.map +2 -2
- package/src/StoryDecorator.js +12 -12
- package/src/StoryDecorator.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/story-decorator",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -65,14 +65,14 @@
|
|
|
65
65
|
"lit-html"
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@spectrum-web-components/base": "^0.
|
|
69
|
-
"@spectrum-web-components/field-label": "^0.
|
|
70
|
-
"@spectrum-web-components/menu": "^0.
|
|
71
|
-
"@spectrum-web-components/overlay": "^0.
|
|
72
|
-
"@spectrum-web-components/picker": "^0.
|
|
73
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
74
|
-
"@spectrum-web-components/switch": "^0.
|
|
75
|
-
"@spectrum-web-components/theme": "^0.
|
|
68
|
+
"@spectrum-web-components/base": "^0.35.0",
|
|
69
|
+
"@spectrum-web-components/field-label": "^0.35.0",
|
|
70
|
+
"@spectrum-web-components/menu": "^0.35.0",
|
|
71
|
+
"@spectrum-web-components/overlay": "^0.35.0",
|
|
72
|
+
"@spectrum-web-components/picker": "^0.35.0",
|
|
73
|
+
"@spectrum-web-components/reactive-controllers": "^0.35.0",
|
|
74
|
+
"@spectrum-web-components/switch": "^0.35.0",
|
|
75
|
+
"@spectrum-web-components/theme": "^0.35.0"
|
|
76
76
|
},
|
|
77
77
|
"types": "./src/index.d.ts",
|
|
78
78
|
"customElements": "custom-elements.json",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"./**/*.dev.js",
|
|
82
82
|
"./sp-*.ts"
|
|
83
83
|
],
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
|
|
85
85
|
}
|
|
@@ -215,7 +215,9 @@ export class StoryDecorator extends SpectrumElement {
|
|
|
215
215
|
}
|
|
216
216
|
handleKeydown(event) {
|
|
217
217
|
const path = event.composedPath();
|
|
218
|
-
const hasInput = path.some(
|
|
218
|
+
const hasInput = path.some(
|
|
219
|
+
(node) => node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement || !!node.isContentEditable
|
|
220
|
+
);
|
|
219
221
|
if (hasInput) {
|
|
220
222
|
event.stopPropagation();
|
|
221
223
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["StoryDecorator.ts"],
|
|
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 css,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/theme/src/express/themes.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport { Switch } from '@spectrum-web-components/switch';\nimport {\n Color,\n Scale,\n Theme,\n ThemeVariant,\n} from '@spectrum-web-components/theme';\nimport { ActiveOverlay } from '@spectrum-web-components/overlay';\nimport './types.dev.js'\n\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString);\n\nexport let dir: 'ltr' | 'rtl' =\n (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';\nexport let theme: ThemeVariant =\n (urlParams.get('sp_theme') as ThemeVariant) || 'spectrum';\nexport let color: Color =\n (urlParams.get('sp_color') as Color) ||\n (matchMedia(DARK_MODE).matches ? 'dark' : 'light');\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultThemeVariant: theme,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n};\n\nconst reduceMotionProperties = css`\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n`;\n\nActiveOverlay.prototype.renderTheme = function (\n content: TemplateResult\n): TemplateResult {\n const { color, scale, theme, lang } = this.theme;\n return html`\n ${window.__swc_hack_knobs__.defaultReduceMotion\n ? html`\n <style>\n sp-theme {\n ${reduceMotionProperties}\n }\n </style>\n `\n : html``}\n <sp-theme\n theme=${ifDefined(theme)}\n color=${ifDefined(color)}\n scale=${ifDefined(scale)}\n lang=${ifDefined(lang)}\n part=\"theme\"\n >\n ${content}\n </sp-theme>\n `;\n};\n\nexport class StoryDecorator extends SpectrumElement {\n static override get styles() {\n return [\n css`\n :host(:focus) {\n outline: none;\n }\n sp-theme {\n overflow-x: hidden;\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-height: 100vh;\n padding: var(--spectrum-global-dimension-size-100)\n var(--spectrum-global-dimension-size-100)\n calc(\n 2 * var(--spectrum-alias-focus-ring-size) +\n var(--spectrum-alias-item-height-m)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(\n --spectrum-body-text-color,\n var(--spectrum-alias-text-color)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--spectrum-global-dimension-size-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--spectrum-global-dimension-size-200);\n right: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n [dir='ltr'] sp-field-label {\n padding-left: 0;\n padding-right: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-left: var(--spectrum-global-dimension-size-400);\n }\n [dir='ltr'] sp-switch {\n margin-left: var(--spectrum-global-dimension-size-400);\n margin-right: 0;\n padding: 0;\n }\n [dir='rtl'] sp-field-label {\n padding-right: 0;\n padding-left: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-right: var(--spectrum-global-dimension-size-400);\n }\n [dir='rtl'] sp-switch {\n margin-right: var(--spectrum-global-dimension-size-400);\n margin-left: 0;\n padding: 0;\n }\n `,\n ];\n }\n\n @property({ type: String })\n public theme: ThemeVariant = window.__swc_hack_knobs__.defaultThemeVariant;\n\n @property({ type: String })\n public color: Color = window.__swc_hack_knobs__.defaultColor;\n\n @property({ type: String })\n public scale: Scale = window.__swc_hack_knobs__.defaultScale;\n\n @property({ type: String, reflect: true, attribute: 'dir' })\n public direction: 'ltr' | 'rtl' =\n window.__swc_hack_knobs__.defaultDirection;\n\n @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })\n public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = false;\n\n @queryAsync('sp-theme')\n private themeRoot!: Theme;\n\n public ready = false;\n\n public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).startManagingContentDirection(el);\n }\n\n public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).stopManagingContentDirection(el);\n }\n\n private updateTheme({ target }: Event & { target: Picker | Switch }): void {\n const { id } = target;\n const { value } = target as Picker;\n const { checked } = target as Switch;\n switch (id) {\n case 'theme':\n this.theme =\n theme =\n window.__swc_hack_knobs__.defaultThemeVariant =\n value as ThemeVariant;\n break;\n case 'color':\n this.color =\n color =\n window.__swc_hack_knobs__.defaultColor =\n value as Color;\n break;\n case 'scale':\n this.scale =\n scale =\n window.__swc_hack_knobs__.defaultScale =\n value as Scale;\n break;\n case 'dir':\n this.direction =\n dir =\n window.__swc_hack_knobs__.defaultDirection =\n value as 'ltr' | 'rtl';\n document.documentElement.dir = dir;\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some((node) => node instanceof HTMLInputElement);\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n theme=${this.theme}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n part=\"container\"\n @keydown=${this.handleKeydown}\n >\n <slot @slotchange=${this.checkReady}></slot>\n ${this.screenshot ? nothing : this.manageTheme}\n </sp-theme>\n `;\n }\n\n protected async checkReady({\n target,\n }: Event & { target: HTMLSlotElement }): Promise<void> {\n this.ready = false;\n const descendents = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const litElementDescendents = descendents.filter(\n (el) =>\n el.tagName.search('-') !== -1 &&\n typeof el.updateComplete !== 'undefined'\n );\n const updates = litElementDescendents.map((el) => el.updateComplete);\n await Promise.all(updates);\n new Promise((res) => {\n setTimeout(res);\n }).then(async () => {\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n setTimeout(() => {\n this.ready = true;\n });\n });\n }\n\n private get manageTheme(): TemplateResult {\n return html`\n <div class=\"manage-theme\" part=\"controls\">\n ${this.themeControl} ${this.colorControl} ${this.scaleControl}\n ${this.dirControl} ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get themeControl(): TemplateResult {\n return html`\n <sp-field-label for=\"theme\">Spectrum</sp-field-label>\n <sp-picker\n id=\"theme\"\n placement=\"top\"\n quiet\n .value=${this.theme}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Classic</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label for=\"color\">Theme</sp-field-label>\n <sp-picker\n id=\"color\"\n placement=\"top\"\n quiet\n .value=${this.color}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"lightest\">Lightest</sp-menu-item>\n <sp-menu-item value=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n <sp-menu-item value=\"darkest\">Darkest</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label for=\"scale\">Scale</sp-field-label>\n <sp-picker\n id=\"scale\"\n label=\"Scale\"\n placement=\"top\"\n quiet\n .value=${this.scale}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"medium\">Medium</sp-menu-item>\n <sp-menu-item value=\"large\">Large</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label for=\"dir\">Direction</sp-field-label>\n <sp-picker\n id=\"dir\"\n label=\"Direction\"\n placement=\"top\"\n quiet\n .value=${this.direction}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"ltr\">LTR</sp-menu-item>\n <sp-menu-item value=\"rtl\">RTL</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get reduceMotionControl(): TemplateResult {\n return html`\n <sp-switch\n id=\"reduceMotion\"\n ?checked=${this.reduceMotion}\n @change=${this.updateTheme}\n >\n Reduce Motion\n </sp-switch>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('screenshot') && this.screenshot) {\n Theme.registerThemeFragment(\n 'app',\n 'app',\n css`\n :host {\n --swc-test-caret-color: transparent;\n --swc-test-forced-color-adjust: none;\n }\n `\n );\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
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 css,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/theme/src/express/themes.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport { Switch } from '@spectrum-web-components/switch';\nimport {\n Color,\n Scale,\n Theme,\n ThemeVariant,\n} from '@spectrum-web-components/theme';\nimport { ActiveOverlay } from '@spectrum-web-components/overlay';\nimport './types.dev.js'\n\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString);\n\nexport let dir: 'ltr' | 'rtl' =\n (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';\nexport let theme: ThemeVariant =\n (urlParams.get('sp_theme') as ThemeVariant) || 'spectrum';\nexport let color: Color =\n (urlParams.get('sp_color') as Color) ||\n (matchMedia(DARK_MODE).matches ? 'dark' : 'light');\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultThemeVariant: theme,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n};\n\nconst reduceMotionProperties = css`\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n`;\n\nActiveOverlay.prototype.renderTheme = function (\n content: TemplateResult\n): TemplateResult {\n const { color, scale, theme, lang } = this.theme;\n return html`\n ${window.__swc_hack_knobs__.defaultReduceMotion\n ? html`\n <style>\n sp-theme {\n ${reduceMotionProperties}\n }\n </style>\n `\n : html``}\n <sp-theme\n theme=${ifDefined(theme)}\n color=${ifDefined(color)}\n scale=${ifDefined(scale)}\n lang=${ifDefined(lang)}\n part=\"theme\"\n >\n ${content}\n </sp-theme>\n `;\n};\n\nexport class StoryDecorator extends SpectrumElement {\n static override get styles() {\n return [\n css`\n :host(:focus) {\n outline: none;\n }\n sp-theme {\n overflow-x: hidden;\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-height: 100vh;\n padding: var(--spectrum-global-dimension-size-100)\n var(--spectrum-global-dimension-size-100)\n calc(\n 2 * var(--spectrum-alias-focus-ring-size) +\n var(--spectrum-alias-item-height-m)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(\n --spectrum-body-text-color,\n var(--spectrum-alias-text-color)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--spectrum-global-dimension-size-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--spectrum-global-dimension-size-200);\n right: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n [dir='ltr'] sp-field-label {\n padding-left: 0;\n padding-right: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-left: var(--spectrum-global-dimension-size-400);\n }\n [dir='ltr'] sp-switch {\n margin-left: var(--spectrum-global-dimension-size-400);\n margin-right: 0;\n padding: 0;\n }\n [dir='rtl'] sp-field-label {\n padding-right: 0;\n padding-left: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-right: var(--spectrum-global-dimension-size-400);\n }\n [dir='rtl'] sp-switch {\n margin-right: var(--spectrum-global-dimension-size-400);\n margin-left: 0;\n padding: 0;\n }\n `,\n ];\n }\n\n @property({ type: String })\n public theme: ThemeVariant = window.__swc_hack_knobs__.defaultThemeVariant;\n\n @property({ type: String })\n public color: Color = window.__swc_hack_knobs__.defaultColor;\n\n @property({ type: String })\n public scale: Scale = window.__swc_hack_knobs__.defaultScale;\n\n @property({ type: String, reflect: true, attribute: 'dir' })\n public direction: 'ltr' | 'rtl' =\n window.__swc_hack_knobs__.defaultDirection;\n\n @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })\n public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = false;\n\n @queryAsync('sp-theme')\n private themeRoot!: Theme;\n\n public ready = false;\n\n public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).startManagingContentDirection(el);\n }\n\n public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).stopManagingContentDirection(el);\n }\n\n private updateTheme({ target }: Event & { target: Picker | Switch }): void {\n const { id } = target;\n const { value } = target as Picker;\n const { checked } = target as Switch;\n switch (id) {\n case 'theme':\n this.theme =\n theme =\n window.__swc_hack_knobs__.defaultThemeVariant =\n value as ThemeVariant;\n break;\n case 'color':\n this.color =\n color =\n window.__swc_hack_knobs__.defaultColor =\n value as Color;\n break;\n case 'scale':\n this.scale =\n scale =\n window.__swc_hack_knobs__.defaultScale =\n value as Scale;\n break;\n case 'dir':\n this.direction =\n dir =\n window.__swc_hack_knobs__.defaultDirection =\n value as 'ltr' | 'rtl';\n document.documentElement.dir = dir;\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some(\n (node) =>\n node instanceof HTMLInputElement ||\n node instanceof HTMLTextAreaElement ||\n !!(node as HTMLElement).isContentEditable\n );\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n theme=${this.theme}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n part=\"container\"\n @keydown=${this.handleKeydown}\n >\n <slot @slotchange=${this.checkReady}></slot>\n ${this.screenshot ? nothing : this.manageTheme}\n </sp-theme>\n `;\n }\n\n protected async checkReady({\n target,\n }: Event & { target: HTMLSlotElement }): Promise<void> {\n this.ready = false;\n const descendents = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const litElementDescendents = descendents.filter(\n (el) =>\n el.tagName.search('-') !== -1 &&\n typeof el.updateComplete !== 'undefined'\n );\n const updates = litElementDescendents.map((el) => el.updateComplete);\n await Promise.all(updates);\n new Promise((res) => {\n setTimeout(res);\n }).then(async () => {\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n setTimeout(() => {\n this.ready = true;\n });\n });\n }\n\n private get manageTheme(): TemplateResult {\n return html`\n <div class=\"manage-theme\" part=\"controls\">\n ${this.themeControl} ${this.colorControl} ${this.scaleControl}\n ${this.dirControl} ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get themeControl(): TemplateResult {\n return html`\n <sp-field-label for=\"theme\">Spectrum</sp-field-label>\n <sp-picker\n id=\"theme\"\n placement=\"top\"\n quiet\n .value=${this.theme}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Classic</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label for=\"color\">Theme</sp-field-label>\n <sp-picker\n id=\"color\"\n placement=\"top\"\n quiet\n .value=${this.color}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"lightest\">Lightest</sp-menu-item>\n <sp-menu-item value=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n <sp-menu-item value=\"darkest\">Darkest</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label for=\"scale\">Scale</sp-field-label>\n <sp-picker\n id=\"scale\"\n label=\"Scale\"\n placement=\"top\"\n quiet\n .value=${this.scale}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"medium\">Medium</sp-menu-item>\n <sp-menu-item value=\"large\">Large</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label for=\"dir\">Direction</sp-field-label>\n <sp-picker\n id=\"dir\"\n label=\"Direction\"\n placement=\"top\"\n quiet\n .value=${this.direction}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"ltr\">LTR</sp-menu-item>\n <sp-menu-item value=\"rtl\">RTL</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get reduceMotionControl(): TemplateResult {\n return html`\n <sp-switch\n id=\"reduceMotion\"\n ?checked=${this.reduceMotion}\n @change=${this.updateTheme}\n >\n Reduce Motion\n </sp-switch>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('screenshot') && this.screenshot) {\n Theme.registerThemeFragment(\n 'app',\n 'app',\n css`\n :host {\n --swc-test-caret-color: transparent;\n --swc-test-forced-color-adjust: none;\n }\n `\n );\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["color", "scale", "theme"]
|
|
7
7
|
}
|
package/src/StoryDecorator.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(m,n,e,
|
|
1
|
+
"use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(m,n,e,a)=>{for(var t=a>1?void 0:a?g(n,e):n,i=m.length-1,o;i>=0;i--)(o=m[i])&&(t=(a?o(n,e,t):o(t))||t);return a&&t&&h(n,e,t),t};import{css as d,html as s,nothing as b,SpectrumElement as _}from"@spectrum-web-components/base";import{property as l,queryAsync as f}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as p}from"@spectrum-web-components/base/src/directives.js";import{DARK_MODE as w}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import"@spectrum-web-components/theme/sp-theme.js";import"@spectrum-web-components/theme/src/themes.js";import"@spectrum-web-components/theme/src/express/themes.js";import"@spectrum-web-components/field-label/sp-field-label.js";import"@spectrum-web-components/picker/sp-picker.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/switch/sp-switch.js";import{Theme as v}from"@spectrum-web-components/theme";import{ActiveOverlay as k}from"@spectrum-web-components/overlay";import"./types.js";const T=window.location.search,c=new URLSearchParams(T);export let dir=c.get("sp_dir")||"ltr",theme=c.get("sp_theme")||"spectrum",color=c.get("sp_color")||(matchMedia(w).matches?"dark":"light"),scale=c.get("sp_scale")||"medium",reduceMotion=c.get("sp_reduceMotion")==="true";window.__swc_hack_knobs__=window.__swc_hack_knobs__||{defaultThemeVariant:theme,defaultColor:color,defaultScale:scale,defaultDirection:dir,defaultReduceMotion:reduceMotion};const u=d`
|
|
2
2
|
--spectrum-global-animation-duration-100: 0ms;
|
|
3
3
|
--spectrum-global-animation-duration-200: 0ms;
|
|
4
4
|
--spectrum-global-animation-duration-300: 0ms;
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
--spectrum-animation-duration-4000: 0ms;
|
|
27
27
|
--spectrum-coachmark-animation-indicator-ring-duration: 0ms;
|
|
28
28
|
--swc-test-duration: 1ms;
|
|
29
|
-
`;k.prototype.renderTheme=function(m){const{color:n,scale:e,theme:
|
|
30
|
-
${window.__swc_hack_knobs__.defaultReduceMotion?
|
|
29
|
+
`;k.prototype.renderTheme=function(m){const{color:n,scale:e,theme:a,lang:t}=this.theme;return s`
|
|
30
|
+
${window.__swc_hack_knobs__.defaultReduceMotion?s`
|
|
31
31
|
<style>
|
|
32
32
|
sp-theme {
|
|
33
33
|
${u}
|
|
34
34
|
}
|
|
35
35
|
</style>
|
|
36
|
-
`:
|
|
36
|
+
`:s``}
|
|
37
37
|
<sp-theme
|
|
38
|
-
theme=${p(
|
|
38
|
+
theme=${p(a)}
|
|
39
39
|
color=${p(n)}
|
|
40
40
|
scale=${p(e)}
|
|
41
41
|
lang=${p(t)}
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
margin-left: 0;
|
|
113
113
|
padding: 0;
|
|
114
114
|
}
|
|
115
|
-
`]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:
|
|
115
|
+
`]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:a}=e,{value:t}=e,{checked:i}=e;switch(a){case"theme":this.theme=theme=window.__swc_hack_knobs__.defaultThemeVariant=t;break;case"color":this.color=color=window.__swc_hack_knobs__.defaultColor=t;break;case"scale":this.scale=scale=window.__swc_hack_knobs__.defaultScale=t;break;case"dir":this.direction=dir=window.__swc_hack_knobs__.defaultDirection=t,document.documentElement.dir=dir;break;case"reduceMotion":this.reduceMotion=reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion=i;break}}handleKeydown(e){e.composedPath().some(i=>i instanceof HTMLInputElement||i instanceof HTMLTextAreaElement||!!i.isContentEditable)&&e.stopPropagation()}render(){return s`
|
|
116
116
|
<sp-theme
|
|
117
117
|
theme=${this.theme}
|
|
118
118
|
color=${this.color}
|
|
@@ -124,12 +124,12 @@
|
|
|
124
124
|
<slot @slotchange=${this.checkReady}></slot>
|
|
125
125
|
${this.screenshot?b:this.manageTheme}
|
|
126
126
|
</sp-theme>
|
|
127
|
-
`}async checkReady({target:e}){this.ready=!1;const
|
|
127
|
+
`}async checkReady({target:e}){this.ready=!1;const i=e.assignedElements({flatten:!0}).filter(o=>o.tagName.search("-")!==-1&&typeof o.updateComplete!="undefined").map(o=>o.updateComplete);await Promise.all(i),new Promise(o=>{setTimeout(o)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return s`
|
|
128
128
|
<div class="manage-theme" part="controls">
|
|
129
129
|
${this.themeControl} ${this.colorControl} ${this.scaleControl}
|
|
130
130
|
${this.dirControl} ${this.reduceMotionControl}
|
|
131
131
|
</div>
|
|
132
|
-
`}get themeControl(){return
|
|
132
|
+
`}get themeControl(){return s`
|
|
133
133
|
<sp-field-label for="theme">Spectrum</sp-field-label>
|
|
134
134
|
<sp-picker
|
|
135
135
|
id="theme"
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
<sp-menu-item value="spectrum">Classic</sp-menu-item>
|
|
142
142
|
<sp-menu-item value="express">Express</sp-menu-item>
|
|
143
143
|
</sp-picker>
|
|
144
|
-
`}get colorControl(){return
|
|
144
|
+
`}get colorControl(){return s`
|
|
145
145
|
<sp-field-label for="color">Theme</sp-field-label>
|
|
146
146
|
<sp-picker
|
|
147
147
|
id="color"
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
<sp-menu-item value="dark">Dark</sp-menu-item>
|
|
156
156
|
<sp-menu-item value="darkest">Darkest</sp-menu-item>
|
|
157
157
|
</sp-picker>
|
|
158
|
-
`}get scaleControl(){return
|
|
158
|
+
`}get scaleControl(){return s`
|
|
159
159
|
<sp-field-label for="scale">Scale</sp-field-label>
|
|
160
160
|
<sp-picker
|
|
161
161
|
id="scale"
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
<sp-menu-item value="medium">Medium</sp-menu-item>
|
|
169
169
|
<sp-menu-item value="large">Large</sp-menu-item>
|
|
170
170
|
</sp-picker>
|
|
171
|
-
`}get dirControl(){return
|
|
171
|
+
`}get dirControl(){return s`
|
|
172
172
|
<sp-field-label for="dir">Direction</sp-field-label>
|
|
173
173
|
<sp-picker
|
|
174
174
|
id="dir"
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
<sp-menu-item value="ltr">LTR</sp-menu-item>
|
|
182
182
|
<sp-menu-item value="rtl">RTL</sp-menu-item>
|
|
183
183
|
</sp-picker>
|
|
184
|
-
`}get reduceMotionControl(){return
|
|
184
|
+
`}get reduceMotionControl(){return s`
|
|
185
185
|
<sp-switch
|
|
186
186
|
id="reduceMotion"
|
|
187
187
|
?checked=${this.reduceMotion}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["StoryDecorator.ts"],
|
|
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 css,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/theme/src/express/themes.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport { Switch } from '@spectrum-web-components/switch';\nimport {\n Color,\n Scale,\n Theme,\n ThemeVariant,\n} from '@spectrum-web-components/theme';\nimport { ActiveOverlay } from '@spectrum-web-components/overlay';\nimport './types.js';\n\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString);\n\nexport let dir: 'ltr' | 'rtl' =\n (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';\nexport let theme: ThemeVariant =\n (urlParams.get('sp_theme') as ThemeVariant) || 'spectrum';\nexport let color: Color =\n (urlParams.get('sp_color') as Color) ||\n (matchMedia(DARK_MODE).matches ? 'dark' : 'light');\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultThemeVariant: theme,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n};\n\nconst reduceMotionProperties = css`\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n`;\n\nActiveOverlay.prototype.renderTheme = function (\n content: TemplateResult\n): TemplateResult {\n const { color, scale, theme, lang } = this.theme;\n return html`\n ${window.__swc_hack_knobs__.defaultReduceMotion\n ? html`\n <style>\n sp-theme {\n ${reduceMotionProperties}\n }\n </style>\n `\n : html``}\n <sp-theme\n theme=${ifDefined(theme)}\n color=${ifDefined(color)}\n scale=${ifDefined(scale)}\n lang=${ifDefined(lang)}\n part=\"theme\"\n >\n ${content}\n </sp-theme>\n `;\n};\n\nexport class StoryDecorator extends SpectrumElement {\n static override get styles() {\n return [\n css`\n :host(:focus) {\n outline: none;\n }\n sp-theme {\n overflow-x: hidden;\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-height: 100vh;\n padding: var(--spectrum-global-dimension-size-100)\n var(--spectrum-global-dimension-size-100)\n calc(\n 2 * var(--spectrum-alias-focus-ring-size) +\n var(--spectrum-alias-item-height-m)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(\n --spectrum-body-text-color,\n var(--spectrum-alias-text-color)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--spectrum-global-dimension-size-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--spectrum-global-dimension-size-200);\n right: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n [dir='ltr'] sp-field-label {\n padding-left: 0;\n padding-right: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-left: var(--spectrum-global-dimension-size-400);\n }\n [dir='ltr'] sp-switch {\n margin-left: var(--spectrum-global-dimension-size-400);\n margin-right: 0;\n padding: 0;\n }\n [dir='rtl'] sp-field-label {\n padding-right: 0;\n padding-left: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-right: var(--spectrum-global-dimension-size-400);\n }\n [dir='rtl'] sp-switch {\n margin-right: var(--spectrum-global-dimension-size-400);\n margin-left: 0;\n padding: 0;\n }\n `,\n ];\n }\n\n @property({ type: String })\n public theme: ThemeVariant = window.__swc_hack_knobs__.defaultThemeVariant;\n\n @property({ type: String })\n public color: Color = window.__swc_hack_knobs__.defaultColor;\n\n @property({ type: String })\n public scale: Scale = window.__swc_hack_knobs__.defaultScale;\n\n @property({ type: String, reflect: true, attribute: 'dir' })\n public direction: 'ltr' | 'rtl' =\n window.__swc_hack_knobs__.defaultDirection;\n\n @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })\n public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = false;\n\n @queryAsync('sp-theme')\n private themeRoot!: Theme;\n\n public ready = false;\n\n public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).startManagingContentDirection(el);\n }\n\n public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).stopManagingContentDirection(el);\n }\n\n private updateTheme({ target }: Event & { target: Picker | Switch }): void {\n const { id } = target;\n const { value } = target as Picker;\n const { checked } = target as Switch;\n switch (id) {\n case 'theme':\n this.theme =\n theme =\n window.__swc_hack_knobs__.defaultThemeVariant =\n value as ThemeVariant;\n break;\n case 'color':\n this.color =\n color =\n window.__swc_hack_knobs__.defaultColor =\n value as Color;\n break;\n case 'scale':\n this.scale =\n scale =\n window.__swc_hack_knobs__.defaultScale =\n value as Scale;\n break;\n case 'dir':\n this.direction =\n dir =\n window.__swc_hack_knobs__.defaultDirection =\n value as 'ltr' | 'rtl';\n document.documentElement.dir = dir;\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some((node) => node instanceof HTMLInputElement);\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n theme=${this.theme}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n part=\"container\"\n @keydown=${this.handleKeydown}\n >\n <slot @slotchange=${this.checkReady}></slot>\n ${this.screenshot ? nothing : this.manageTheme}\n </sp-theme>\n `;\n }\n\n protected async checkReady({\n target,\n }: Event & { target: HTMLSlotElement }): Promise<void> {\n this.ready = false;\n const descendents = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const litElementDescendents = descendents.filter(\n (el) =>\n el.tagName.search('-') !== -1 &&\n typeof el.updateComplete !== 'undefined'\n );\n const updates = litElementDescendents.map((el) => el.updateComplete);\n await Promise.all(updates);\n new Promise((res) => {\n setTimeout(res);\n }).then(async () => {\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n setTimeout(() => {\n this.ready = true;\n });\n });\n }\n\n private get manageTheme(): TemplateResult {\n return html`\n <div class=\"manage-theme\" part=\"controls\">\n ${this.themeControl} ${this.colorControl} ${this.scaleControl}\n ${this.dirControl} ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get themeControl(): TemplateResult {\n return html`\n <sp-field-label for=\"theme\">Spectrum</sp-field-label>\n <sp-picker\n id=\"theme\"\n placement=\"top\"\n quiet\n .value=${this.theme}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Classic</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label for=\"color\">Theme</sp-field-label>\n <sp-picker\n id=\"color\"\n placement=\"top\"\n quiet\n .value=${this.color}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"lightest\">Lightest</sp-menu-item>\n <sp-menu-item value=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n <sp-menu-item value=\"darkest\">Darkest</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label for=\"scale\">Scale</sp-field-label>\n <sp-picker\n id=\"scale\"\n label=\"Scale\"\n placement=\"top\"\n quiet\n .value=${this.scale}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"medium\">Medium</sp-menu-item>\n <sp-menu-item value=\"large\">Large</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label for=\"dir\">Direction</sp-field-label>\n <sp-picker\n id=\"dir\"\n label=\"Direction\"\n placement=\"top\"\n quiet\n .value=${this.direction}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"ltr\">LTR</sp-menu-item>\n <sp-menu-item value=\"rtl\">RTL</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get reduceMotionControl(): TemplateResult {\n return html`\n <sp-switch\n id=\"reduceMotion\"\n ?checked=${this.reduceMotion}\n @change=${this.updateTheme}\n >\n Reduce Motion\n </sp-switch>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('screenshot') && this.screenshot) {\n Theme.registerThemeFragment(\n 'app',\n 'app',\n css`\n :host {\n --swc-test-caret-color: transparent;\n --swc-test-forced-color-adjust: none;\n }\n `\n );\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
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 css,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/theme/src/express/themes.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport { Switch } from '@spectrum-web-components/switch';\nimport {\n Color,\n Scale,\n Theme,\n ThemeVariant,\n} from '@spectrum-web-components/theme';\nimport { ActiveOverlay } from '@spectrum-web-components/overlay';\nimport './types.js';\n\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString);\n\nexport let dir: 'ltr' | 'rtl' =\n (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';\nexport let theme: ThemeVariant =\n (urlParams.get('sp_theme') as ThemeVariant) || 'spectrum';\nexport let color: Color =\n (urlParams.get('sp_color') as Color) ||\n (matchMedia(DARK_MODE).matches ? 'dark' : 'light');\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultThemeVariant: theme,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n};\n\nconst reduceMotionProperties = css`\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n`;\n\nActiveOverlay.prototype.renderTheme = function (\n content: TemplateResult\n): TemplateResult {\n const { color, scale, theme, lang } = this.theme;\n return html`\n ${window.__swc_hack_knobs__.defaultReduceMotion\n ? html`\n <style>\n sp-theme {\n ${reduceMotionProperties}\n }\n </style>\n `\n : html``}\n <sp-theme\n theme=${ifDefined(theme)}\n color=${ifDefined(color)}\n scale=${ifDefined(scale)}\n lang=${ifDefined(lang)}\n part=\"theme\"\n >\n ${content}\n </sp-theme>\n `;\n};\n\nexport class StoryDecorator extends SpectrumElement {\n static override get styles() {\n return [\n css`\n :host(:focus) {\n outline: none;\n }\n sp-theme {\n overflow-x: hidden;\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-height: 100vh;\n padding: var(--spectrum-global-dimension-size-100)\n var(--spectrum-global-dimension-size-100)\n calc(\n 2 * var(--spectrum-alias-focus-ring-size) +\n var(--spectrum-alias-item-height-m)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(\n --spectrum-body-text-color,\n var(--spectrum-alias-text-color)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--spectrum-global-dimension-size-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--spectrum-global-dimension-size-200);\n right: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n background-color: var(--spectrum-global-color-gray-100);\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n [dir='ltr'] sp-field-label {\n padding-left: 0;\n padding-right: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-left: var(--spectrum-global-dimension-size-400);\n }\n [dir='ltr'] sp-switch {\n margin-left: var(--spectrum-global-dimension-size-400);\n margin-right: 0;\n padding: 0;\n }\n [dir='rtl'] sp-field-label {\n padding-right: 0;\n padding-left: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--spectrum-global-dimension-size-100)\n );\n margin-right: var(--spectrum-global-dimension-size-400);\n }\n [dir='rtl'] sp-switch {\n margin-right: var(--spectrum-global-dimension-size-400);\n margin-left: 0;\n padding: 0;\n }\n `,\n ];\n }\n\n @property({ type: String })\n public theme: ThemeVariant = window.__swc_hack_knobs__.defaultThemeVariant;\n\n @property({ type: String })\n public color: Color = window.__swc_hack_knobs__.defaultColor;\n\n @property({ type: String })\n public scale: Scale = window.__swc_hack_knobs__.defaultScale;\n\n @property({ type: String, reflect: true, attribute: 'dir' })\n public direction: 'ltr' | 'rtl' =\n window.__swc_hack_knobs__.defaultDirection;\n\n @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })\n public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = false;\n\n @queryAsync('sp-theme')\n private themeRoot!: Theme;\n\n public ready = false;\n\n public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).startManagingContentDirection(el);\n }\n\n public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n (await this.themeRoot).stopManagingContentDirection(el);\n }\n\n private updateTheme({ target }: Event & { target: Picker | Switch }): void {\n const { id } = target;\n const { value } = target as Picker;\n const { checked } = target as Switch;\n switch (id) {\n case 'theme':\n this.theme =\n theme =\n window.__swc_hack_knobs__.defaultThemeVariant =\n value as ThemeVariant;\n break;\n case 'color':\n this.color =\n color =\n window.__swc_hack_knobs__.defaultColor =\n value as Color;\n break;\n case 'scale':\n this.scale =\n scale =\n window.__swc_hack_knobs__.defaultScale =\n value as Scale;\n break;\n case 'dir':\n this.direction =\n dir =\n window.__swc_hack_knobs__.defaultDirection =\n value as 'ltr' | 'rtl';\n document.documentElement.dir = dir;\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some(\n (node) =>\n node instanceof HTMLInputElement ||\n node instanceof HTMLTextAreaElement ||\n !!(node as HTMLElement).isContentEditable\n );\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n theme=${this.theme}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n part=\"container\"\n @keydown=${this.handleKeydown}\n >\n <slot @slotchange=${this.checkReady}></slot>\n ${this.screenshot ? nothing : this.manageTheme}\n </sp-theme>\n `;\n }\n\n protected async checkReady({\n target,\n }: Event & { target: HTMLSlotElement }): Promise<void> {\n this.ready = false;\n const descendents = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const litElementDescendents = descendents.filter(\n (el) =>\n el.tagName.search('-') !== -1 &&\n typeof el.updateComplete !== 'undefined'\n );\n const updates = litElementDescendents.map((el) => el.updateComplete);\n await Promise.all(updates);\n new Promise((res) => {\n setTimeout(res);\n }).then(async () => {\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n setTimeout(() => {\n this.ready = true;\n });\n });\n }\n\n private get manageTheme(): TemplateResult {\n return html`\n <div class=\"manage-theme\" part=\"controls\">\n ${this.themeControl} ${this.colorControl} ${this.scaleControl}\n ${this.dirControl} ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get themeControl(): TemplateResult {\n return html`\n <sp-field-label for=\"theme\">Spectrum</sp-field-label>\n <sp-picker\n id=\"theme\"\n placement=\"top\"\n quiet\n .value=${this.theme}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Classic</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label for=\"color\">Theme</sp-field-label>\n <sp-picker\n id=\"color\"\n placement=\"top\"\n quiet\n .value=${this.color}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"lightest\">Lightest</sp-menu-item>\n <sp-menu-item value=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n <sp-menu-item value=\"darkest\">Darkest</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label for=\"scale\">Scale</sp-field-label>\n <sp-picker\n id=\"scale\"\n label=\"Scale\"\n placement=\"top\"\n quiet\n .value=${this.scale}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"medium\">Medium</sp-menu-item>\n <sp-menu-item value=\"large\">Large</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label for=\"dir\">Direction</sp-field-label>\n <sp-picker\n id=\"dir\"\n label=\"Direction\"\n placement=\"top\"\n quiet\n .value=${this.direction}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"ltr\">LTR</sp-menu-item>\n <sp-menu-item value=\"rtl\">RTL</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get reduceMotionControl(): TemplateResult {\n return html`\n <sp-switch\n id=\"reduceMotion\"\n ?checked=${this.reduceMotion}\n @change=${this.updateTheme}\n >\n Reduce Motion\n </sp-switch>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('screenshot') && this.screenshot) {\n Theme.registerThemeFragment(\n 'app',\n 'app',\n css`\n :host {\n --swc-test-caret-color: transparent;\n --swc-test-forced-color-adjust: none;\n }\n `\n );\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["css", "html", "nothing", "SpectrumElement", "property", "queryAsync", "ifDefined", "DARK_MODE", "Theme", "ActiveOverlay", "queryString", "urlParams", "reduceMotionProperties", "content", "color", "scale", "theme", "lang", "el", "target", "id", "value", "checked", "event", "node", "updates", "res", "changes", "__decorateClass"]
|
|
7
7
|
}
|