@spectrum-web-components/story-decorator 0.31.1-react.3 → 0.32.1-overlay.33

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.
Files changed (10) hide show
  1. package/custom-elements.json +12 -6
  2. package/decorator.dev.js +2 -1
  3. package/decorator.dev.js.map +2 -2
  4. package/decorator.js +3 -3
  5. package/decorator.js.map +2 -2
  6. package/package.json +10 -10
  7. package/src/StoryDecorator.dev.js +0 -23
  8. package/src/StoryDecorator.dev.js.map +3 -3
  9. package/src/StoryDecorator.js +13 -30
  10. package/src/StoryDecorator.js.map +3 -3
package/custom-elements.json CHANGED
@@ -226,7 +226,8 @@
226
226
  "type": {
227
227
  "text": "TemplateResult"
228
228
  },
229
- "privacy": "private"
229
+ "privacy": "private",
230
+ "readonly": true
230
231
  },
231
232
  {
232
233
  "kind": "field",
@@ -234,7 +235,8 @@
234
235
  "type": {
235
236
  "text": "TemplateResult"
236
237
  },
237
- "privacy": "private"
238
+ "privacy": "private",
239
+ "readonly": true
238
240
  },
239
241
  {
240
242
  "kind": "field",
@@ -242,7 +244,8 @@
242
244
  "type": {
243
245
  "text": "TemplateResult"
244
246
  },
245
- "privacy": "private"
247
+ "privacy": "private",
248
+ "readonly": true
246
249
  },
247
250
  {
248
251
  "kind": "field",
@@ -250,7 +253,8 @@
250
253
  "type": {
251
254
  "text": "TemplateResult"
252
255
  },
253
- "privacy": "private"
256
+ "privacy": "private",
257
+ "readonly": true
254
258
  },
255
259
  {
256
260
  "kind": "field",
@@ -258,7 +262,8 @@
258
262
  "type": {
259
263
  "text": "TemplateResult"
260
264
  },
261
- "privacy": "private"
265
+ "privacy": "private",
266
+ "readonly": true
262
267
  },
263
268
  {
264
269
  "kind": "field",
@@ -266,7 +271,8 @@
266
271
  "type": {
267
272
  "text": "TemplateResult"
268
273
  },
269
- "privacy": "private"
274
+ "privacy": "private",
275
+ "readonly": true
270
276
  }
271
277
  ],
272
278
  "attributes": [
package/decorator.dev.js CHANGED
@@ -18,6 +18,7 @@ export const themeStyles = html`
18
18
  export const swcThemeDecoratorWithConfig = ({ bundled } = { bundled: true }) => (story) => {
19
19
  if (!bundled) {
20
20
  requestAnimationFrame(() => {
21
+ document.documentElement.setAttribute("lang", "en");
21
22
  const decorator = document.querySelector(
22
23
  "sp-story-decorator"
23
24
  );
@@ -26,7 +27,7 @@ export const swcThemeDecoratorWithConfig = ({ bundled } = { bundled: true }) =>
26
27
  }
27
28
  return html`
28
29
  ${themeStyles}
29
- <sp-story-decorator>
30
+ <sp-story-decorator role="main">
30
31
  ${bundled ? story() : html``}
31
32
  </sp-story-decorator>
32
33
  `;
package/decorator.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["decorator.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 { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport './sp-story-decorator.dev.js'\n\nexport const themeStyles = html`\n <style>\n #root {\n padding: 0;\n }\n .docs-story sp-story-decorator::part(container) {\n min-height: auto;\n position: relative;\n }\n .docs-story sp-story-decorator::part(controls) {\n position: absolute;\n }\n </style>\n`;\n\nexport const swcThemeDecoratorWithConfig =\n ({ bundled } = { bundled: true }) =>\n (story: () => TemplateResult) => {\n if (!bundled) {\n requestAnimationFrame(() => {\n const decorator = document.querySelector(\n 'sp-story-decorator'\n ) as HTMLElement;\n render(story(), decorator);\n });\n }\n return html`\n ${themeStyles}\n <sp-story-decorator>\n ${bundled ? story() : html``}\n </sp-story-decorator>\n `;\n };\n\nexport const swcThemeDecorator = swcThemeDecoratorWithConfig();\n"],
5
- "mappings": ";AAYA,SAAS,MAAM,cAA8B;AAC7C,OAAO;AAEA,aAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAepB,aAAM,8BACT,CAAC,EAAE,QAAQ,IAAI,EAAE,SAAS,KAAK,MAC/B,CAAC,UAAgC;AAC7B,MAAI,CAAC,SAAS;AACV,0BAAsB,MAAM;AACxB,YAAM,YAAY,SAAS;AAAA,QACvB;AAAA,MACJ;AACA,aAAO,MAAM,GAAG,SAAS;AAAA,IAC7B,CAAC;AAAA,EACL;AACA,SAAO;AAAA,cACD;AAAA;AAAA,kBAEI,UAAU,MAAM,IAAI;AAAA;AAAA;AAGlC;AAEG,aAAM,oBAAoB,4BAA4B;",
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 { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport './sp-story-decorator.dev.js'\n\nexport const themeStyles = html`\n <style>\n #root {\n padding: 0;\n }\n .docs-story sp-story-decorator::part(container) {\n min-height: auto;\n position: relative;\n }\n .docs-story sp-story-decorator::part(controls) {\n position: absolute;\n }\n </style>\n`;\n\nexport const swcThemeDecoratorWithConfig =\n ({ bundled } = { bundled: true }) =>\n (story: () => TemplateResult) => {\n if (!bundled) {\n requestAnimationFrame(() => {\n document.documentElement.setAttribute('lang', 'en');\n const decorator = document.querySelector(\n 'sp-story-decorator'\n ) as HTMLElement;\n render(story(), decorator);\n });\n }\n return html`\n ${themeStyles}\n <sp-story-decorator role=\"main\">\n ${bundled ? story() : html``}\n </sp-story-decorator>\n `;\n };\n\nexport const swcThemeDecorator = swcThemeDecoratorWithConfig();\n"],
5
+ "mappings": ";AAYA,SAAS,MAAM,cAA8B;AAC7C,OAAO;AAEA,aAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAepB,aAAM,8BACT,CAAC,EAAE,QAAQ,IAAI,EAAE,SAAS,KAAK,MAC/B,CAAC,UAAgC;AAC7B,MAAI,CAAC,SAAS;AACV,0BAAsB,MAAM;AACxB,eAAS,gBAAgB,aAAa,QAAQ,IAAI;AAClD,YAAM,YAAY,SAAS;AAAA,QACvB;AAAA,MACJ;AACA,aAAO,MAAM,GAAG,SAAS;AAAA,IAC7B,CAAC;AAAA,EACL;AACA,SAAO;AAAA,cACD;AAAA;AAAA,kBAEI,UAAU,MAAM,IAAI;AAAA;AAAA;AAGlC;AAEG,aAAM,oBAAoB,4BAA4B;",
6
6
  "names": []
7
7
  }
package/decorator.js CHANGED
@@ -11,10 +11,10 @@
11
11
  position: absolute;
12
12
  }
13
13
  </style>
14
- `,swcThemeDecoratorWithConfig=({bundled:o}={bundled:!0})=>e=>(o||requestAnimationFrame(()=>{const r=document.querySelector("sp-story-decorator");s(e(),r)}),t`
14
+ `,swcThemeDecoratorWithConfig=({bundled:e}={bundled:!0})=>o=>(e||requestAnimationFrame(()=>{document.documentElement.setAttribute("lang","en");const r=document.querySelector("sp-story-decorator");s(o(),r)}),t`
15
15
  ${themeStyles}
16
- <sp-story-decorator>
17
- ${o?e():t``}
16
+ <sp-story-decorator role="main">
17
+ ${e?o():t``}
18
18
  </sp-story-decorator>
19
19
  `),swcThemeDecorator=swcThemeDecoratorWithConfig();
20
20
  //# sourceMappingURL=decorator.js.map
package/decorator.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["decorator.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 { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport './sp-story-decorator.js';\n\nexport const themeStyles = html`\n <style>\n #root {\n padding: 0;\n }\n .docs-story sp-story-decorator::part(container) {\n min-height: auto;\n position: relative;\n }\n .docs-story sp-story-decorator::part(controls) {\n position: absolute;\n }\n </style>\n`;\n\nexport const swcThemeDecoratorWithConfig =\n ({ bundled } = { bundled: true }) =>\n (story: () => TemplateResult) => {\n if (!bundled) {\n requestAnimationFrame(() => {\n const decorator = document.querySelector(\n 'sp-story-decorator'\n ) as HTMLElement;\n render(story(), decorator);\n });\n }\n return html`\n ${themeStyles}\n <sp-story-decorator>\n ${bundled ? story() : html``}\n </sp-story-decorator>\n `;\n };\n\nexport const swcThemeDecorator = swcThemeDecoratorWithConfig();\n"],
5
- "mappings": "aAYA,OAAS,QAAAA,EAAM,UAAAC,MAA8B,gCAC7C,MAAO,0BAEA,aAAM,YAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAed,4BACT,CAAC,CAAE,QAAAE,CAAQ,EAAI,CAAE,QAAS,EAAK,IAC9BC,IACQD,GACD,sBAAsB,IAAM,CACxB,MAAME,EAAY,SAAS,cACvB,oBACJ,EACAH,EAAOE,EAAM,EAAGC,CAAS,CAC7B,CAAC,EAEEJ;AAAA,cACD;AAAA;AAAA,kBAEIE,EAAUC,EAAM,EAAIH;AAAA;AAAA,WAKzB,kBAAoB,4BAA4B",
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 { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport './sp-story-decorator.js';\n\nexport const themeStyles = html`\n <style>\n #root {\n padding: 0;\n }\n .docs-story sp-story-decorator::part(container) {\n min-height: auto;\n position: relative;\n }\n .docs-story sp-story-decorator::part(controls) {\n position: absolute;\n }\n </style>\n`;\n\nexport const swcThemeDecoratorWithConfig =\n ({ bundled } = { bundled: true }) =>\n (story: () => TemplateResult) => {\n if (!bundled) {\n requestAnimationFrame(() => {\n document.documentElement.setAttribute('lang', 'en');\n const decorator = document.querySelector(\n 'sp-story-decorator'\n ) as HTMLElement;\n render(story(), decorator);\n });\n }\n return html`\n ${themeStyles}\n <sp-story-decorator role=\"main\">\n ${bundled ? story() : html``}\n </sp-story-decorator>\n `;\n };\n\nexport const swcThemeDecorator = swcThemeDecoratorWithConfig();\n"],
5
+ "mappings": "aAYA,OAAS,QAAAA,EAAM,UAAAC,MAA8B,gCAC7C,MAAO,0BAEA,aAAM,YAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAed,4BACT,CAAC,CAAE,QAAAE,CAAQ,EAAI,CAAE,QAAS,EAAK,IAC9BC,IACQD,GACD,sBAAsB,IAAM,CACxB,SAAS,gBAAgB,aAAa,OAAQ,IAAI,EAClD,MAAME,EAAY,SAAS,cACvB,oBACJ,EACAH,EAAOE,EAAM,EAAGC,CAAS,CAC7B,CAAC,EAEEJ;AAAA,cACD;AAAA;AAAA,kBAEIE,EAAUC,EAAM,EAAIH;AAAA;AAAA,WAKzB,kBAAoB,4BAA4B",
6
6
  "names": ["html", "render", "bundled", "story", "decorator"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/story-decorator",
3
- "version": "0.31.1-react.3+886f51591",
3
+ "version": "0.32.1-overlay.33+8b9227d00",
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.31.1-react.3+886f51591",
69
- "@spectrum-web-components/field-label": "^0.31.1-react.3+886f51591",
70
- "@spectrum-web-components/menu": "^0.31.1-react.3+886f51591",
71
- "@spectrum-web-components/overlay": "^0.31.1-react.3+886f51591",
72
- "@spectrum-web-components/picker": "^0.31.1-react.3+886f51591",
73
- "@spectrum-web-components/reactive-controllers": "^0.31.1-react.3+886f51591",
74
- "@spectrum-web-components/switch": "^0.31.1-react.3+886f51591",
75
- "@spectrum-web-components/theme": "^0.31.1-react.3+886f51591"
68
+ "@spectrum-web-components/base": "^0.32.1-overlay.33+8b9227d00",
69
+ "@spectrum-web-components/field-label": "^0.32.1-overlay.33+8b9227d00",
70
+ "@spectrum-web-components/menu": "^0.32.1-overlay.33+8b9227d00",
71
+ "@spectrum-web-components/overlay": "^0.32.1-overlay.33+8b9227d00",
72
+ "@spectrum-web-components/picker": "^0.32.1-overlay.33+8b9227d00",
73
+ "@spectrum-web-components/reactive-controllers": "^0.32.1-overlay.33+8b9227d00",
74
+ "@spectrum-web-components/switch": "^0.32.1-overlay.33+8b9227d00",
75
+ "@spectrum-web-components/theme": "^0.32.1-overlay.33+8b9227d00"
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": "886f515919ca0e8a1cec52a00babb1d4a195ae01"
84
+ "gitHead": "8b9227d00900eacee1c6d194064f10062f27ab3e"
85
85
  }
package/src/StoryDecorator.dev.js CHANGED
@@ -20,7 +20,6 @@ import {
20
20
  property,
21
21
  queryAsync
22
22
  } from "@spectrum-web-components/base/src/decorators.js";
23
- import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
24
23
  import { DARK_MODE } from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
25
24
  import "@spectrum-web-components/theme/sp-theme.js";
26
25
  import "@spectrum-web-components/theme/src/themes.js";
@@ -33,7 +32,6 @@ import "@spectrum-web-components/switch/sp-switch.js";
33
32
  import {
34
33
  Theme
35
34
  } from "@spectrum-web-components/theme";
36
- import { ActiveOverlay } from "@spectrum-web-components/overlay";
37
35
  import "./types.dev.js";
38
36
  const queryString = window.location.search;
39
37
  const urlParams = new URLSearchParams(queryString);
@@ -78,27 +76,6 @@ const reduceMotionProperties = css`
78
76
  --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
79
77
  --swc-test-duration: 1ms;
80
78
  `;
81
- ActiveOverlay.prototype.renderTheme = function(content) {
82
- const { color: color2, scale: scale2, theme: theme2, lang } = this.theme;
83
- return html`
84
- ${window.__swc_hack_knobs__.defaultReduceMotion ? html`
85
- <style>
86
- sp-theme {
87
- ${reduceMotionProperties}
88
- }
89
- </style>
90
- ` : html``}
91
- <sp-theme
92
- theme=${ifDefined(theme2)}
93
- color=${ifDefined(color2)}
94
- scale=${ifDefined(scale2)}
95
- lang=${ifDefined(lang)}
96
- part="theme"
97
- >
98
- ${content}
99
- </sp-theme>
100
- `;
101
- };
102
79
  export class StoryDecorator extends SpectrumElement {
103
80
  constructor() {
104
81
  super(...arguments);
package/src/StoryDecorator.dev.js.map CHANGED
@@ -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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",
6
- "names": ["color", "scale", "theme"]
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/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 './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\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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",
6
+ "names": []
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,i)=>{for(var t=i>1?void 0:i?g(n,e):n,s=m.length-1,a;s>=0;s--)(a=m[s])&&(t=(i?a(n,e,t):a(t))||t);return i&&t&&h(n,e,t),t};import{css as d,html as o,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`
1
+ "use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(c,l,e,o)=>{for(var t=o>1?void 0:o?u(l,e):l,a=c.length-1,i;a>=0;a--)(i=c[a])&&(t=(o?i(l,e,t):i(t))||t);return o&&t&&d(l,e,t),t};import{css as p,html as r,nothing as h,SpectrumElement as g}from"@spectrum-web-components/base";import{property as n,queryAsync as b}from"@spectrum-web-components/base/src/decorators.js";import{DARK_MODE as _}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 f}from"@spectrum-web-components/theme";import"./types.js";const w=window.location.search,m=new URLSearchParams(w);export let dir=m.get("sp_dir")||"ltr",theme=m.get("sp_theme")||"spectrum",color=m.get("sp_color")||(matchMedia(_).matches?"dark":"light"),scale=m.get("sp_scale")||"medium",reduceMotion=m.get("sp_reduceMotion")==="true";window.__swc_hack_knobs__=window.__swc_hack_knobs__||{defaultThemeVariant:theme,defaultColor:color,defaultScale:scale,defaultDirection:dir,defaultReduceMotion:reduceMotion};const v=p`
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,24 +26,7 @@
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:i,lang:t}=this.theme;return o`
30
- ${window.__swc_hack_knobs__.defaultReduceMotion?o`
31
- <style>
32
- sp-theme {
33
- ${u}
34
- }
35
- </style>
36
- `:o``}
37
- <sp-theme
38
- theme=${p(i)}
39
- color=${p(n)}
40
- scale=${p(e)}
41
- lang=${p(t)}
42
- part="theme"
43
- >
44
- ${m}
45
- </sp-theme>
46
- `};export class StoryDecorator extends _{constructor(){super(...arguments);this.theme=window.__swc_hack_knobs__.defaultThemeVariant;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.screenshot=!1;this.ready=!1}static get styles(){return[d`
29
+ `;export class StoryDecorator extends g{constructor(){super(...arguments);this.theme=window.__swc_hack_knobs__.defaultThemeVariant;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.screenshot=!1;this.ready=!1}static get styles(){return[p`
47
30
  :host(:focus) {
48
31
  outline: none;
49
32
  }
@@ -70,7 +53,7 @@
70
53
  padding: var(--spectrum-global-dimension-size-100);
71
54
  }
72
55
  :host([reduce-motion]) sp-theme {
73
- ${u}
56
+ ${v}
74
57
  }
75
58
  .manage-theme {
76
59
  position: fixed;
@@ -112,7 +95,7 @@
112
95
  margin-left: 0;
113
96
  padding: 0;
114
97
  }
115
- `]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:i}=e,{value:t}=e,{checked:s}=e;switch(i){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=s;break}}handleKeydown(e){e.composedPath().some(s=>s instanceof HTMLInputElement)&&e.stopPropagation()}render(){return o`
98
+ `]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:o}=e,{value:t}=e,{checked:a}=e;switch(o){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=a;break}}handleKeydown(e){e.composedPath().some(a=>a instanceof HTMLInputElement)&&e.stopPropagation()}render(){return r`
116
99
  <sp-theme
117
100
  theme=${this.theme}
118
101
  color=${this.color}
@@ -122,14 +105,14 @@
122
105
  @keydown=${this.handleKeydown}
123
106
  >
124
107
  <slot @slotchange=${this.checkReady}></slot>
125
- ${this.screenshot?b:this.manageTheme}
108
+ ${this.screenshot?h:this.manageTheme}
126
109
  </sp-theme>
127
- `}async checkReady({target:e}){this.ready=!1;const s=e.assignedElements({flatten:!0}).filter(a=>a.tagName.search("-")!==-1&&typeof a.updateComplete!="undefined").map(a=>a.updateComplete);await Promise.all(s),new Promise(a=>{setTimeout(a)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return o`
110
+ `}async checkReady({target:e}){this.ready=!1;const a=e.assignedElements({flatten:!0}).filter(i=>i.tagName.search("-")!==-1&&typeof i.updateComplete!="undefined").map(i=>i.updateComplete);await Promise.all(a),new Promise(i=>{setTimeout(i)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return r`
128
111
  <div class="manage-theme" part="controls">
129
112
  ${this.themeControl} ${this.colorControl} ${this.scaleControl}
130
113
  ${this.dirControl} ${this.reduceMotionControl}
131
114
  </div>
132
- `}get themeControl(){return o`
115
+ `}get themeControl(){return r`
133
116
  <sp-field-label for="theme">Spectrum</sp-field-label>
134
117
  <sp-picker
135
118
  id="theme"
@@ -141,7 +124,7 @@
141
124
  <sp-menu-item value="spectrum">Classic</sp-menu-item>
142
125
  <sp-menu-item value="express">Express</sp-menu-item>
143
126
  </sp-picker>
144
- `}get colorControl(){return o`
127
+ `}get colorControl(){return r`
145
128
  <sp-field-label for="color">Theme</sp-field-label>
146
129
  <sp-picker
147
130
  id="color"
@@ -155,7 +138,7 @@
155
138
  <sp-menu-item value="dark">Dark</sp-menu-item>
156
139
  <sp-menu-item value="darkest">Darkest</sp-menu-item>
157
140
  </sp-picker>
158
- `}get scaleControl(){return o`
141
+ `}get scaleControl(){return r`
159
142
  <sp-field-label for="scale">Scale</sp-field-label>
160
143
  <sp-picker
161
144
  id="scale"
@@ -168,7 +151,7 @@
168
151
  <sp-menu-item value="medium">Medium</sp-menu-item>
169
152
  <sp-menu-item value="large">Large</sp-menu-item>
170
153
  </sp-picker>
171
- `}get dirControl(){return o`
154
+ `}get dirControl(){return r`
172
155
  <sp-field-label for="dir">Direction</sp-field-label>
173
156
  <sp-picker
174
157
  id="dir"
@@ -181,7 +164,7 @@
181
164
  <sp-menu-item value="ltr">LTR</sp-menu-item>
182
165
  <sp-menu-item value="rtl">RTL</sp-menu-item>
183
166
  </sp-picker>
184
- `}get reduceMotionControl(){return o`
167
+ `}get reduceMotionControl(){return r`
185
168
  <sp-switch
186
169
  id="reduceMotion"
187
170
  ?checked=${this.reduceMotion}
@@ -189,10 +172,10 @@
189
172
  >
190
173
  Reduce Motion
191
174
  </sp-switch>
192
- `}willUpdate(e){e.has("screenshot")&&this.screenshot&&v.registerThemeFragment("app","app",d`
175
+ `}willUpdate(e){e.has("screenshot")&&this.screenshot&&f.registerThemeFragment("app","app",p`
193
176
  :host {
194
177
  --swc-test-caret-color: transparent;
195
178
  --swc-test-forced-color-adjust: none;
196
179
  }
197
- `)}}r([l({type:String})],StoryDecorator.prototype,"theme",2),r([l({type:String})],StoryDecorator.prototype,"color",2),r([l({type:String})],StoryDecorator.prototype,"scale",2),r([l({type:String,reflect:!0,attribute:"dir"})],StoryDecorator.prototype,"direction",2),r([l({type:Boolean,attribute:"reduce-motion",reflect:!0})],StoryDecorator.prototype,"reduceMotion",2),r([l({type:Boolean,reflect:!0})],StoryDecorator.prototype,"screenshot",2),r([f("sp-theme")],StoryDecorator.prototype,"themeRoot",2);
180
+ `)}}s([n({type:String})],StoryDecorator.prototype,"theme",2),s([n({type:String})],StoryDecorator.prototype,"color",2),s([n({type:String})],StoryDecorator.prototype,"scale",2),s([n({type:String,reflect:!0,attribute:"dir"})],StoryDecorator.prototype,"direction",2),s([n({type:Boolean,attribute:"reduce-motion",reflect:!0})],StoryDecorator.prototype,"reduceMotion",2),s([n({type:Boolean,reflect:!0})],StoryDecorator.prototype,"screenshot",2),s([b("sp-theme")],StoryDecorator.prototype,"themeRoot",2);
198
181
  //# sourceMappingURL=StoryDecorator.js.map
package/src/StoryDecorator.js.map CHANGED
@@ -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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",
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"]
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/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 './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\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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",
6
+ "names": ["css", "html", "nothing", "SpectrumElement", "property", "queryAsync", "DARK_MODE", "Theme", "queryString", "urlParams", "reduceMotionProperties", "el", "target", "id", "value", "checked", "event", "node", "updates", "res", "changes", "__decorateClass"]
7
7
  }