@spectrum-web-components/story-decorator 0.47.2 → 0.48.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.
Files changed (14) hide show
  1. package/custom-elements.json +37 -0
  2. package/decorator.dev.js +10 -16
  3. package/decorator.dev.js.map +2 -2
  4. package/decorator.js +5 -7
  5. package/decorator.js.map +3 -3
  6. package/package.json +14 -10
  7. package/src/StoryDecorator.dev.js +34 -2
  8. package/src/StoryDecorator.dev.js.map +3 -3
  9. package/src/StoryDecorator.js +32 -14
  10. package/src/StoryDecorator.js.map +3 -3
  11. package/src/locales.dev.js +32 -0
  12. package/src/locales.dev.js.map +7 -0
  13. package/src/locales.js +2 -0
  14. package/src/locales.js.map +7 -0
package/custom-elements.json CHANGED
@@ -64,6 +64,10 @@
64
64
  "kind": "variable",
65
65
  "name": "screenshot"
66
66
  },
67
+ {
68
+ "kind": "variable",
69
+ "name": "locale"
70
+ },
67
71
  {
68
72
  "kind": "class",
69
73
  "description": "",
@@ -113,6 +117,15 @@
113
117
  "attribute": "reduce-motion",
114
118
  "reflects": true
115
119
  },
120
+ {
121
+ "kind": "field",
122
+ "name": "lang",
123
+ "type": {
124
+ "text": "Locale"
125
+ },
126
+ "privacy": "public",
127
+ "attribute": "lang"
128
+ },
116
129
  {
117
130
  "kind": "field",
118
131
  "name": "screenshot",
@@ -264,6 +277,15 @@
264
277
  "privacy": "private",
265
278
  "readonly": true
266
279
  },
280
+ {
281
+ "kind": "field",
282
+ "name": "localeControl",
283
+ "type": {
284
+ "text": "TemplateResult"
285
+ },
286
+ "privacy": "private",
287
+ "readonly": true
288
+ },
267
289
  {
268
290
  "kind": "field",
269
291
  "name": "dirControl",
@@ -316,6 +338,13 @@
316
338
  "name": "reduce-motion",
317
339
  "fieldName": "reduceMotion"
318
340
  },
341
+ {
342
+ "name": "lang",
343
+ "type": {
344
+ "text": "Locale"
345
+ },
346
+ "fieldName": "lang"
347
+ },
319
348
  {
320
349
  "name": "screenshot",
321
350
  "default": "screenshot",
@@ -387,6 +416,14 @@
387
416
  "module": "src/StoryDecorator.js"
388
417
  }
389
418
  },
419
+ {
420
+ "kind": "js",
421
+ "name": "locale",
422
+ "declaration": {
423
+ "name": "locale",
424
+ "module": "src/StoryDecorator.js"
425
+ }
426
+ },
390
427
  {
391
428
  "kind": "js",
392
429
  "name": "StoryDecorator",
package/decorator.dev.js CHANGED
@@ -15,22 +15,16 @@ export const themeStyles = html`
15
15
  }
16
16
  </style>
17
17
  `;
18
- export const swcThemeDecoratorWithConfig = ({ bundled } = { bundled: true }) => (story) => {
19
- if (!bundled) {
20
- requestAnimationFrame(() => {
21
- document.documentElement.setAttribute("lang", "en");
22
- const decorator = document.querySelector(
23
- "sp-story-decorator"
24
- );
25
- render(story(), decorator);
26
- });
27
- }
18
+ export const swcThemeDecorator = (story) => {
19
+ requestAnimationFrame(() => {
20
+ const decorator = document.querySelector(
21
+ "sp-story-decorator"
22
+ );
23
+ render(story(), decorator);
24
+ });
28
25
  return html`
29
- ${themeStyles}
30
- <sp-story-decorator role="main">
31
- ${bundled ? story() : html``}
32
- </sp-story-decorator>
33
- `;
26
+ ${themeStyles}
27
+ <sp-story-decorator role="main"></sp-story-decorator>
28
+ `;
34
29
  };
35
- export const swcThemeDecorator = swcThemeDecoratorWithConfig();
36
30
  //# sourceMappingURL=decorator.dev.js.map
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 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,WAAW;AAAA;AAAA,kBAEP,UAAU,MAAM,IAAI,MAAM;AAAA;AAAA;AAGxC;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 swcThemeDecorator = (story: () => TemplateResult) => {\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 role=\"main\"></sp-story-decorator>\n `;\n};\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,oBAAoB,CAAC,UAAgC;AAC9D,wBAAsB,MAAM;AACxB,UAAM,YAAY,SAAS;AAAA,MACvB;AAAA,IACJ;AACA,WAAO,MAAM,GAAG,SAAS;AAAA,EAC7B,CAAC;AAED,SAAO;AAAA,UACD,WAAW;AAAA;AAAA;AAGrB;",
6
6
  "names": []
7
7
  }
package/decorator.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";import{html as t,render as s}from"@spectrum-web-components/base";import"./sp-story-decorator.js";export const themeStyles=t`
1
+ "use strict";import{html as t,render as e}from"@spectrum-web-components/base";import"./sp-story-decorator.js";export const themeStyles=t`
2
2
  <style>
3
3
  #root {
4
4
  padding: 0;
@@ -11,10 +11,8 @@
11
11
  position: absolute;
12
12
  }
13
13
  </style>
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
- ${themeStyles}
16
- <sp-story-decorator role="main">
17
- ${e?o():t``}
18
- </sp-story-decorator>
19
- `),swcThemeDecorator=swcThemeDecoratorWithConfig();
14
+ `,swcThemeDecorator=o=>(requestAnimationFrame(()=>{const r=document.querySelector("sp-story-decorator");e(o(),r)}),t`
15
+ ${themeStyles}
16
+ <sp-story-decorator role="main"></sp-story-decorator>
17
+ `);
20
18
  //# 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 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,WAAW;AAAA;AAAA,kBAEPE,EAAUC,EAAM,EAAIH,GAAM;AAAA;AAAA,WAK/B,kBAAoB,4BAA4B",
6
- "names": ["html", "render", "bundled", "story", "decorator"]
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 swcThemeDecorator = (story: () => TemplateResult) => {\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 role=\"main\"></sp-story-decorator>\n `;\n};\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,kBAAqBE,IAC9B,sBAAsB,IAAM,CACxB,MAAMC,EAAY,SAAS,cACvB,oBACJ,EACAF,EAAOC,EAAM,EAAGC,CAAS,CAC7B,CAAC,EAEMH;AAAA,UACD,WAAW;AAAA;",
6
+ "names": ["html", "render", "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.47.2",
3
+ "version": "0.48.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -32,6 +32,10 @@
32
32
  "development": "./src/index.dev.js",
33
33
  "default": "./src/index.js"
34
34
  },
35
+ "./src/locales.js": {
36
+ "development": "./src/locales.dev.js",
37
+ "default": "./src/locales.js"
38
+ },
35
39
  "./src/types.js": {
36
40
  "development": "./src/types.dev.js",
37
41
  "default": "./src/types.js"
@@ -65,14 +69,14 @@
65
69
  "lit-html"
66
70
  ],
67
71
  "dependencies": {
68
- "@spectrum-web-components/base": "^0.47.2",
69
- "@spectrum-web-components/field-label": "^0.47.2",
70
- "@spectrum-web-components/menu": "^0.47.2",
71
- "@spectrum-web-components/overlay": "^0.47.2",
72
- "@spectrum-web-components/picker": "^0.47.2",
73
- "@spectrum-web-components/reactive-controllers": "^0.47.2",
74
- "@spectrum-web-components/switch": "^0.47.2",
75
- "@spectrum-web-components/theme": "^0.47.2"
72
+ "@spectrum-web-components/base": "^0.48.0",
73
+ "@spectrum-web-components/field-label": "^0.48.0",
74
+ "@spectrum-web-components/menu": "^0.48.0",
75
+ "@spectrum-web-components/overlay": "^0.48.0",
76
+ "@spectrum-web-components/picker": "^0.48.0",
77
+ "@spectrum-web-components/reactive-controllers": "^0.48.0",
78
+ "@spectrum-web-components/switch": "^0.48.0",
79
+ "@spectrum-web-components/theme": "^0.48.0"
76
80
  },
77
81
  "types": "./src/index.d.ts",
78
82
  "customElements": "custom-elements.json",
@@ -81,5 +85,5 @@
81
85
  "./**/*.dev.js",
82
86
  "./sp-*.ts"
83
87
  ],
84
- "gitHead": "2784e4c65da6a65b6bc748d785154714c8498a8e"
88
+ "gitHead": "55dbbf99f33ba075fc2ca4201acd9ed56cee1c46"
85
89
  }
package/src/StoryDecorator.dev.js CHANGED
@@ -33,6 +33,7 @@ import {
33
33
  Theme
34
34
  } from "@spectrum-web-components/theme";
35
35
  import "./types.dev.js";
36
+ import { Locales } from "./locales.dev.js";
36
37
  const queryString = window.location.search;
37
38
  const urlParams = new URLSearchParams(queryString);
38
39
  export let dir = urlParams.get("sp_dir") || "ltr";
@@ -42,12 +43,14 @@ export let color = urlParams.get("sp_color") || (matchMedia(DARK_MODE).matches ?
42
43
  export let scale = urlParams.get("sp_scale") || "medium";
43
44
  export let reduceMotion = urlParams.get("sp_reduceMotion") === "true";
44
45
  export let screenshot = urlParams.get("sp_screenshot") === "true";
46
+ export let locale = urlParams.get("sp_locale") || "en-US";
45
47
  window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {
46
48
  defaultSystemVariant: system,
47
49
  defaultColor: color,
48
50
  defaultScale: scale,
49
51
  defaultDirection: dir,
50
- defaultReduceMotion: reduceMotion
52
+ defaultReduceMotion: reduceMotion,
53
+ defaultLocale: locale
51
54
  };
52
55
  const reduceMotionProperties = css`
53
56
  --spectrum-global-animation-duration-100: 0ms;
@@ -88,6 +91,7 @@ export class StoryDecorator extends SpectrumElement {
88
91
  this.scale = window.__swc_hack_knobs__.defaultScale;
89
92
  this.direction = window.__swc_hack_knobs__.defaultDirection;
90
93
  this.reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;
94
+ this.lang = window.__swc_hack_knobs__.defaultLocale;
91
95
  this.screenshot = screenshot;
92
96
  this.ready = false;
93
97
  }
@@ -183,6 +187,9 @@ export class StoryDecorator extends SpectrumElement {
183
187
  case "reduceMotion":
184
188
  this.reduceMotion = reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion = checked;
185
189
  break;
190
+ case "locale":
191
+ this.lang = window.__swc_hack_knobs__.defaultLocale = value;
192
+ break;
186
193
  }
187
194
  }
188
195
  handleKeydown(event) {
@@ -201,6 +208,7 @@ export class StoryDecorator extends SpectrumElement {
201
208
  color=${this.color}
202
209
  scale=${this.scale}
203
210
  dir=${this.direction}
211
+ lang=${this.lang}
204
212
  part="container"
205
213
  @keydown=${this.handleKeydown}
206
214
  >
@@ -241,7 +249,8 @@ export class StoryDecorator extends SpectrumElement {
241
249
  return html`
242
250
  <div class="manage-theme" part="controls">
243
251
  ${this.systemControl} ${this.colorControl} ${this.scaleControl}
244
- ${this.dirControl} ${this.reduceMotionControl}
252
+ ${this.localeControl} ${this.dirControl}
253
+ ${this.reduceMotionControl}
245
254
  </div>
246
255
  `;
247
256
  }
@@ -298,6 +307,26 @@ export class StoryDecorator extends SpectrumElement {
298
307
  </sp-picker>
299
308
  `;
300
309
  }
310
+ get localeControl() {
311
+ const renderLocaleOption = (locale2) => html`
312
+ <sp-menu-item value=${locale2}>${Locales[locale2]}</sp-menu-item>
313
+ `;
314
+ return html`
315
+ <sp-field-label side-aligned="start" for="locale">
316
+ Locale
317
+ </sp-field-label>
318
+ <sp-picker
319
+ id="locale"
320
+ label="Locale"
321
+ placement="top"
322
+ quiet
323
+ .value=${this.lang}
324
+ @change=${this.updateTheme}
325
+ >
326
+ ${Object.keys(Locales).map(renderLocaleOption)}
327
+ </sp-picker>
328
+ `;
329
+ }
301
330
  get dirControl() {
302
331
  return html`
303
332
  <sp-field-label side-aligned="start" for="dir">
@@ -357,6 +386,9 @@ __decorateClass([
357
386
  __decorateClass([
358
387
  property({ type: Boolean, attribute: "reduce-motion", reflect: true })
359
388
  ], StoryDecorator.prototype, "reduceMotion", 2);
389
+ __decorateClass([
390
+ property({ type: String })
391
+ ], StoryDecorator.prototype, "lang", 2);
360
392
  __decorateClass([
361
393
  property({ type: Boolean, reflect: true })
362
394
  ], StoryDecorator.prototype, "screenshot", 2);
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 { 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-core-tokens.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'\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: 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 let screenshot = urlParams.get('sp_screenshot') === 'true';\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};\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-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-gray-100);\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 background-color: var(--spectrum-gray-100);\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: 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 document.documentElement.dir = dir;\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some(\n (node) =>\n node instanceof HTMLInputElement ||\n node instanceof HTMLTextAreaElement ||\n !!(node as HTMLElement).isContentEditable\n );\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n system=${this.system}\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 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.dirControl} ${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 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
- "names": []
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-core-tokens.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 let 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 let screenshot = urlParams.get('sp_screenshot') === 'true';\nexport let locale = urlParams.get('sp_locale') || 'en-US';\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-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-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-gray-100);\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 background-color: var(--spectrum-gray-100);\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 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 case 'locale':\n this.lang = window.__swc_hack_knobs__.defaultLocale =\n value as Locale;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some(\n (node) =>\n node instanceof HTMLInputElement ||\n node instanceof HTMLTextAreaElement ||\n !!(node as HTMLElement).isContentEditable\n );\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n system=${this.system}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n lang=${this.lang}\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 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
+ "names": ["locale"]
7
7
  }
package/src/StoryDecorator.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var o=(p,m,e,a)=>{for(var t=a>1?void 0:a?g(m,e):m,i=p.length-1,l;i>=0;i--)(l=p[i])&&(t=(a?l(m,e,t):l(t))||t);return a&&t&&h(m,e,t),t};import{css as d,html as r,nothing as _,SpectrumElement as b}from"@spectrum-web-components/base";import{property as c,queryAsync as f}from"@spectrum-web-components/base/src/decorators.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/spectrum-two/themes-core-tokens.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";const k=window.location.search,n=new URLSearchParams(k);export let dir=n.get("sp_dir")||"ltr",theme=n.get("sp_theme")||"spectrum",system=n.get("sp_system")||"spectrum",color=n.get("sp_color")||(matchMedia(w).matches?"dark":"light"),scale=n.get("sp_scale")||"medium",reduceMotion=n.get("sp_reduceMotion")==="true",screenshot=n.get("sp_screenshot")==="true";window.__swc_hack_knobs__=window.__swc_hack_knobs__||{defaultSystemVariant:system,defaultColor:color,defaultScale:scale,defaultDirection:dir,defaultReduceMotion:reduceMotion};const y=d`
1
+ "use strict";var g=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var s=(p,c,e,a)=>{for(var t=a>1?void 0:a?_(c,e):c,i=p.length-1,m;i>=0;i--)(m=p[i])&&(t=(a?m(c,e,t):m(t))||t);return a&&t&&g(c,e,t),t};import{css as d,html as o,nothing as b,SpectrumElement as f}from"@spectrum-web-components/base";import{property as l,queryAsync as w}from"@spectrum-web-components/base/src/decorators.js";import{DARK_MODE as v}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-core-tokens.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 k}from"@spectrum-web-components/theme";import"./types.js";import{Locales as u}from"./locales.js";const y=window.location.search,n=new URLSearchParams(y);export let dir=n.get("sp_dir")||"ltr",theme=n.get("sp_theme")||"spectrum",system=n.get("sp_system")||"spectrum",color=n.get("sp_color")||(matchMedia(v).matches?"dark":"light"),scale=n.get("sp_scale")||"medium",reduceMotion=n.get("sp_reduceMotion")==="true",screenshot=n.get("sp_screenshot")==="true",locale=n.get("sp_locale")||"en-US";window.__swc_hack_knobs__=window.__swc_hack_knobs__||{defaultSystemVariant:system,defaultColor:color,defaultScale:scale,defaultDirection:dir,defaultReduceMotion:reduceMotion,defaultLocale:locale};const T=d`
2
2
  --spectrum-global-animation-duration-100: 0ms;
3
3
  --spectrum-global-animation-duration-200: 0ms;
4
4
  --spectrum-global-animation-duration-300: 0ms;
@@ -28,7 +28,7 @@
28
28
  --pending-delay: 0s;
29
29
  --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
30
30
  --swc-test-duration: 1ms;
31
- `;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.screenshot=screenshot;this.ready=!1}static get styles(){return[d`
31
+ `;export class StoryDecorator extends f{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`
32
32
  :host(:focus) {
33
33
  outline: none;
34
34
  }
@@ -62,7 +62,7 @@
62
62
  padding: var(--decorator-padding-100);
63
63
  }
64
64
  :host([reduce-motion]) sp-theme {
65
- ${y}
65
+ ${T}
66
66
  }
67
67
  .manage-theme {
68
68
  position: fixed;
@@ -88,24 +88,26 @@
88
88
  sp-switch {
89
89
  margin-inline-start: var(--decorator-padding-400);
90
90
  }
91
- `]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:a}=e,{value:t}=e,{checked:i}=e;switch(a){case"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;break;case"reduceMotion":this.reduceMotion=reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion=i;break}}handleKeydown(e){e.composedPath().some(i=>i instanceof HTMLInputElement||i instanceof HTMLTextAreaElement||!!i.isContentEditable)&&e.stopPropagation()}render(){return r`
91
+ `]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:a}=e,{value:t}=e,{checked:i}=e;switch(a){case"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;break;case"reduceMotion":this.reduceMotion=reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion=i;break;case"locale":this.lang=window.__swc_hack_knobs__.defaultLocale=t;break}}handleKeydown(e){e.composedPath().some(i=>i instanceof HTMLInputElement||i instanceof HTMLTextAreaElement||!!i.isContentEditable)&&e.stopPropagation()}render(){return o`
92
92
  <sp-theme
93
93
  system=${this.system}
94
94
  color=${this.color}
95
95
  scale=${this.scale}
96
96
  dir=${this.direction}
97
+ lang=${this.lang}
97
98
  part="container"
98
99
  @keydown=${this.handleKeydown}
99
100
  >
100
101
  <slot @slotchange=${this.checkReady}></slot>
101
- ${this.screenshot?_:this.manageTheme}
102
+ ${this.screenshot?b:this.manageTheme}
102
103
  </sp-theme>
103
- `}async checkReady({target:e}){this.ready=!1;const a=e.assignedElements({flatten:!0}),t=a;a.forEach(s=>{const u=[...s.querySelectorAll("*")||[]];t.push(...u)});const l=t.filter(s=>s.tagName.search("-")!==-1&&typeof s.updateComplete!="undefined").map(s=>s.updateComplete);await Promise.all(l),new Promise(s=>{setTimeout(s)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return r`
104
+ `}async checkReady({target:e}){this.ready=!1;const a=e.assignedElements({flatten:!0}),t=a;a.forEach(r=>{const h=[...r.querySelectorAll("*")||[]];t.push(...h)});const m=t.filter(r=>r.tagName.search("-")!==-1&&typeof r.updateComplete!="undefined").map(r=>r.updateComplete);await Promise.all(m),new Promise(r=>{setTimeout(r)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return o`
104
105
  <div class="manage-theme" part="controls">
105
106
  ${this.systemControl} ${this.colorControl} ${this.scaleControl}
106
- ${this.dirControl} ${this.reduceMotionControl}
107
+ ${this.localeControl} ${this.dirControl}
108
+ ${this.reduceMotionControl}
107
109
  </div>
108
- `}get systemControl(){return r`
110
+ `}get systemControl(){return o`
109
111
  <sp-field-label side-aligned="start" for="system">
110
112
  System
111
113
  </sp-field-label>
@@ -120,7 +122,7 @@
120
122
  <sp-menu-item value="express">Express</sp-menu-item>
121
123
  <sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
122
124
  </sp-picker>
123
- `}get colorControl(){return r`
125
+ `}get colorControl(){return o`
124
126
  <sp-field-label side-aligned="start" for="color">
125
127
  Theme
126
128
  </sp-field-label>
@@ -134,7 +136,7 @@
134
136
  <sp-menu-item value="light">Light</sp-menu-item>
135
137
  <sp-menu-item value="dark">Dark</sp-menu-item>
136
138
  </sp-picker>
137
- `}get scaleControl(){return r`
139
+ `}get scaleControl(){return o`
138
140
  <sp-field-label side-aligned="start" for="scale">
139
141
  Scale
140
142
  </sp-field-label>
@@ -149,7 +151,23 @@
149
151
  <sp-menu-item value="medium">Medium</sp-menu-item>
150
152
  <sp-menu-item value="large">Large</sp-menu-item>
151
153
  </sp-picker>
152
- `}get dirControl(){return r`
154
+ `}get localeControl(){const e=a=>o`
155
+ <sp-menu-item value=${a}>${u[a]}</sp-menu-item>
156
+ `;return o`
157
+ <sp-field-label side-aligned="start" for="locale">
158
+ Locale
159
+ </sp-field-label>
160
+ <sp-picker
161
+ id="locale"
162
+ label="Locale"
163
+ placement="top"
164
+ quiet
165
+ .value=${this.lang}
166
+ @change=${this.updateTheme}
167
+ >
168
+ ${Object.keys(u).map(e)}
169
+ </sp-picker>
170
+ `}get dirControl(){return o`
153
171
  <sp-field-label side-aligned="start" for="dir">
154
172
  Direction
155
173
  </sp-field-label>
@@ -164,7 +182,7 @@
164
182
  <sp-menu-item value="ltr">LTR</sp-menu-item>
165
183
  <sp-menu-item value="rtl">RTL</sp-menu-item>
166
184
  </sp-picker>
167
- `}get reduceMotionControl(){return r`
185
+ `}get reduceMotionControl(){return o`
168
186
  <sp-switch
169
187
  id="reduceMotion"
170
188
  ?checked=${this.reduceMotion}
@@ -172,10 +190,10 @@
172
190
  >
173
191
  Reduce Motion
174
192
  </sp-switch>
175
- `}willUpdate(e){e.has("screenshot")&&this.screenshot&&v.registerThemeFragment("app","app",d`
193
+ `}willUpdate(e){e.has("screenshot")&&this.screenshot&&k.registerThemeFragment("app","app",d`
176
194
  :host {
177
195
  --swc-test-caret-color: transparent;
178
196
  --swc-test-forced-color-adjust: none;
179
197
  }
180
- `)}}o([c({type:String})],StoryDecorator.prototype,"system",2),o([c({type:String})],StoryDecorator.prototype,"color",2),o([c({type:String})],StoryDecorator.prototype,"scale",2),o([c({type:String,reflect:!0,attribute:"dir"})],StoryDecorator.prototype,"direction",2),o([c({type:Boolean,attribute:"reduce-motion",reflect:!0})],StoryDecorator.prototype,"reduceMotion",2),o([c({type:Boolean,reflect:!0})],StoryDecorator.prototype,"screenshot",2),o([f("sp-theme")],StoryDecorator.prototype,"themeRoot",2);
198
+ `)}}s([l({type:String})],StoryDecorator.prototype,"system",2),s([l({type:String})],StoryDecorator.prototype,"color",2),s([l({type:String})],StoryDecorator.prototype,"scale",2),s([l({type:String,reflect:!0,attribute:"dir"})],StoryDecorator.prototype,"direction",2),s([l({type:Boolean,attribute:"reduce-motion",reflect:!0})],StoryDecorator.prototype,"reduceMotion",2),s([l({type:String})],StoryDecorator.prototype,"lang",2),s([l({type:Boolean,reflect:!0})],StoryDecorator.prototype,"screenshot",2),s([w("sp-theme")],StoryDecorator.prototype,"themeRoot",2);
181
199
  //# 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 { 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-core-tokens.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';\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: 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 let screenshot = urlParams.get('sp_screenshot') === 'true';\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};\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-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-gray-100);\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 background-color: var(--spectrum-gray-100);\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: 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 document.documentElement.dir = dir;\n break;\n case 'reduceMotion':\n this.reduceMotion =\n reduceMotion =\n window.__swc_hack_knobs__.defaultReduceMotion =\n checked as boolean;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some(\n (node) =>\n node instanceof HTMLInputElement ||\n node instanceof HTMLTextAreaElement ||\n !!(node as HTMLElement).isContentEditable\n );\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n system=${this.system}\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 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.dirControl} ${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 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
- "names": ["css", "html", "nothing", "SpectrumElement", "property", "queryAsync", "DARK_MODE", "Theme", "queryString", "urlParams", "reduceMotionProperties", "el", "target", "id", "value", "checked", "event", "node", "assignedElements", "descendents", "descendent", "gathered", "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/spectrum-two/themes-core-tokens.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 let 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 let screenshot = urlParams.get('sp_screenshot') === 'true';\nexport let locale = urlParams.get('sp_locale') || 'en-US';\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-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-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-gray-100);\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 background-color: var(--spectrum-gray-100);\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 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 case 'locale':\n this.lang = window.__swc_hack_knobs__.defaultLocale =\n value as Locale;\n break;\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const path = event.composedPath();\n const hasInput = path.some(\n (node) =>\n node instanceof HTMLInputElement ||\n node instanceof HTMLTextAreaElement ||\n !!(node as HTMLElement).isContentEditable\n );\n if (hasInput) {\n event.stopPropagation();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-theme\n system=${this.system}\n color=${this.color}\n scale=${this.scale}\n dir=${this.direction}\n lang=${this.lang}\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 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
+ "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
  }
package/src/locales.dev.js ADDED
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ export var Locales = /* @__PURE__ */ ((Locales2) => {
3
+ Locales2["bn-IN"] = "Bengali (India)";
4
+ Locales2["cy-GB"] = "Welsh (United Kingdom)";
5
+ Locales2["da-DK"] = "Danish (Denmark)";
6
+ Locales2["de-DE"] = "German (Germany)";
7
+ Locales2["el-GR"] = "Greek (Greece)";
8
+ Locales2["en-US"] = "English (United States)";
9
+ Locales2["es-ES"] = "Spanish (Spain)";
10
+ Locales2["fi-FI"] = "Finnish (Finland)";
11
+ Locales2["fil-PH"] = "Filipino (Philippines)";
12
+ Locales2["fr-FR"] = "French (France)";
13
+ Locales2["hi-IN"] = "Hindi (India)";
14
+ Locales2["id-ID"] = "Indonesian (Indonesia)";
15
+ Locales2["it-IT"] = "Italian (Italy)";
16
+ Locales2["ja-JP"] = "Japanese (Japan)";
17
+ Locales2["ko-KR"] = "Korean (South Korea)";
18
+ Locales2["ms-MY"] = "Malay (Malaysia)";
19
+ Locales2["nb-NO"] = "Norwegian (Bokm\xE5l, Norway)";
20
+ Locales2["nl-NL"] = "Dutch (Netherlands)";
21
+ Locales2["pl-PL"] = "Polish (Poland)";
22
+ Locales2["pt-BR"] = "Portuguese (Brazil)";
23
+ Locales2["ro-RO"] = "Romanian (Romania)";
24
+ Locales2["sv-SE"] = "Swedish (Sweden)";
25
+ Locales2["ta-IN"] = "Tamil (India)";
26
+ Locales2["th-TH"] = "Thai (Thailand)";
27
+ Locales2["tr-TR"] = "Turkish (Turkey)";
28
+ Locales2["zh-Hans-CN"] = "Chinese (Simplified, China)";
29
+ Locales2["zh-Hant-TW"] = "Chinese (Traditional, Taiwan)";
30
+ return Locales2;
31
+ })(Locales || {});
32
+ //# sourceMappingURL=locales.dev.js.map
package/src/locales.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["locales.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2024 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\nexport enum Locales {\n 'bn-IN' = 'Bengali (India)',\n 'cy-GB' = 'Welsh (United Kingdom)',\n 'da-DK' = 'Danish (Denmark)',\n 'de-DE' = 'German (Germany)',\n 'el-GR' = 'Greek (Greece)',\n 'en-US' = 'English (United States)',\n 'es-ES' = 'Spanish (Spain)',\n 'fi-FI' = 'Finnish (Finland)',\n 'fil-PH' = 'Filipino (Philippines)',\n 'fr-FR' = 'French (France)',\n 'hi-IN' = 'Hindi (India)',\n 'id-ID' = 'Indonesian (Indonesia)',\n 'it-IT' = 'Italian (Italy)',\n 'ja-JP' = 'Japanese (Japan)',\n 'ko-KR' = 'Korean (South Korea)',\n 'ms-MY' = 'Malay (Malaysia)',\n 'nb-NO' = 'Norwegian (Bokm\u00E5l, Norway)',\n 'nl-NL' = 'Dutch (Netherlands)',\n 'pl-PL' = 'Polish (Poland)',\n 'pt-BR' = 'Portuguese (Brazil)',\n 'ro-RO' = 'Romanian (Romania)',\n 'sv-SE' = 'Swedish (Sweden)',\n 'ta-IN' = 'Tamil (India)',\n 'th-TH' = 'Thai (Thailand)',\n 'tr-TR' = 'Turkish (Turkey)',\n 'zh-Hans-CN' = 'Chinese (Simplified, China)',\n 'zh-Hant-TW' = 'Chinese (Traditional, Taiwan)',\n}\n\nexport type Locale = keyof typeof Locales;\n"],
5
+ "mappings": ";AAYO,WAAK,UAAL,kBAAKA,aAAL;AACH,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,YAAW;AACX,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,gBAAe;AACf,EAAAA,SAAA,gBAAe;AA3BP,SAAAA;AAAA,GAAA;",
6
+ "names": ["Locales"]
7
+ }
package/src/locales.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";export var Locales=(n=>(n["bn-IN"]="Bengali (India)",n["cy-GB"]="Welsh (United Kingdom)",n["da-DK"]="Danish (Denmark)",n["de-DE"]="German (Germany)",n["el-GR"]="Greek (Greece)",n["en-US"]="English (United States)",n["es-ES"]="Spanish (Spain)",n["fi-FI"]="Finnish (Finland)",n["fil-PH"]="Filipino (Philippines)",n["fr-FR"]="French (France)",n["hi-IN"]="Hindi (India)",n["id-ID"]="Indonesian (Indonesia)",n["it-IT"]="Italian (Italy)",n["ja-JP"]="Japanese (Japan)",n["ko-KR"]="Korean (South Korea)",n["ms-MY"]="Malay (Malaysia)",n["nb-NO"]="Norwegian (Bokm\xE5l, Norway)",n["nl-NL"]="Dutch (Netherlands)",n["pl-PL"]="Polish (Poland)",n["pt-BR"]="Portuguese (Brazil)",n["ro-RO"]="Romanian (Romania)",n["sv-SE"]="Swedish (Sweden)",n["ta-IN"]="Tamil (India)",n["th-TH"]="Thai (Thailand)",n["tr-TR"]="Turkish (Turkey)",n["zh-Hans-CN"]="Chinese (Simplified, China)",n["zh-Hant-TW"]="Chinese (Traditional, Taiwan)",n))(Locales||{});
2
+ //# sourceMappingURL=locales.js.map
package/src/locales.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["locales.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2024 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\nexport enum Locales {\n 'bn-IN' = 'Bengali (India)',\n 'cy-GB' = 'Welsh (United Kingdom)',\n 'da-DK' = 'Danish (Denmark)',\n 'de-DE' = 'German (Germany)',\n 'el-GR' = 'Greek (Greece)',\n 'en-US' = 'English (United States)',\n 'es-ES' = 'Spanish (Spain)',\n 'fi-FI' = 'Finnish (Finland)',\n 'fil-PH' = 'Filipino (Philippines)',\n 'fr-FR' = 'French (France)',\n 'hi-IN' = 'Hindi (India)',\n 'id-ID' = 'Indonesian (Indonesia)',\n 'it-IT' = 'Italian (Italy)',\n 'ja-JP' = 'Japanese (Japan)',\n 'ko-KR' = 'Korean (South Korea)',\n 'ms-MY' = 'Malay (Malaysia)',\n 'nb-NO' = 'Norwegian (Bokm\u00E5l, Norway)',\n 'nl-NL' = 'Dutch (Netherlands)',\n 'pl-PL' = 'Polish (Poland)',\n 'pt-BR' = 'Portuguese (Brazil)',\n 'ro-RO' = 'Romanian (Romania)',\n 'sv-SE' = 'Swedish (Sweden)',\n 'ta-IN' = 'Tamil (India)',\n 'th-TH' = 'Thai (Thailand)',\n 'tr-TR' = 'Turkish (Turkey)',\n 'zh-Hans-CN' = 'Chinese (Simplified, China)',\n 'zh-Hant-TW' = 'Chinese (Traditional, Taiwan)',\n}\n\nexport type Locale = keyof typeof Locales;\n"],
5
+ "mappings": "aAYO,WAAK,SAAAA,IACRA,EAAA,SAAU,kBACVA,EAAA,SAAU,yBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,iBACVA,EAAA,SAAU,0BACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,oBACVA,EAAA,UAAW,yBACXA,EAAA,SAAU,kBACVA,EAAA,SAAU,gBACVA,EAAA,SAAU,yBACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,uBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,gCACVA,EAAA,SAAU,sBACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,sBACVA,EAAA,SAAU,qBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,gBACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,mBACVA,EAAA,cAAe,8BACfA,EAAA,cAAe,gCA3BPA,IAAA",
6
+ "names": ["Locales"]
7
+ }