@spectrum-web-components/story-decorator 1.3.1-beta.0 → 1.4.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/story-decorator",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -69,14 +69,14 @@
|
|
|
69
69
|
"lit-html"
|
|
70
70
|
],
|
|
71
71
|
"dependencies": {
|
|
72
|
-
"@spectrum-web-components/base": "1.
|
|
73
|
-
"@spectrum-web-components/field-label": "1.
|
|
74
|
-
"@spectrum-web-components/menu": "1.
|
|
75
|
-
"@spectrum-web-components/overlay": "1.
|
|
76
|
-
"@spectrum-web-components/picker": "1.
|
|
77
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
78
|
-
"@spectrum-web-components/switch": "1.
|
|
79
|
-
"@spectrum-web-components/theme": "1.
|
|
72
|
+
"@spectrum-web-components/base": "1.4.0",
|
|
73
|
+
"@spectrum-web-components/field-label": "1.4.0",
|
|
74
|
+
"@spectrum-web-components/menu": "1.4.0",
|
|
75
|
+
"@spectrum-web-components/overlay": "1.4.0",
|
|
76
|
+
"@spectrum-web-components/picker": "1.4.0",
|
|
77
|
+
"@spectrum-web-components/reactive-controllers": "1.4.0",
|
|
78
|
+
"@spectrum-web-components/switch": "1.4.0",
|
|
79
|
+
"@spectrum-web-components/theme": "1.4.0"
|
|
80
80
|
},
|
|
81
81
|
"types": "./src/index.d.ts",
|
|
82
82
|
"customElements": "custom-elements.json",
|
|
@@ -183,8 +183,8 @@ export class StoryDecorator extends SpectrumElement {
|
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
get backgroundStyle() {
|
|
186
|
-
if (system === "spectrum-two") {
|
|
187
|
-
return `background-color: var(--spectrum-
|
|
186
|
+
if (this.system === "spectrum-two") {
|
|
187
|
+
return `background-color: var(--spectrum-gray-50)`;
|
|
188
188
|
}
|
|
189
189
|
return `background-color: var(--spectrum-gray-100);`;
|
|
190
190
|
}
|
|
@@ -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 { 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/spectrum-two/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 SystemVariant,\n Theme,\n} from '@spectrum-web-components/theme';\nimport './types.dev.js'\nimport { type Locale, Locales } from './locales.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 const theme: SystemVariant =\n (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';\nexport let system: SystemVariant =\n (urlParams.get('sp_system') as SystemVariant) || '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';\nexport const screenshot = urlParams.get('sp_screenshot') === 'true';\nexport const locale = urlParams.get('sp_locale') || 'en-US';\nexport const direction = urlParams.get('sp_direction') || 'ltr';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultSystemVariant: system,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n defaultLocale: locale,\n};\n\nconst reduceMotionProperties = css`\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-animation-duration-6000: 0ms;\n --pending-delay: 0s;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\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(--decorator-padding-100)\n var(--decorator-padding-100)\n calc(\n 2 * var(--spectrum-focus-indicator-thickness) +\n var(--spectrum-component-height-100)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-background-base-color);\n color: var(--spectrum-body-color);\n\n --decorator-padding-100: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)\n );\n --decorator-padding-200: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)\n );\n --decorator-padding-400: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--decorator-padding-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--decorator-padding-200);\n right: var(--decorator-padding-200);\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n box-sizing: border-box;\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n sp-field-label {\n padding-inline-end: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--decorator-padding-100)\n );\n margin-inline-start: var(--decorator-padding-400);\n }\n sp-switch {\n margin-inline-start: var(--decorator-padding-400);\n }\n `,\n ];\n }\n\n @property({ type: String })\n public system: SystemVariant =\n window.__swc_hack_knobs__.defaultSystemVariant;\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: String })\n public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = screenshot;\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 'system':\n this.system =\n system =\n window.__swc_hack_knobs__.defaultSystemVariant =\n value as SystemVariant;\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 if (document.documentElement.dir !== dir) {\n document.documentElement.dir = dir;\n }\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n case 'locale':\n this.lang = window.__swc_hack_knobs__.defaultLocale =\n value as Locale;\n break;\n }\n }\n\n public get backgroundStyle() {\n if (system === 'spectrum-two') {\n return `background-color: var(--spectrum-background-base-color);`;\n }\n return `background-color: var(--spectrum-gray-100);`;\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 system=${this.system}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n style=${this.backgroundStyle}\n part=\"container\"\n lang=${this.lang}\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 assignedElements = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const descendents = assignedElements;\n assignedElements.forEach((descendent) => {\n const gathered = [\n ...(descendent.querySelectorAll('*') || []),\n ] as SpectrumElement[];\n descendents.push(...gathered);\n });\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.systemControl} ${this.colorControl} ${this.scaleControl}\n ${this.localeControl} ${this.dirControl}\n ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get systemControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"system\">\n System\n </sp-field-label>\n <sp-picker\n id=\"system\"\n placement=\"top\"\n quiet\n .value=${this.system}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Spectrum</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n <sp-menu-item value=\"spectrum-two\">Spectrum 2</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"color\">\n Theme\n </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=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"scale\">\n Scale\n </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 localeControl(): TemplateResult {\n const renderLocaleOption = (locale: Locale): TemplateResult => html`\n <sp-menu-item value=${locale}>${Locales[locale]}</sp-menu-item>\n `;\n\n return html`\n <sp-field-label side-aligned=\"start\" for=\"locale\">\n Locale\n </sp-field-label>\n <sp-picker\n id=\"locale\"\n label=\"Locale\"\n placement=\"top\"\n quiet\n .value=${this.lang}\n @change=${this.updateTheme}\n >\n ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)}\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"dir\">\n Direction\n </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 { 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/spectrum-two/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 SystemVariant,\n Theme,\n} from '@spectrum-web-components/theme';\nimport './types.dev.js'\nimport { type Locale, Locales } from './locales.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 const theme: SystemVariant =\n (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';\nexport let system: SystemVariant =\n (urlParams.get('sp_system') as SystemVariant) || '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';\nexport const screenshot = urlParams.get('sp_screenshot') === 'true';\nexport const locale = urlParams.get('sp_locale') || 'en-US';\nexport const direction = urlParams.get('sp_direction') || 'ltr';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultSystemVariant: system,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n defaultLocale: locale,\n};\n\nconst reduceMotionProperties = css`\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-animation-duration-6000: 0ms;\n --pending-delay: 0s;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\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(--decorator-padding-100)\n var(--decorator-padding-100)\n calc(\n 2 * var(--spectrum-focus-indicator-thickness) +\n var(--spectrum-component-height-100)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-background-base-color);\n color: var(--spectrum-body-color);\n\n --decorator-padding-100: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)\n );\n --decorator-padding-200: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)\n );\n --decorator-padding-400: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--decorator-padding-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--decorator-padding-200);\n right: var(--decorator-padding-200);\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n box-sizing: border-box;\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n sp-field-label {\n padding-inline-end: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--decorator-padding-100)\n );\n margin-inline-start: var(--decorator-padding-400);\n }\n sp-switch {\n margin-inline-start: var(--decorator-padding-400);\n }\n `,\n ];\n }\n\n @property({ type: String })\n public system: SystemVariant =\n window.__swc_hack_knobs__.defaultSystemVariant;\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: String })\n public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = screenshot;\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 'system':\n this.system =\n system =\n window.__swc_hack_knobs__.defaultSystemVariant =\n value as SystemVariant;\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 if (document.documentElement.dir !== dir) {\n document.documentElement.dir = dir;\n }\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n case 'locale':\n this.lang = window.__swc_hack_knobs__.defaultLocale =\n value as Locale;\n break;\n }\n }\n\n public get backgroundStyle() {\n if (this.system === 'spectrum-two') {\n return `background-color: var(--spectrum-gray-50)`;\n }\n return `background-color: var(--spectrum-gray-100);`;\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 system=${this.system}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n style=${this.backgroundStyle}\n part=\"container\"\n lang=${this.lang}\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 assignedElements = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const descendents = assignedElements;\n assignedElements.forEach((descendent) => {\n const gathered = [\n ...(descendent.querySelectorAll('*') || []),\n ] as SpectrumElement[];\n descendents.push(...gathered);\n });\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.systemControl} ${this.colorControl} ${this.scaleControl}\n ${this.localeControl} ${this.dirControl}\n ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get systemControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"system\">\n System\n </sp-field-label>\n <sp-picker\n id=\"system\"\n placement=\"top\"\n quiet\n .value=${this.system}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Spectrum</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n <sp-menu-item value=\"spectrum-two\">Spectrum 2</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"color\">\n Theme\n </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=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"scale\">\n Scale\n </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 localeControl(): TemplateResult {\n const renderLocaleOption = (locale: Locale): TemplateResult => html`\n <sp-menu-item value=${locale}>${Locales[locale]}</sp-menu-item>\n `;\n\n return html`\n <sp-field-label side-aligned=\"start\" for=\"locale\">\n Locale\n </sp-field-label>\n <sp-picker\n id=\"locale\"\n label=\"Locale\"\n placement=\"top\"\n quiet\n .value=${this.lang}\n @change=${this.updateTheme}\n >\n ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)}\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"dir\">\n Direction\n </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": ["locale"]
|
|
7
7
|
}
|
package/src/StoryDecorator.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var g=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var g=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var i=(p,l,e,a)=>{for(var t=a>1?void 0:a?_(l,e):l,s=p.length-1,m;s>=0;s--)(m=p[s])&&(t=(a?m(l,e,t):m(t))||t);return a&&t&&g(l,e,t),t};import{css as d,html as o,nothing as f,SpectrumElement as b}from"@spectrum-web-components/base";import{property as c,queryAsync as w}from"@spectrum-web-components/base/src/decorators.js";import{DARK_MODE as k}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/spectrum-two/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"./types.js";import{Locales as u}from"./locales.js";const y=window.location.search,r=new URLSearchParams(y);export let dir=r.get("sp_dir")||"ltr";export const theme=r.get("sp_theme")||"spectrum";export let system=r.get("sp_system")||"spectrum",color=r.get("sp_color")||(matchMedia(k).matches?"dark":"light"),scale=r.get("sp_scale")||"medium",reduceMotion=r.get("sp_reduceMotion")==="true";export const screenshot=r.get("sp_screenshot")==="true",locale=r.get("sp_locale")||"en-US",direction=r.get("sp_direction")||"ltr";window.__swc_hack_knobs__=window.__swc_hack_knobs__||{defaultSystemVariant:system,defaultColor:color,defaultScale:scale,defaultDirection:dir,defaultReduceMotion:reduceMotion,defaultLocale:locale};const S=d`
|
|
2
2
|
--spectrum-animation-duration-0: 0ms;
|
|
3
3
|
--spectrum-animation-duration-100: 0ms;
|
|
4
4
|
--spectrum-animation-duration-200: 0ms;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
--pending-delay: 0s;
|
|
17
17
|
--spectrum-coachmark-animation-indicator-ring-duration: 0ms;
|
|
18
18
|
--swc-test-duration: 1ms;
|
|
19
|
-
`;export class StoryDecorator extends
|
|
19
|
+
`;export class StoryDecorator extends b{constructor(){super(...arguments);this.system=window.__swc_hack_knobs__.defaultSystemVariant;this.color=window.__swc_hack_knobs__.defaultColor;this.scale=window.__swc_hack_knobs__.defaultScale;this.direction=window.__swc_hack_knobs__.defaultDirection;this.reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion;this.lang=window.__swc_hack_knobs__.defaultLocale;this.screenshot=screenshot;this.ready=!1}static get styles(){return[d`
|
|
20
20
|
:host(:focus) {
|
|
21
21
|
outline: none;
|
|
22
22
|
}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
sp-switch {
|
|
76
76
|
margin-inline-start: var(--decorator-padding-400);
|
|
77
77
|
}
|
|
78
|
-
`]}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:s}=e;switch(a){case"system":this.system=system=window.__swc_hack_knobs__.defaultSystemVariant=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&&(document.documentElement.dir=dir);break;case"reduceMotion":this.reduceMotion=reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion=s;break;case"locale":this.lang=window.__swc_hack_knobs__.defaultLocale=t;break}}get backgroundStyle(){return system==="spectrum-two"?"background-color: var(--spectrum-
|
|
78
|
+
`]}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:s}=e;switch(a){case"system":this.system=system=window.__swc_hack_knobs__.defaultSystemVariant=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&&(document.documentElement.dir=dir);break;case"reduceMotion":this.reduceMotion=reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion=s;break;case"locale":this.lang=window.__swc_hack_knobs__.defaultLocale=t;break}}get backgroundStyle(){return this.system==="spectrum-two"?"background-color: var(--spectrum-gray-50)":"background-color: var(--spectrum-gray-100);"}handleKeydown(e){e.composedPath().some(s=>s instanceof HTMLInputElement||s instanceof HTMLTextAreaElement||!!s.isContentEditable)&&e.stopPropagation()}render(){return o`
|
|
79
79
|
<sp-theme
|
|
80
80
|
system=${this.system}
|
|
81
81
|
color=${this.color}
|
|
@@ -87,15 +87,15 @@
|
|
|
87
87
|
@keydown=${this.handleKeydown}
|
|
88
88
|
>
|
|
89
89
|
<slot @slotchange=${this.checkReady}></slot>
|
|
90
|
-
${this.screenshot?
|
|
90
|
+
${this.screenshot?f:this.manageTheme}
|
|
91
91
|
</sp-theme>
|
|
92
|
-
`}async checkReady({target:e}){this.ready=!1;const a=e.assignedElements({flatten:!0}),t=a;a.forEach(n=>{const h=[...n.querySelectorAll("*")||[]];t.push(...h)});const m=t.filter(n=>n.tagName.search("-")!==-1&&typeof n.updateComplete!="undefined").map(n=>n.updateComplete);await Promise.all(m),new Promise(n=>{setTimeout(n)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return
|
|
92
|
+
`}async checkReady({target:e}){this.ready=!1;const a=e.assignedElements({flatten:!0}),t=a;a.forEach(n=>{const h=[...n.querySelectorAll("*")||[]];t.push(...h)});const m=t.filter(n=>n.tagName.search("-")!==-1&&typeof n.updateComplete!="undefined").map(n=>n.updateComplete);await Promise.all(m),new Promise(n=>{setTimeout(n)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return o`
|
|
93
93
|
<div class="manage-theme" part="controls">
|
|
94
94
|
${this.systemControl} ${this.colorControl} ${this.scaleControl}
|
|
95
95
|
${this.localeControl} ${this.dirControl}
|
|
96
96
|
${this.reduceMotionControl}
|
|
97
97
|
</div>
|
|
98
|
-
`}get systemControl(){return
|
|
98
|
+
`}get systemControl(){return o`
|
|
99
99
|
<sp-field-label side-aligned="start" for="system">
|
|
100
100
|
System
|
|
101
101
|
</sp-field-label>
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
<sp-menu-item value="express">Express</sp-menu-item>
|
|
111
111
|
<sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
|
|
112
112
|
</sp-picker>
|
|
113
|
-
`}get colorControl(){return
|
|
113
|
+
`}get colorControl(){return o`
|
|
114
114
|
<sp-field-label side-aligned="start" for="color">
|
|
115
115
|
Theme
|
|
116
116
|
</sp-field-label>
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
<sp-menu-item value="light">Light</sp-menu-item>
|
|
125
125
|
<sp-menu-item value="dark">Dark</sp-menu-item>
|
|
126
126
|
</sp-picker>
|
|
127
|
-
`}get scaleControl(){return
|
|
127
|
+
`}get scaleControl(){return o`
|
|
128
128
|
<sp-field-label side-aligned="start" for="scale">
|
|
129
129
|
Scale
|
|
130
130
|
</sp-field-label>
|
|
@@ -139,9 +139,9 @@
|
|
|
139
139
|
<sp-menu-item value="medium">Medium</sp-menu-item>
|
|
140
140
|
<sp-menu-item value="large">Large</sp-menu-item>
|
|
141
141
|
</sp-picker>
|
|
142
|
-
`}get localeControl(){const e=a=>
|
|
142
|
+
`}get localeControl(){const e=a=>o`
|
|
143
143
|
<sp-menu-item value=${a}>${u[a]}</sp-menu-item>
|
|
144
|
-
`;return
|
|
144
|
+
`;return o`
|
|
145
145
|
<sp-field-label side-aligned="start" for="locale">
|
|
146
146
|
Locale
|
|
147
147
|
</sp-field-label>
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
>
|
|
156
156
|
${Object.keys(u).map(e)}
|
|
157
157
|
</sp-picker>
|
|
158
|
-
`}get dirControl(){return
|
|
158
|
+
`}get dirControl(){return o`
|
|
159
159
|
<sp-field-label side-aligned="start" for="dir">
|
|
160
160
|
Direction
|
|
161
161
|
</sp-field-label>
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
<sp-menu-item value="ltr">LTR</sp-menu-item>
|
|
171
171
|
<sp-menu-item value="rtl">RTL</sp-menu-item>
|
|
172
172
|
</sp-picker>
|
|
173
|
-
`}get reduceMotionControl(){return
|
|
173
|
+
`}get reduceMotionControl(){return o`
|
|
174
174
|
<sp-switch
|
|
175
175
|
id="reduceMotion"
|
|
176
176
|
?checked=${this.reduceMotion}
|
|
@@ -183,5 +183,5 @@
|
|
|
183
183
|
--swc-test-caret-color: transparent;
|
|
184
184
|
--swc-test-forced-color-adjust: none;
|
|
185
185
|
}
|
|
186
|
-
`)}}
|
|
186
|
+
`)}}i([c({type:String})],StoryDecorator.prototype,"system",2),i([c({type:String})],StoryDecorator.prototype,"color",2),i([c({type:String})],StoryDecorator.prototype,"scale",2),i([c({type:String,reflect:!0,attribute:"dir"})],StoryDecorator.prototype,"direction",2),i([c({type:Boolean,attribute:"reduce-motion",reflect:!0})],StoryDecorator.prototype,"reduceMotion",2),i([c({type:String})],StoryDecorator.prototype,"lang",2),i([c({type:Boolean,reflect:!0})],StoryDecorator.prototype,"screenshot",2),i([w("sp-theme")],StoryDecorator.prototype,"themeRoot",2);
|
|
187
187
|
//# sourceMappingURL=StoryDecorator.js.map
|
|
@@ -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 { 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/spectrum-two/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 SystemVariant,\n Theme,\n} from '@spectrum-web-components/theme';\nimport './types.js';\nimport { type Locale, Locales } from './locales.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 const theme: SystemVariant =\n (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';\nexport let system: SystemVariant =\n (urlParams.get('sp_system') as SystemVariant) || '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';\nexport const screenshot = urlParams.get('sp_screenshot') === 'true';\nexport const locale = urlParams.get('sp_locale') || 'en-US';\nexport const direction = urlParams.get('sp_direction') || 'ltr';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultSystemVariant: system,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n defaultLocale: locale,\n};\n\nconst reduceMotionProperties = css`\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-animation-duration-6000: 0ms;\n --pending-delay: 0s;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\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(--decorator-padding-100)\n var(--decorator-padding-100)\n calc(\n 2 * var(--spectrum-focus-indicator-thickness) +\n var(--spectrum-component-height-100)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-background-base-color);\n color: var(--spectrum-body-color);\n\n --decorator-padding-100: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)\n );\n --decorator-padding-200: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)\n );\n --decorator-padding-400: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--decorator-padding-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--decorator-padding-200);\n right: var(--decorator-padding-200);\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n box-sizing: border-box;\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n sp-field-label {\n padding-inline-end: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--decorator-padding-100)\n );\n margin-inline-start: var(--decorator-padding-400);\n }\n sp-switch {\n margin-inline-start: var(--decorator-padding-400);\n }\n `,\n ];\n }\n\n @property({ type: String })\n public system: SystemVariant =\n window.__swc_hack_knobs__.defaultSystemVariant;\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: String })\n public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = screenshot;\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 'system':\n this.system =\n system =\n window.__swc_hack_knobs__.defaultSystemVariant =\n value as SystemVariant;\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 if (document.documentElement.dir !== dir) {\n document.documentElement.dir = dir;\n }\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n case 'locale':\n this.lang = window.__swc_hack_knobs__.defaultLocale =\n value as Locale;\n break;\n }\n }\n\n public get backgroundStyle() {\n if (system === 'spectrum-two') {\n return `background-color: var(--spectrum-background-base-color);`;\n }\n return `background-color: var(--spectrum-gray-100);`;\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 system=${this.system}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n style=${this.backgroundStyle}\n part=\"container\"\n lang=${this.lang}\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 assignedElements = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const descendents = assignedElements;\n assignedElements.forEach((descendent) => {\n const gathered = [\n ...(descendent.querySelectorAll('*') || []),\n ] as SpectrumElement[];\n descendents.push(...gathered);\n });\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.systemControl} ${this.colorControl} ${this.scaleControl}\n ${this.localeControl} ${this.dirControl}\n ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get systemControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"system\">\n System\n </sp-field-label>\n <sp-picker\n id=\"system\"\n placement=\"top\"\n quiet\n .value=${this.system}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Spectrum</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n <sp-menu-item value=\"spectrum-two\">Spectrum 2</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"color\">\n Theme\n </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=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"scale\">\n Scale\n </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 localeControl(): TemplateResult {\n const renderLocaleOption = (locale: Locale): TemplateResult => html`\n <sp-menu-item value=${locale}>${Locales[locale]}</sp-menu-item>\n `;\n\n return html`\n <sp-field-label side-aligned=\"start\" for=\"locale\">\n Locale\n </sp-field-label>\n <sp-picker\n id=\"locale\"\n label=\"Locale\"\n placement=\"top\"\n quiet\n .value=${this.lang}\n @change=${this.updateTheme}\n >\n ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)}\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"dir\">\n Direction\n </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 { 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/spectrum-two/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 SystemVariant,\n Theme,\n} from '@spectrum-web-components/theme';\nimport './types.js';\nimport { type Locale, Locales } from './locales.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 const theme: SystemVariant =\n (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';\nexport let system: SystemVariant =\n (urlParams.get('sp_system') as SystemVariant) || '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';\nexport const screenshot = urlParams.get('sp_screenshot') === 'true';\nexport const locale = urlParams.get('sp_locale') || 'en-US';\nexport const direction = urlParams.get('sp_direction') || 'ltr';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n defaultSystemVariant: system,\n defaultColor: color,\n defaultScale: scale,\n defaultDirection: dir,\n defaultReduceMotion: reduceMotion,\n defaultLocale: locale,\n};\n\nconst reduceMotionProperties = css`\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-animation-duration-6000: 0ms;\n --pending-delay: 0s;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\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(--decorator-padding-100)\n var(--decorator-padding-100)\n calc(\n 2 * var(--spectrum-focus-indicator-thickness) +\n var(--spectrum-component-height-100)\n );\n box-sizing: border-box;\n background-color: var(--spectrum-background-base-color);\n color: var(--spectrum-body-color);\n\n --decorator-padding-100: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)\n );\n --decorator-padding-200: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)\n );\n --decorator-padding-400: calc(\n var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)\n );\n }\n :host([screenshot]) sp-theme {\n padding: var(--decorator-padding-100);\n }\n :host([reduce-motion]) sp-theme {\n ${reduceMotionProperties}\n }\n .manage-theme {\n position: fixed;\n bottom: 0;\n left: var(--decorator-padding-200);\n right: var(--decorator-padding-200);\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n box-sizing: border-box;\n padding-bottom: calc(\n 2 * var(--spectrum-alias-focus-ring-size)\n );\n }\n sp-field-label {\n padding-inline-end: var(\n --spectrum-fieldlabel-side-padding-x,\n var(--decorator-padding-100)\n );\n margin-inline-start: var(--decorator-padding-400);\n }\n sp-switch {\n margin-inline-start: var(--decorator-padding-400);\n }\n `,\n ];\n }\n\n @property({ type: String })\n public system: SystemVariant =\n window.__swc_hack_knobs__.defaultSystemVariant;\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: String })\n public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;\n\n @property({ type: Boolean, reflect: true })\n public screenshot = screenshot;\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 'system':\n this.system =\n system =\n window.__swc_hack_knobs__.defaultSystemVariant =\n value as SystemVariant;\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 if (document.documentElement.dir !== dir) {\n document.documentElement.dir = dir;\n }\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n case 'locale':\n this.lang = window.__swc_hack_knobs__.defaultLocale =\n value as Locale;\n break;\n }\n }\n\n public get backgroundStyle() {\n if (this.system === 'spectrum-two') {\n return `background-color: var(--spectrum-gray-50)`;\n }\n return `background-color: var(--spectrum-gray-100);`;\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 system=${this.system}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n style=${this.backgroundStyle}\n part=\"container\"\n lang=${this.lang}\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 assignedElements = target.assignedElements({\n flatten: true,\n }) as SpectrumElement[];\n const descendents = assignedElements;\n assignedElements.forEach((descendent) => {\n const gathered = [\n ...(descendent.querySelectorAll('*') || []),\n ] as SpectrumElement[];\n descendents.push(...gathered);\n });\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.systemControl} ${this.colorControl} ${this.scaleControl}\n ${this.localeControl} ${this.dirControl}\n ${this.reduceMotionControl}\n </div>\n `;\n }\n\n private get systemControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"system\">\n System\n </sp-field-label>\n <sp-picker\n id=\"system\"\n placement=\"top\"\n quiet\n .value=${this.system}\n @change=${this.updateTheme}\n >\n <sp-menu-item value=\"spectrum\">Spectrum</sp-menu-item>\n <sp-menu-item value=\"express\">Express</sp-menu-item>\n <sp-menu-item value=\"spectrum-two\">Spectrum 2</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get colorControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"color\">\n Theme\n </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=\"light\">Light</sp-menu-item>\n <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n </sp-picker>\n `;\n }\n\n private get scaleControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"scale\">\n Scale\n </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 localeControl(): TemplateResult {\n const renderLocaleOption = (locale: Locale): TemplateResult => html`\n <sp-menu-item value=${locale}>${Locales[locale]}</sp-menu-item>\n `;\n\n return html`\n <sp-field-label side-aligned=\"start\" for=\"locale\">\n Locale\n </sp-field-label>\n <sp-picker\n id=\"locale\"\n label=\"Locale\"\n placement=\"top\"\n quiet\n .value=${this.lang}\n @change=${this.updateTheme}\n >\n ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)}\n </sp-picker>\n `;\n }\n\n private get dirControl(): TemplateResult {\n return html`\n <sp-field-label side-aligned=\"start\" for=\"dir\">\n Direction\n </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", "DARK_MODE", "Theme", "Locales", "queryString", "urlParams", "reduceMotionProperties", "el", "target", "id", "value", "checked", "event", "node", "assignedElements", "descendents", "descendent", "gathered", "updates", "res", "renderLocaleOption", "locale", "changes", "__decorateClass"]
|
|
7
7
|
}
|